内容简介
        本书采用理论与实践相结合的方式，展示了如何重构HTML，以获得更佳的可靠性、性能、可用性、安全性、可访问性、兼容性，甚至实现良好的搜索引擎优化。书中详细介绍了如何辨别应该重构的Web代码中的“坏味道”，如何把旧的HTML转换为良构和有效的XHTML，如何使用CSS改善现有的布局，如何通过用GET替换POST、替换旧的联系表单和重构JavaScfipt来更新Web应用程序，如何系统地重构内容和链接，如何在不改变用户所依赖的URL的前提下重建网站。
        本书适合Web设计人员、开发人员、项目经理和需要维护或更新既有网站的人使用。

目录

第1章　重构

        简明概要的说，重构是在不改变程序行为的基础上进行的小改动，是代码基逐渐改善的过程，通常也需依赖于一些自动化工具的帮助。重构的目标是移除长年累月积聚下来的烂码，以得到更清晰和更容易维护、除错及新添加功能的代码。
        重构的原因：1、初始设计者未曾想到的细节逐渐暴露；2、增加新功能。

1.1　为何重构
1.1.1　坏味道：难以辨认的代码
1.1.2　坏味道：CE0根本搞不定他的旅行费用报销单
        网站需要更好的可用性。
1.1.3　坏味道：缓慢的页面呈现速度
1.1.4　坏味道：不同的浏览器，不同的呈现
1.1.5　坏味道：网页需要危险或者非标准技术的支持
1.1.6　坏味道：公司主页突然显示“Pwned by Elite Doodz”
    黑客入侵，例如直接对设计有漏洞的表单处理脚本实施代码注入攻击。
1.1.7　坏味道：在Google搜索结果中首次排在17页之后
1.1.8　坏味道：访问者致信投诉网站失灵

1.2　何时重构
        无论做什么，都不要因追求完美而忽视小的改进（勿以善小而不为），如果眼下的时间足够做一点儿重构，那就只做一点儿，以后有时间可以做得更多。整体性的重新设计虽然惹人注目令人难忘，但不积跬步又何以至千里？

1.3　重构什么
1.3.1 为何要用XHTML
        XHTML只不过XML化的HTML。但XHTML非常严格。诸如漏掉引号或忽略结束标签这些细微的错误，在HTML中浏览器会默默补上，但在XHTML中就会成为严重的四级警报。这样就简化了浏览器对XHTML的处理。

1.3.2　为何要用CSS
        把表现从内容中分离出来是HTML的基本设计原则。

1.3.3 为何要用REST
        REST(Representational State Transfer，表述性状态转移)，它是HTTP的架构。

1.4　反对重构的理由

第2章　工具

2.1 备份、测试用机和源码控制
        重构至少需要5个步骤：
1、确定问题。
2、修复问题。
3、检查已修复的问题。
4、确保没有引入新问题。
5、部署解决方案。

2.2　验证器
2.2.1  W3C标记验证服务
2.2.2  日志验证程序
2.2.3  xmllint
2.2.4  编辑器

2.3　测试
2.3.1    JUnit
2.3.2　HtmlUnit
2.3.3　HttpUnit
2.3.4　JWebUIlit
2.3.5　FitNesse
2.3.6    Selenium
2.3.7　测试入门

2.4　正则表达式
2.4.1　搜索
2.4.2　搜索模式

2.5     Tidy
2.5.1    -asxhtml
2.5.2    -clean
2.5.3　编码
2.5.4　整洁的格式
2.5.5　生成的代码
2.5.6　当做库来用

2.6    TagSoup

2.7    XSLT

第3章 良构
        良构是强大XML工具链条中的基础性环节。良构保证了DOM可操作的文档树结构的唯一性，因而成为可靠的跨浏览器的JavaScript代码的基础。

3.1　什么是良构

3.2　将名称改为小写
        在XHTML模式中，小写是必要条件。
<table></table>

3.3　给属性值加引号
        在XHTML中，所有的属性值，即使没有空格，也都要加上引号。
<div id="speech1">...</div>

3.4　补足遗漏的属性值
        为所有不带属性值的属性加上属性值。XHTML不支持只有属性名称而没有值的语法。
<input type="radio" name="p" value="debit" checked></input>  改为
<input type="radio" name="p" value="debit" checked="checked"></input>

3.5  将空标签替换为空元素标签
        XML解析器要求所有的起始标签都有匹配的结束标签。
<br> 改为 <br class="empty" />  在最后一个斜线之前加上属性或者空格能达到最大的兼容性。
   
3.6  添加结束标签
        关闭所有的段落、清单项目、表格单元格和其他非空的元素。

3.7  消除重叠
        在父级元素上关闭每一个子元素。

3.8  把文本转换为 UTF-8
        UTF-8是一个标准的编码，可运作在所有浏览器上，被主流的文本编辑器和工具支持，它相当快速、小巧和高效。它支持所有的Unicode字符，也是页面国际化和本地化的坚实基础。

3.9  转移小于号
        把 < 转义为 &lt; 。

3.10  转义 & 号
        把 & 转义为 &amp; 。

3.11  转义属性值中的引号
        把 " 转义为 &quot; 或把 ' 转义为 &apos; 。

3.12  加入XHTML DOCTYPE声明

3.13  结束每一个实体引用
        把 &copy 改为 &copy;

3.14  替换虚构的实体引用
        确保文档中用到的实体引用都是有定义的。

3.15  加入根元素
        确保每一个文档都有html根元素。

3.16  加入XHTML命名空间
   

