前面我们已经将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进行重构，重构之前我们至少需要了解学习一下html的语法。打好基础功夫后，我们才能对重构的过程做到可控。
目前通常使用的xhtml的文档格式是什么样的？什么样的文档内容才是符合xhtml规范的机构的？
在不同的浏览器下试试这段html代码，看看它的DOM树是什么样的：
<p>The quick <strong>brown fox</p>
jumped over the
<p>lazy</strong> dog.</p>
不合乎规范的html代码，在不同的浏览器下解析出来的文档结构是不一样的。这对于我们的css和javascript的代码都是极大的挑战。
XHtml的最基本的要求：
1 标签有始要有终。
2 空标签需要遵循空标签的规则.<br />(注意加上空格来兼容一些老的浏览器)或者<br></br>
3 属性都需要有值。如同checked=”checked”
4 注意&以及<以及”、’的转义
5 只能有一个根节点html
6 没有预定义的节点需要在DTD中进行定义
7 Xhtml对标签和属性都要求是小写。
8 属性的值都需要使用单引号或者算引号括起来。(google处于带宽考虑，并不一定这样哦)
9 标签避免彼此交叉。（由于不同的浏览器为此构建的dom树不一样，会导致css和js出现问题的）
10 尽量使用UTF8的编码。通用，大部分浏览器都能识别
11 尽量引入Doctype
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
详细的说明下三种DTD的区别：
三种DTD：frameset, transitional, strict.
1) frameset 允许页面包含frames
2) transitional保留了一些遗留的展现元素，如i、b、u、iframe、applet等
3) strict移出了遗留的展现元素，以及一些可以使用CSS来表达的属性。同时加强了一些元素的内容的描述。
浏览器一般是不会去加载DTD的，他们预先已经知道了这些DTD的，所以这里没有性能上的损失。不过一些XLST的工具回去加载DTD的。
12 尽量加上XHTML的命名空间，一些XLST的工具需要这个。
<html xmlns="http://www.w3.org/1999/xhtml">
意识到重构对于系统效率的重要性，是不是开始想要动手对现有的项目进行一次尝试呢。
呵呵，不要急，重构之前你做好准备了么，譬如说做好现有系统的备份了么，或者说你找到了你现有程序的问题在哪里了么？
下面这些重构中常常会使用到的工具，可能会在重构的过程中帮助我们来节省工作量，做到事半功倍的效果：
1 版本管理的工具，可以做到快速的回滚
2 问题定位工具，能够辅助我们去定位当前系统的问题所在
3 自动化测试的工具，能够辅助我们安全进行重构
我们常常用到的工具有如下这些，你还有其它工具推荐的么:
1 SVN版本管理，随时回滚。如果可以的话，准备一台干净一点预发布机，可以完整模拟运营的环境，便于进行校验。
2 HTML合法性校验工具：http://www.w3.org/QA/Tools/，查找当前系统存在什么问题。
1) http://validator.w3.org/
可以下载到本地的服务器进行安装：http://validator.w3.org/docs/install.html
2) xmllint BBEdit
3 测试工具：（自动化测试）
1) HtmlUnit:http://htmlunit.sourceforge.net/(表现的更像是一个browser)
2) HttpUnit: http://httpunit.sourceforge.net/(相比上一个更底层一些)
3) JwebUnit
4) http://fitnesse.org/
5) Selenium
4 Tidy(将重复的工作交给工具来完成吧) www.w3.org/People/Raggett/tidy/
1) –asxhtml
2) --enclose-text
3) –clean
5 TagSoup
读了一次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以及扩展的方便性。
网站优化之优雅整洁的HTML代码
一个程序员不仅要实现功能，还要做的是写出优雅整洁的代码。这样在自己后来阅读以及交接给别人的时候才能够将工作量降到最小化。
优雅整洁的代码的核心就是------尽量将自己的代码语义化！
1.别忘记头部的声明，它会告诉浏览器如何渲染你的HTML。
2.设置title,字符集.将CSS和JS外链(包括一个打印用的CSS)。
3.给body一个ID。这里作者提到的原因是，为多页面的中容器选择提供便利。比如通过给page1和page2中BODY设置不同的ID，就可以通过#page1 h2和#page2 h2来设置两种不同的效果，我感觉这个到是要看情况和具体架构再具体使用。
4.编写符合语意的菜单代码。
<ul id="menu">
<li><a href=../../"index.php">Home</a></li>
<li><a href=../../"about.php">About</a></li>
<li><a href=../../"contact.php">Contact</a></li>
</ul>
5.要有一个主体DIV包含所有的内容。方便固定主体的宽度,边距等等。
6.先写主要内容,再写次要内容.如果你的导航或者侧边栏不是很重要,最好将他们写在最后。(浏览器会根据先后顺序来渲染DOM)
7.将导航,页尾等公用的部分用动态调用的方式引入,比如PHP的include，web服务器的SSI，这样的话更改一个地方就能更改整个站点，如遇到特殊事件时就能全站方便的变黑等。
8.缩进代码.不要用tab，用4个空格来缩进标签；或者tab需要说明好是几个空格。
9.标签一定要结束
10.在合适的地方使用标题标签,如<h1>~<h6>,来划分段落。
11.最后一点，也是最重要的一点。
不要把样式写在标签上，HTML只是用来表示结构。表现还是交给CSS吧。
[caption id="" align="aligncenter" width="570" caption="html代码规范"][/caption]
后续会再整理一些优雅整洁的css、javascript代码是什么样的。
原文http://css-tricks.com/what-beautiful-html-code-looks-like/
附加：
1.注意标签间的正确嵌套
<a href="test.html"><h1>test</h1></a>标签a是inline的，h1是block的，应该把h1放在外层才对
<h1><a href="test.html>test</a></h1>
2.去掉无用的标签
<div id="nav">
<ul class="nav"><li>test</li></ul>
</div>其中这个div就是多余的了
3.使用合适的DTD，目前div的布局的话建议使用strict的DTD
4.尽量转义html字符，如&，@这样的字符.
如<title>我&你</title>转换成<title>我&你</title>