前面我们已经将html代码写的合乎语法，具备语义，能够在很多环境被较好的解释。
我们觉得说可以上线了，但是上线之前我们还需要来衡量一些其它的因素，如系统的安全性、性能考虑、页面的内容是否正确等。
上线前，我们还需要好好的检查代码里的如下这些方面：
1 需要安全考虑的HTTP请求，使用POST来替换GET方式。考虑一下：搜索引擎来请求会怎么样，用户访问一个超时的连接会怎么样？
2 替换可以通过GET方式获取的地方为GET。GET方式通过URL而不一定要是form来访问，能够回退、cache、预先抓取、收藏。需要注意参数长度有限制
3 在不怎么变化的情况下使用cache，在易变的情况下关闭cache，如果变动实在太频繁的话，需要使用etag来辅助缓存
4 flash使用时需要注意会牺牲一部分用户
5 适当的时候将联系表单更改为mailto，方便用户直接发邮件进行交流
6 设置适当的robots.txt规则来阻挡一些无谓的请求。
User-agent: *
Disallow: /cgi-bin
Disallow: /store/checkout
User-agent: Googlebot
Disallow: /staging
Disallow: /experimental
环境已经搭好了，我们还需要做什么呢？
呵呵，我们还需要检查一下页面内容是否都是正确的：
1 流畅的内容表达，避免误拼。尽量避免一些带有歧义的表达，错别字等
2 删除那些失效的连接，可以使用这两个工具：http://validator.w3.org/checklink http://www.linklint.org/
3 如果删除了页面，尽量提供跳转给用户到新的页面上来，或者统一的给用户提示。
RewriteEngine On
RewriteOptions MaxRedirects=10 inherit
RewriteBase /
RewriteRule ^examples(.*) books/jdr/examples$1 [R]
4 将内容尽快的展示给用户，而不是让用户自己去导航。尽量少弄欢迎页这样的东东
5 对于一些敏感信息，如email这样的，尽量的隐藏起来，避免一些恶意的爬虫来爬取
<a href="mailto:elharo%40metalab%2Eunc%2Eedu">E-mail Me</a>
呵呵，上述都已经检查好了，跑一遍测试用例，在预发布机上进行一次校验，没有问题后，上线吧。
学习完html的语法后，我们按照html的语法来撰写html代码，是否这样的代码就是最好的代码了呢？
呵呵，xhtml中规范了各个标签更多的语义性，关注完语法后，我们需要根据实际的语义来使用合适的html标签，
从而使得我们的代码具体更多的适用性，不仅能够被桌面浏览器阅读，同时能够被盲人阅读器阅读、同时能够在
一些手机终端上被较好的阅读、以及搜索引擎很好的解释等等。
接下来，我们让html代码语义话起来:
一方面，我们从布局来让html语义起来：
表现和内容相分离。DIV+CSS的使用。注意按照百分比来设置宽度。让不同大小分辨率的用户能够受益。
1 尽量将内容DIV写在最前面，最重要的放在最前面。(跨越侧边栏、顶部、底部)
2 尽量少的使用frame。对用户而言，添加书签、导航、滚动条、标题栏都会因frame的使用带来麻烦。对于robot，frame显得很不用好，常常会索引到某一个子页面。
3 在列表的地方尽量使用ul、dl或者ol。(dl一般用于键值解释的情况下)
ul li:after {
content: ", ";
}在每一个列项后面加上一个，号(ie下没有效果)。
4 需要标识的元素尽量分配一个独立的id给他们，如<div id="content"></div><div id="menu"></div>。
5 尽量给每个img标签都设置宽和高。浏览器渲染会更快一些。
另一方面，我们让html语义代码更多兼容不同的环境：
1 盲人阅读：
替换img为h文本。尝试使用背景图
2 为form表单的非隐藏的输入项增加label标识，如input、textarea、select等
3 为form表单中的每个输入项取一个有意义的名字
4 合适的话，尽量去掉表单的自动回填。autocomplete=”off”。自动回填能够减少一定的输入工作量
5 为表单中可编辑的项设置对应的tab快捷键。这样的话，方便通过键盘就能直接进行连续的输入。a、area、button、input、object、select、textarea支持tab键属性。
Tabindex的值从1到32767(有符号的short)，溢出从1开始算起
6 为视觉障碍者在页面的顶部提供一个锚结点直接到内容部分，从而能够轻松的跳过导航这些部分的内容。
7 页面内容过长时，通过h1~h6来组合标题便于阅读。
8 表单输入项尽量弄大一些，方便输入。一些textarea尽量高一些，宽一些，少来点滚动条。
9 为table增加描述信息。合适的话，为table增加一个summary属性，一个caption标签，通过th来增加列说明。
10 使用abbr和acronm标签来表示缩写
11 使用lang属性来标识每个根节点的语言
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en-US" xml:lang="en-US">
<body>
<p>Pierre shouted,
"<span lang="fr" xml:lang="en-US">Vive la France!</span>"
</p>
</body>
</html>
了解了一些html的基本语法后，我们需要在事件中来强化理解，从而加深影响，以后使用起来就会更加的得心应手。在实践中会有一些更多的细节的地方需要我们自己去斟酌和考虑。
了解html基本语法后，我们需要实践来学习html的语法，从而加深理解:
1 为了兼容，使用transitional的DTD来对文档进行校验。
2 删掉已经不再支持的一些标签。如sound、marquee等。
3 为每个img标签都加上一个alt标签。方便那些视觉障碍，或者兼容后续的一些语音浏览器、google、baidu等一些图片搜索更多会依赖alt属性来表示一张图片。
4 使用object标签来替换embed标签。Embed标签不是标准的，虽然同时可以存在任意多个属性，然而Object可以通过param来传递属性
<object
width="160" height="600">
<param value="sameDomain" />
<param value="banner.swf" />
<param value="high" />
<param value="#006699" />
<embed src="banner.swf" quality="high" bgcolor="#006699"
width="160" height="600"
align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
为了兼容一些老的浏览器，可以在object里面写上embed标签来做兼容。
5 尽量使用strict的DTD。由于strict的DTD删除了一些遗留的表现元素的标签，需要做一些圆润的处理:
1) center用css来取代text-align:center
2) font用css来取代font-size、font-family、color
3) 替换i标签为em或者span。由于i标签更多是表现而无语义，所以在一些无显示的浏览器上并没有效果。
4) 替换b为strong或者span
5) 使用css属性来替换color属性
6) 将img标签中的诸多属性移动到CSS中来
7) 替换applet为object
8) 用css来表示big, small, strike, s, ...
读了一次HTML重构Refactoring HTML，正好最近在搞一些html重构方面的东东,边度边思考，有一些收获，记录一下，便于以后来查询。
大家都可能会想html这么简单的一个排版的东东，有什么需要重构的呢？html的重构会有一些什么具体的东东呢?
开始之前，自己总结的几个概念。
重构的反面不是不重构，而是重写。重构的目的是为了更方便的进行重构。
重构的几个关键词：系统 一部分 调整 更好 可预期 可控
重构：是在一段可预期的时间内可控的对系统的一部分进行调整，从而使得系统的效率变得更高的过程。
为什么要重构？
1 代码可读性很差。Css和html混合在一起
2 渲染很慢
3 浏览器不兼容
4 页面需要一些不太流行的技术，如silverlight，flash等
5 安全性差。可能被人引发xss漏洞
6 SEO太差，被搜索引擎索引在很后的页面
7 用户的抱怨
重构些什么？
1 XHMTL
2 CSS
3 REST
XHTML
1 良好的格式，减轻浏览器容错的工作。
2 减少跨浏览器编程js和css调试的时间。
3 可以使用一些新的技术，如SVG、MusicXML等。HTML更多关注文本和图片。
CSS
1 样式和展现分离，相同的内容可以在不同的平台上展现，如手机平台，台式机平台。
2 抽象出来的样式可以四处可用。减少工作量。DRY，Don't Repeat Yourself. (常用的reset.css)
3 抽象出来四处可用，节省带宽。
REST: Representational State Transfer深入理解http协议
关注：Form、UA用户验证、Cookie、回话、状态
1 通过URL来定位资源：
如通过http://www.example.com/foo/bar来回去资源，总比说到 http://www.example.com/，然后在表单中输入bar，然后点击foo按钮会好一些。
2 在合适的地方（譬如无安全问题、查询、收藏夹）尽量使用GET方式的请求。
3 在需要安全验证如买东西，发表评论的地方使用POST方式。
4 每一次请求都是唯一的，客户端和服务器的状态各自独立，互补依赖，每次需要的信息通过通讯时带上来获取。无状态的服务能够提供cache以及扩展的方便性。
之前搞了一篇dtd中各个元素嵌套说明，后来找到了一个详细的关于dtd的解读，感觉不错，转载之，备查阅。
转载过来的效果不是很好,建议大家查看原文：http://www.cssforest.org/wiki/index.php?n=Cssforest.Xhtmldtd
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.0 Frameset
Tag Index (标签索引)
A
a | abbr | acronym | address | area
B
body | b | br | bdo | big | button | blockquote | base
C
code | cite | caption | colgroup | col
D
dfn | dl | div | dt | dd| del
E
em
F
fieldset | form
H
html ...
之前写html的时候，发现一些block的元素写在inline里面会报错，不合乎xhtml的规范，后来就找到了一篇关于xhtml中dtd说明的关于各种类型元素的嵌套说明，才明白其中的原因。
翻译自：http://www.cs.tut.fi/~jkorpela/html/strict.html
再说明：曾经遇到过title标签中有一些特殊字符如</t>导致title标签在一些浏览器如ie下页面的内容无法渲染，出现一个空的页面。
查看了dtd说明才知道title标签中使用的是#PCDATA类型的内容。#PCDATA要求是需要对html的字符进行转义的，如>需要转义为>
对于阅读dtd的说后说到的#CDATA，这个东东一般而言是任意字符，不过在一些特殊的场合它会有不同的表现，具体可以查看：http://www.flightlab.com/~joe/sgml/cdata.html
关于html中block和inline类型元素的说明：
<!--
HTML has two basic content models:
%inline; character level elements and text strings
%block; block-like elements e.g. paragraphs and lists
-->
HTML
HEAD
TITLE (required)
SCRIPT, STYLE
CDATA
BASE, META, LINK (empty)
OBJECT ...