|
|
上文书我们说到《HTML重构：战略篇》，书接前言下面是战术篇，我们通过路线图来先有一个大体印象：
1、HTML规范化(Well-Formedness)：语法正确
2、HTML Validity ：语义正确
3、不仅仅是语义正确：HTML元素的用法回归正途
4、正确还不够：关注你的内容
5、哪有个完啊：关注网站可用性(Accessibility)
HTML规范化(Well-Formedness)：语法正确
规范化(Well-Formedness)是XML中的概念，它指文档严格遵守约束。规范化的HTML文档结构是一个独一无二的树。HTML规范化是发挥XML工具强大功能的先决条件，可靠地DOM操作也为跨浏览器脚本的提供了一个很好的基础。不规范的页面在浏览器中可能表现千差万别，因为浏览器对错误的理解和处理是不一样的，而规范化的HTML让浏览器行为可预测。好处当然还有很多，比如SEO，快速加载… ...
下面会有一些规范化的实践指南，作者给出了做这些重构的动机和利弊，大家可以根据自己的情况来选择。下面简单列一下：
文档转为小写Change Name to Lowercase
属性赋值添加引号Quote Attribute Value
省略值不全Fill In Omitted Attribute Value
例如：<input type="radio" value="debit" checked></input>
空标签添加空属性Replace Empty Tag with Empty-Element Tag
例如：<hr>变成<hr class='empty' />
添加结束标签Add End-tag
删除重叠Remove Overlap
例如：<strong><em>very important</strong></em>!
文档编码转成UTF-8Convert Text to UTF-8<转义为 < ;Escape Less-Than Sign& to &Escape AmpersandEscape Quotation Marks in Attribute Values
属性值内字符转义：" to " ' to '
添加DOCTYPE声明Introduce an XHTML DOCTYPE Declaration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
实体添加结束符Terminate Each Entity Reference&之类的实体要不全; 即：&
使用标准实体名Replace Imaginary Entity References添加根元素Introduce a Root Element添加XHTML的名称空间Introduce the XHTML Namespace
HTML Validity ：语义正确
背景介绍：HTML验证是通过与标准HTML规则进行比较的方式，分析HTML文档、标记出错误和非标准代码的处理过程。Web页面使用HTML进行渲染，而HTML本身采用了HTML规范作为其规则和标准。通过验证HTML代码穿越多重浏览器标准！
通过验证的文档，能够帮助浏览器反映创作者的意图。通过验证的站点会获得下列优势：页面行为可预测，浏览器兼容问题，未来的浏览器上也可以运行，更容易维护，等等…
W3C在线验证地址：http://jigsaw.w3.org/css-validator/
通过验证并不是强制要求的，一个规范化但是没有通过验证的文档照样可以使用XML工具。如果你有特殊的应用比如MathXML，也可以忽略掉通过HTML验证。下面简单列出一些要通过验证要做的工作：
清除非法标签Remove All Nonexistent Tags
添加图像说明Add an alt Attribute
嵌入标签换成对象标签Replace embed with object
添加严格的文档类型声明Introduce a Strict DOCTYPE Declaration
Replace center with CSS
Replace font with CSS
Replace i with em or CSS
Replace b with strong or CSS
Replace the color Attribute with CSS
Convert img Attributes to CSS
Replace applet with object
Replace Presentational Elements with CSS
Nest Inline Elements inside Block Elements
不仅仅是语义正确：HTML元素的用法回归正途
一个Web开发者可能会有这样的忏悔：我错了，我一直都在用表格做布局，我的页面和样式杂糅在一起… …我们可能把原因归结为历史，以前的开发就没有这种理念，历史是这样的么？传统的HTML是基于SGML标准，这个标准诞生于Web之前，我们回顾一下：
SGML是1986年出版发布的一个信息管理方面的国际标准(ISO 8879)。该标准定义独立于平台和应用的文本文档的格式、索引和链接信息，为用户提供一种类似于语法的机制，用来定义文档的结构和指示文档结构的标签。其中Markup的含义是指插入到文档中的标记。标记分为两种：一种称为procedard markup，用来描述文档显示的样式；另一种称为descriptive markup，用来描述文档中的文字的用途。制定SGML的基本思想是把文档的内容与样式分开。
回顾历史我们应该像佟掌柜一样感慨了：“我错了，我真的错了”
如何将文档的内容和样式分开？作者同样给出了一些建议：
Replace Table Layouts
Replace Frames with CSS Positions
Move Content to the Front
Mark Up Lists as Lists
Replace blockquote/ul Indentation with CSS
Replace Spacer GIFs
Add an ID Attribute
Add Width and Height to an Image
正确还不够：关注你的内容
一个网站无论如何专业，而用户关注的是网站提供的内容，内容重于形式。纠正拼写错误Correct Spelling修复死链Repair Broken Links 纠正拼写错误，中文网站中也是存在这个问题的，
比如错别字
稳定你的链接Move a Page
去掉欢迎页面Remove the Entry Page
隐藏Email地址防止Email爬虫Hide E-mail Addresses
<a href="elharo@metalab.unc.edu">E-mail Elliotte Harold<a/>
elharo@macfaq.com 转换成：<a href="mailto: elharo%40metalab%2Eunc%2Eedu">E-mail Elliotte Harold</a> elharo@macfaq.Com
哪有个完啊：关注网站可用性(Accessibility)
电影《追捕》最后真由美问杜秋：“完了吧”，杜秋黯然：“哪有个完啊”
HTML重构也要精益求精，规范的文档丰富的内容还不够，下面的话题就是网站可用性。网站可用性可以争论的东西很多，网站可用性方面的专著很多，这里只是冰山上的一点冰屑而已：
图片上包含文字信息就使用文本Convert Images to Text
添加字段说明Add Labels to Form Input
字段命名标准化而不是Input1 Introduce Standard Field Names
打开文本框的自动完成Turn on Autocomplete
添加Tab顺序 Add Tab Indexes to Forms
添加同一页面的跳转链接Introduce Skip Navigation
使用H标签做头信息Add Internal Headings
独一无二的内容尽量提前Move Unique Content to the Front of Links and Headlines
输入框大一点Make the Input Field Bigger
添加表格说明Introduce Table Descriptions
添加缩略词说明Introduce Acronym Elements
添加语言属性Introduce lang Attributes
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
NET技术：HTML重构：战术篇，转载需保留来源！
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
