======================================================
注：本文源代码点此下载
======================================================
下面是读书笔记,若有错误或不足,欢迎指出。一起交流,共同进步:http://www.cnblogs.com/chemandy/
---------------------------------------------------------------------------------------
一、良构
1. 名称改小写:所有元素和属性的名称都要小写,大部分的实体名称也要小写,当然涉及大写字母的除外。
2. 给属性加引号:为所有属性值都加上引号。
3. 补足遗漏的属性值:为所有不带属性值的属性加上属性值。
4. 将控标签替换为空元素标签:将如
这样的元素替换为
。
5. 添加结束标签:关闭所有的段落、清单项目、表格单元格和其他非空的元素。
6. 消除重叠:在父级元素上关闭每一个子元素。
7. 把文本转换为utf-8:把所有的文本重新编码为unicode utf-8。
8. 转义小于号:把http://www.w3.org/1999/xhtml" 属性。
---------------------------------------------------------------------------------------
二、有效性
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页面上的电子邮件地址应该进行编码,防止垃圾信息机器人的采集。
======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/
扫一扫
1158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
