《重构HTML改善Web应用的设计》读书笔记
下面是读书笔记，若有错误或不足，欢迎指出。一起交流，共同进步：http://www.cnblogs.com/chemandy/
---------------------------------------------------------------------------------------
一、良构
1. 名称改小写：所有元素和属性的名称都要小写，大部分的实体名称也要小写，当然涉及大写字母的除外。
2. 给属性加引号：为所有属性值都加上引号。
3. 补足遗漏的属性值：为所有不带属性值的属性加上属性值。
4. 将控标签替换为空元素标签：将如<br>这样的元素替换为<br class="empty" />。
5. 添加结束标签：关闭所有的段落、清单项目、表格单元格和其他非空的元素。
6. 消除重叠：在父级元素上关闭每一个子元素。
7. 把文本转换为utf-8：把所有的文本重新编码为Unicode UTF-8。
8. 转义小于号：把<转义为 < 。
9. 转义&号：把&转义为 & 。
10. 转义属性值中的引号：在属性值中把 " 转义为 " 或把 ' 转义为 ' 。
11. 加入XHTML DOCTYPE声明
12. 结束每一个实体引用：在每一个实体引用后加上分号。
13. 替换虚构的实体引用：确保文档中用到的尸体引用都是由定义的。
14. 加入跟元素html：确保每一个文档都有一个html根元素。
15. 加入XHTML命名空间：为每一个html元素加 xmlns="http://www.w
---------------------------------------------------------------------------------------
二、有效性
1. 加入过渡性DOCTYPE声明：在每一个文档的开头都插入XHTML过渡性DOCTYPE声明。
2. 删除所有不该存在的标签：消灭所有异数。
3. 给img添加alt属性：给没有alt属性的img标签上一个。
4. 用object替代embed：把所有的embed元素更换为object元素。
5. 加入严格型DOCTYPE声明：在每一个文档的开头都插入XHTML严格型DOCTYPE声明。
6. 用css替代center：把所有center元素转化为div或相应的语义元素，然后在使用CSS的text-align属性实现居中。
7. 用css替代font：把所有的font元素改为div、span或其他相应语义的元素，然后应用css的font属性实现呈现效果。
8. 用em或css替代i：把所有i元素转换为em、span或相应的语义化元素。
9. 用strong或者css替代b：把所有的b元素转换为strong元素或span元素。
10. 用css替换各种颜色属性：把所有HTML文档中的颜色的描述移入CSS样式表中。
11. 把img元素的属性转换为css属性：把img元素中的align、border、hspace和vspace属性都删掉，并用css规则取而代之。
12. 用object替代applet：把所有applet元素改为object元素。
13. 用css替换表现性元素：删除所有的big、small、strike、s、tt和u等表现性元素，并插入相应的CSS或语义元素。
14. 把行内（lnline）元素放到块（block）元素中：给所有的行内元素加上块级的父元素，并在段落中删除所有的块级元素。
---------------------------------------------------------------------------------------
三、布局
1. 替换表格布局：把所有的表格布局都删除，代之以线性化内容的div元素。然后使用css样式表按你想要的形式地位div。
2. 使用css定位替代框架：把框架转化为单一页面。
3. 把内容放到最前面：在顺序读取原始HTML源码时，主要内容应该放到最前面。侧栏、页头、页脚和导航栏等部分应该跟在内容之后。
4. 正确标记列表：列表需要用ul元素来标记，或者有些情况下使用dl或ol元素来标记。
5. 用css替换blockquote/ul的缩进：对于知识为了缩进效果才使用blockquote或ul元素，把它们转为div，然后使用css的margin-left或margin-right属性进行缩进你操作。
6. 替换占位图片：把所有用于占位的GIF都删除。必要时使用CSS的margin、padding、和indent属性来复现这些效果。
7. 添加id属性：为每一个元素赋予唯一的id，以便可以快速定位。
8. 为图片添加width和height属性：为所有没有width和height属性的img元素添加这两个属性。
---------------------------------------------------------------------------------------
四、可访问性
1. 把图片转换为文本：使用图片本身包含的文本取代图片，然后使用标记和css规则模拟相关的样式。
2. 为表单输入框添加标签label：对于非隐藏的input, textarea, select等表单元素，确保他们都有相应的标签。
3. 使用标准的字段名称：重写表单和处理表单的脚本，为如电子邮件地址、信用卡号和电话号码等使用惯用的名称。
4. 开启自动完成（表单）：在适当的情况下吧autocomplete="off"删除。
5. 为表单添加Tab索引，支持tabindex属性的7个元素：a, area, button, input, object, select, textarea：为每一个可编辑的、非隐藏的表单字段添加tabindex属性。
6. 加入“跳过”机制：为每个页面开头放一个“不可见”链接，直接跳到页面主要内容上
7. 添加内部标题：对于比较长的网页，在合适的位置放置h1~h6元素
8. 把链接和标题里重要的内容放到前面：在每个标题和链接里，吧最重要的、最突出的内容放在前面。
9. 加大输入框：保证所有的表单有足够的空间，让用户更容易填写所有必需的字段。
10. 加入表格描述：为每个表格添加caption元素和/或summary属性。给每一行或每一列的标签使用th元素。
11. 加入acronym元素：给缩写词（abbreviation）和字首组合词（acronym）分别包一层abbr和acronym标签。
12. 加入lang属性：给每个根元素添加lang和xml:lang属性，用于指出文档使用的主要语言。在用其他语言编写的文档中的任何元素，也应该添加值为股改语言的lang和xml:lang属性。
---------------------------------------------------------------------------------------
五、Web应用程序
1. 用POST替换不安全的GET：重新设计那些不安全的操作，让他们能够通过POST而不是GET来处理数据。
2. 用GET替换安全的POST：重新设计那些安全的操作，通过GET而不是POST来访问数据。
3. 重定向POST为GET：把响应POST的脚本重新设计为重定向到浏览器，而不是直接执行结果。
4. 启用缓存：启用缓存控制头，可以在恰当的时候缓存动态生成的页面。
5. 阻止缓存：应用缓存控制头，让那些迅速变化的页面总是可以从服务器载入最新的版本。
6. 使用ETag：为Web应用程序生成的半静态页面提供Etag。
7. 用HTML替换FLASH：把Flash网站转为HTML，为所有的Flash内容提供一个纯的版本。
8. 增加Web Forms 2.0类型：为表单的文本输入添加属性type="email | url | date | time | datetime | localdatetime | month | week | number"，识别预期的数据类型。
9. 用mailto链接取代联系表单：把联系表单改为实在的mailto链接。
10. 封禁机器人：在希望封禁机器人的目录中加上robots.txt文件，安装一个蜜罐程序来检测和封禁不礼貌的机器人和歹毒的爬虫。
11. 转义用户的输入：把所有用户提供的数据进行转义。
---------------------------------------------------------------------------------------
六、内容
1. 修正拼写：使用拼写检查其检查所有的文本。
2. 修复坏链接：尽可能修复所有坏链接，修复不了的就删除掉。
3. 移动页面：重新组织URL的结构，对开发者、访问者和搜索引擎更透明，但要保证旧的URL能够继续工作。
4. 删除入口页面：把内容放到首页上。
5. 隐藏电子邮件地址：公布在Web页面上的电子邮件地址应该进行编码，防止垃圾信息机器人的采集。
相关推荐
读书笔记--Head First Html与Css 目录
1、
时间：2024-05-02 09:35