第4章　有效性

        有效性比良构稍微严格，即不仅要确保文档的语法正确，还要保证语义正确。它保证只有HTML规范中定义的元素和属性会出现，这样就不会出乎浏览器的意料。它还保证了元素和属性值能按自身语义出现在恰当的地方。

4.1  加入过渡型DOCTYPE声明
        过渡型DTD让你不必完全语义化标记就能让文档通过验证。它允许文档包含诸如i、b和center等这些不推荐使用的表现性元素。
        使用时需要特别注意的是IE浏览器中会产生一些使用特定技巧的偏差。

4.2  删除所有不该存在的标签
        消灭所有异数（即HTML规范不允许或浏览器私有的扩展元素）。

4.3  添加alt属性
        1、帮助视力受损的用户、或者声音浏览器。
        2、搜索引擎优化，尤其是图片搜索，过分关注alt属性的文本。

4.4  用 object 替代 embed
        object元素可以被更好的文档化，现代浏览器的支持更一致。
当然对于旧浏览器，可以在 object元素内加入 embed元素。
 
4.5  加入严格型的 DOCTYPE声明

4.6  用 CSS替代center
        把所有的center元素转化为div或者相应的语义元素，然后再使用CSS的text-align属性实现居中。

4.7  用 CSS替代font

4.8  用 em或 CSS替代 i

4.9  用 strong 或者 CSS替换 b

4.10  用 CSS替换各种颜色属性

4.11  把 img元素的属性转换为 CSS属性

4.12  用 object替代 applet

4.13  用 CSS替换表现性元素

4.14  把行内(Inline)元素放到块(block)元素中

第5章　布局

        在现代浏览器中，CSS对页面的外观提供更强有力的控制。创建现代网页需要使用与CSS清晰分离的XHTML，不需在使用表格型布局和font标签等表现性元素。

5.1  替换表格布局
        把所有的表格布局都删除，代之以线性化内容的div元素。然后使用CSS样式表按你想要的形式定位div。

5.2  使用CSS定位替代框架
        把框架转化为单一页面。

5.3  把内容放到最前面
        在顺序读取原始HTML源码时，主要内容应该放到最前面。侧栏、页头、页脚和导航栏等部分应该跟在内容之后。

5.4  正确标记列表

5.5  用CSS替代 blockquote/ul 的缩进
        blockquote应该应用于引用上，而ul应该用户列表中。

5.6  替换占位图片
        把所有占位图片都删除，必要时使用 CSS的margin、padding、position和 indent属性来呈现这些效果。

5.7  添加 id属性
        为每个元素添加 id属性，以便可快速定位。

5.8  为图片添加 width和 height属性
      width和 height属性能让浏览器更快地样式化页面并展示给用户。
 

第6章　可访问性

        只要让 XHTML文档有效，就能在很大程序上提高可访问性，由过渡型向严格型转变又提升了一层。使用 CSS样式表分离内容和表现对可访问性也有很大的帮助。

6.1  把图片转换为文本
        使用图片本身包含的文本取代图片，然后使用标记和CSS规则模拟相关的样式。

6.2  为表单输入框添加标签
        对于非隐藏的input、textarea、select等表单元素，确保他们都有相应的标签。
Red-necked Grebe
<input name="rng" type="checkbox" />  转换为

<label>Red-necked Grebe
<input name="rng" type="checkbox" />
</label>

6.3  使用标准的字段名称
        重写表单和处理表单的脚本，为如电子邮件地址、信用卡和电话号码等使用惯用的名称。
浏览器自动填写，这对于那些讨厌把时间浪费在重复输入内容的人有很大帮助。

6.4  开启自动完成
        在适当情况下把 autocomplete="off" 删除。

6.5  为表单添加 Tab索引
        为每一个可编辑的、非隐藏的表单字段添加 tabindex属性。

6.6  加入“跳过”机制
        在每个页面的开头放置一个“不可见”的链接，它可以直接跳到页面的主要内容上。

6.7  添加页面标题
        对于比较长的网页，在合适的位置放置 h1~h6元素。

6.8  把链接和标题里重要的内容放到前面

6.9  加大输入框
        保证所有表单都有足够的空间，让用户更容易填写所有必要的字段。

6.10  加入表格描述
        为每个表格添加caption元素和或summary属性，给每一行或每一列的标签使用 th元素。
为视觉和非视觉用户提供帮助。

6.11  加入acronym元素

6.12  加入lang属性
        为每个根元素添加 lang和 xml:lang属性，用于指出文档使用的主要语言。

第7章　Web应用程序

7.1  用POST替换不安全的GET

7.2  用GET替换安全的POST

7.3  重定向 POST为 GET

7.4  启用缓存

7.5  阻止缓存

7.6  使用 ETag
        ETag让客户端能够不下载整个页面就能迅速检查页面是否有变化，从而节省了服务器和客户端的带宽并加速了页面的载入时间。

7.7  用 HTML替换 Falsh
        把 Flash网站专为HTML，为所有的 Flsah内容提供一个纯HTML的版本。

7.8  增加 Web Froms 2.0的类型
        注：不是所有浏览器都支持。

7.9  用 mailto 链接取代联系表单
        电子邮件程序给用户提供了更强和更舒适的编辑和归档功能。

7.10  封闭机器人
        在希望封闭机器人的目录中加上 robots.txt文件，安装一个蜜罐程序来检测和封闭不礼貌的机器人和歹毒爬虫。

7.11  转义用户的输入
        为所有用户的输入提供转义。

第8章　内容

8.1  修正拼写

8.2  修复坏链接

8.3  删除入口页面
        把内容放到首页上。

8.4  隐藏电子邮件地址
        公布在 Web页面上的电子邮件地址应该进行编码，放置垃圾信息机器人的采集。

附录A　正则表达式