网页标准学习：关于web标准的思考
时间：2007-02-18 来源：PHP爱好者
我是从去年初开始学习web标准的，两年下来也有些心得。最近跳槽了正好闲在家里，写一些出来和大家交流一下。
1 对于web标准和W3C XHTML规范的理解
按照习惯的理解，这两个概念似乎都是指的一个东西（就是咱们在这个版里讨论的这些个"高深理论“^_^）。但我认为，事实上从技术的角度上讲，这两个事物几乎没有任何相关性。web标准简而言之就是将页面的结构、表现和行为各自独立实现，更通俗的讲就是如今招聘时流行的语言”div+css"。但W3C XHTML的任何一个版本都没有对web标准理念作限制。很显然的，我们可以用xhtml 1.1写出一个table定位的网页。说到这里，或许会认为我讲了一堆废话。但任何一项技术，只有当你对基础概念有足够清晰的认识的时候，你才会正确的使用它。我从下面两个方面，来谈谈如今Web标准应用走向的两个歧途：
第一种情况很简单。自以为只要使用了XHTML+CSS就是Web标准了。页面里面遍地是class和id。肆意的为每个细节都单独定义class。这样的页面和传统的html的区别就是img标签里多了个"/"。事实上这样子还不如回到传统的html，至少我可以轻松的使用font，而不用总是跟查字典一样去查样式表。另一种更隐蔽的随意使用CSS的我在以后讲。
第二种情况我觉得比较难理解一些，即试图用各种纷繁复杂的div嵌套和css语句来实现你所想要的表现。很简单的一个例子就在我刚看到的一个帖子" 不用切图的页面圆角"。首先我想肯定的是这个创意确实很不错，使用CSS功能将圆角“画”出来。为此，设计者必须在相应的位置加上一大段如下的代码：
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
但是，这里严重违反了Web标准的基本概念——结构与表现要分离。因为它将用于控制网页表现的代码放在结构文档中了。或许你会说它事实上还是将真正的表现代码放在CSS里的。但我认为这是一个偷换概念。因为以上这些b标签跟网页结构无关，它们都是一些空标签。也就是说，它的存在并不是为了将某些内容放在文档结构需要的位置。因此它们对于文档结构来说只是一些废代码。
另外一个例子可能更加隐蔽。之前我有在alistapart.com上看到过如何实现网页三通栏的文章，其原理大概就是使用三四个div相互嵌套。我认为这也是一个违反Web标准思想的做法。因为这些div标签在代码中摆放的次序已经不单纯是为了结构的需要，而是用于网页的表现。
当然，我承认，以上的观点在一定程度是钻牛角尖（但反过来说，非要实现非图片圆角不也是在钻牛角尖么，呵呵）。有些时候结构和表现并不是那么轻易的就能分开的，我们为了实现一些丰富的表现不得不让结构去迁就（想想<div style="clear:both" />的用处）。但是知道什么是对什么是错是很重要的。即使我们有时候不得不做一些错事。
最后，我想声明的是，我并不是"非图片圆角"是无意义或是错误的。我也很佩服作者的聪明和灵感。我觉得这样的技术研究就如同以前用CSS画国旗一样，对CSS技术的熟练掌握很有帮助。但是，它的用途也应该仅和CSS国旗一样局限，不应该在实际应用中采纳。因为它违反Web标准的基本原则。
2 HTML标签的语义
如今Web标准都被通俗的叫做“div+css”或者“层布局”。我不反对这种便宜行事的叫法。但是这样会陷入一个误区：即大量的使用div标签作为结构元素。事实上这是一种更高级的div滥用(Jeffrey Zeldman在《网站重构》一书中提到）。
HTML为我们提供了相当丰富的标签，每个标签都有它各自的含义。我认为在设计时，除了遵循HTML语法以外，应该充分利用并遵守各标签的“语义”。如标题文字应该包含在h1-h6中，大段的文字内容应该由<p>进行分段而不是<br />，列表项应该放在ul或ol或dl中，表格形式的数据应该仍然用table布局。
为什么要这样做？一个很有说服力的原因是，保证在用户去掉CSS显示的情况下，网页能够尽量有效的将内容的结构层次显示出来。如果全部用div，当去掉CSS之后，整个网页就失去了层次，只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。
我下面详细的列举一下我对一些标签的语义的理解：
p br
先说个最简单的。分段要用p标签而不是用br（甚至连续两个<br />）。这个似乎不用多说。但是有时候我们不得不放弃这个原则。一个常见的例子是论坛发帖，如果我想分段，便打回车。而如此传输到后台并显示出来的，显然就是用<br />分段的。
table th
由于大力宣扬div+css的结果，似乎现在谁用table布局谁就是未开化的土著。但我认为这种观点是不正确的。table的含义是表格，因此凡是应该以表格形式出现的数据，仍然应该用table布局。简单的例子是班级同学的花名册，包括姓名学号性别等等，这明显是一个表格形式的数据，因此应该用table布局。另一个比较值得探讨的例子是，blog里面的日历导航。我曾经有见过一个blog程序，它的日历导航里的各个日期，从1号到30号全用div套好，再使用float:left样式7个一排的排出当月的日历。当我取消浏览器的CSS显示之后，日历的那部分则从1号到30号一竖排下来。我认为这是不对的。因为日历应该是一个表格形式的数据，因此仍然应该用table布局。当取消css之后，应该仍然按照一排7个的样子归成一个表格。
th则是另一个会被忽视的标签。由于CSS的万能，所有的表格单元都可以用td加一个class属性搞定。但是从语义上讲，一些表格单元应该用th标签。比如上文说到的日历表格，里面的“MON TUE WED... SUN”这些标识星期的单元，就应该用th而不是td。
h1-h6
对于h1-h6标签，从语义上讲，它们应该适用于所有标题文字。因此，一些如<div class="diary-title>的写法都是多余的，直接写成<h1>，然后直接对h1而不是.diary-title定义CSS，不是一样的效果么？当然，这个规矩我也不能定得太死，因为有时候标题部分的结构元素并不能简单的用一个h1就能解决的。但我最多用类似<h1><span></span></h1>的方法将标题的结构嵌套得更复杂，以满足表现的需要。
但这里会出现一个语义上的分歧。h1究竟该理解为一级标题呢还是理解为1号字体大小的标题。我通常理解为一级标题，一级标题下再有小标题就用h2。但是事实上回顾HTML设计之初，h1-h6后面的数字更多的被理解为控制标题文字大小的。用h3或许只是为了使用三号大小的字体，而并非它就是三级标题。否则一级标题全用h1，个个都是斗大的字，又不得不用CSS来控制字号，感觉很累赘。所以，这是一个待商榷的问题。
ul ol
凡是需要罗列条款的，都应该用ul或者ol，而不是用p。比如招聘广告里的职位需求，比如注意事项，比如操作步骤说明。此外一个流行的用法是网页的导航菜单也用ul li来列举，然后再用CSS控制其排列方式。
应该要补充的是，别忘了li里面还可以再用ul或ol，形成第二级列表。
dl dt dd
这是一组几乎被人忘记的标签，但Jeffrey Zeldman在《网站重构》中大力推崇对它们的使用。dl应该是“defining list（或是definition list？有知道的朋友请告诉我）”的全称，一个典型的用法是字典的词条。单词的名字放在dt里面，单词的解释放在dd里面。而alistapart.com网站更加高明的，将右侧栏整个定义为dl，每个单元的标题用dt，而该单元的内容则用dd。
img
img标签本身也没啥好说的。只是想老生常谈一个，即只有当确实这个元素是内容里必须的图片的时候才使用img，否则应该用CSS定义为样式。如插图，头像，表情图标，这些是内容里必须出现的图片，用img。而其他的比如标题的背景图，列表项前面的小icon，这些都不应该用img标签。
span
span如今大有和div并驾齐驱的风头。但是事实上我认为我们还是应该遵从它最初的使用。我个人的理解，span最初就是用来带class或者style属性的。它本身不具有明确的语义。因此在文本流中，我们需要对某些文字做样式上的改变，就用span括起来。比如有些字需要加红，我就用<span class="red">。
但是值得注意的是，这样又有可能犯之前h1里面提到的问题。因为有些文字的样式其实是有现成的标签的，比如<strong>、<sub>等，我们也应该适当的给它们一些机会。
a
a是控制超连接的标签。但有些特殊的情况，我们不一定喜欢用它。比如需要弹出一个小窗口。我没怎么留心，但我想有些设计师会将onclick直接定义到“播放”小图标的<img>标签里。我个人认为还是应该在img外面加一个a，然后将onclick定义到a里面，并记住在js函数最后写上return false。如果可以，该a标签的href属性也应该写上弹出窗口的URL,保证用户在禁止JS的情况下仍能够有效的打开页面。
我暂时就列出这么多。
最后再总结一下遵循HTML标签语义的重要性。Web标准的其中一个要求是低配置的兼容性：当用户禁用图片、禁用CSS或禁用JS的时候，我们仍能够让他有效的浏览网页内容。众所周知强制alt属性就是为禁用图片时的兼容性作考虑。而正确的遵循HTML标签的语义，则是保证禁用CSS时的兼容性。只有当正确使用了HTML标签，我们的网页在“CSS裸奔”的时候，才会仍然让人看得出哪里是导航菜单，哪里是文章标题，日历表格也不会分崩离析。
1 对于web标准和W3C XHTML规范的理解
按照习惯的理解，这两个概念似乎都是指的一个东西（就是咱们在这个版里讨论的这些个"高深理论“^_^）。但我认为，事实上从技术的角度上讲，这两个事物几乎没有任何相关性。web标准简而言之就是将页面的结构、表现和行为各自独立实现，更通俗的讲就是如今招聘时流行的语言”div+css"。但W3C XHTML的任何一个版本都没有对web标准理念作限制。很显然的，我们可以用xhtml 1.1写出一个table定位的网页。说到这里，或许会认为我讲了一堆废话。但任何一项技术，只有当你对基础概念有足够清晰的认识的时候，你才会正确的使用它。我从下面两个方面，来谈谈如今Web标准应用走向的两个歧途：
第一种情况很简单。自以为只要使用了XHTML+CSS就是Web标准了。页面里面遍地是class和id。肆意的为每个细节都单独定义class。这样的页面和传统的html的区别就是img标签里多了个"/"。事实上这样子还不如回到传统的html，至少我可以轻松的使用font，而不用总是跟查字典一样去查样式表。另一种更隐蔽的随意使用CSS的我在以后讲。
第二种情况我觉得比较难理解一些，即试图用各种纷繁复杂的div嵌套和css语句来实现你所想要的表现。很简单的一个例子就在我刚看到的一个帖子" 不用切图的页面圆角"。首先我想肯定的是这个创意确实很不错，使用CSS功能将圆角“画”出来。为此，设计者必须在相应的位置加上一大段如下的代码：
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
但是，这里严重违反了Web标准的基本概念——结构与表现要分离。因为它将用于控制网页表现的代码放在结构文档中了。或许你会说它事实上还是将真正的表现代码放在CSS里的。但我认为这是一个偷换概念。因为以上这些b标签跟网页结构无关，它们都是一些空标签。也就是说，它的存在并不是为了将某些内容放在文档结构需要的位置。因此它们对于文档结构来说只是一些废代码。
另外一个例子可能更加隐蔽。之前我有在alistapart.com上看到过如何实现网页三通栏的文章，其原理大概就是使用三四个div相互嵌套。我认为这也是一个违反Web标准思想的做法。因为这些div标签在代码中摆放的次序已经不单纯是为了结构的需要，而是用于网页的表现。
当然，我承认，以上的观点在一定程度是钻牛角尖（但反过来说，非要实现非图片圆角不也是在钻牛角尖么，呵呵）。有些时候结构和表现并不是那么轻易的就能分开的，我们为了实现一些丰富的表现不得不让结构去迁就（想想<div style="clear:both" />的用处）。但是知道什么是对什么是错是很重要的。即使我们有时候不得不做一些错事。
最后，我想声明的是，我并不是"非图片圆角"是无意义或是错误的。我也很佩服作者的聪明和灵感。我觉得这样的技术研究就如同以前用CSS画国旗一样，对CSS技术的熟练掌握很有帮助。但是，它的用途也应该仅和CSS国旗一样局限，不应该在实际应用中采纳。因为它违反Web标准的基本原则。
2 HTML标签的语义
如今Web标准都被通俗的叫做“div+css”或者“层布局”。我不反对这种便宜行事的叫法。但是这样会陷入一个误区：即大量的使用div标签作为结构元素。事实上这是一种更高级的div滥用(Jeffrey Zeldman在《网站重构》一书中提到）。
HTML为我们提供了相当丰富的标签，每个标签都有它各自的含义。我认为在设计时，除了遵循HTML语法以外，应该充分利用并遵守各标签的“语义”。如标题文字应该包含在h1-h6中，大段的文字内容应该由<p>进行分段而不是<br />，列表项应该放在ul或ol或dl中，表格形式的数据应该仍然用table布局。
为什么要这样做？一个很有说服力的原因是，保证在用户去掉CSS显示的情况下，网页能够尽量有效的将内容的结构层次显示出来。如果全部用div，当去掉CSS之后，整个网页就失去了层次，只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。
我下面详细的列举一下我对一些标签的语义的理解：
p br
先说个最简单的。分段要用p标签而不是用br（甚至连续两个<br />）。这个似乎不用多说。但是有时候我们不得不放弃这个原则。一个常见的例子是论坛发帖，如果我想分段，便打回车。而如此传输到后台并显示出来的，显然就是用<br />分段的。
table th
由于大力宣扬div+css的结果，似乎现在谁用table布局谁就是未开化的土著。但我认为这种观点是不正确的。table的含义是表格，因此凡是应该以表格形式出现的数据，仍然应该用table布局。简单的例子是班级同学的花名册，包括姓名学号性别等等，这明显是一个表格形式的数据，因此应该用table布局。另一个比较值得探讨的例子是，blog里面的日历导航。我曾经有见过一个blog程序，它的日历导航里的各个日期，从1号到30号全用div套好，再使用float:left样式7个一排的排出当月的日历。当我取消浏览器的CSS显示之后，日历的那部分则从1号到30号一竖排下来。我认为这是不对的。因为日历应该是一个表格形式的数据，因此仍然应该用table布局。当取消css之后，应该仍然按照一排7个的样子归成一个表格。
th则是另一个会被忽视的标签。由于CSS的万能，所有的表格单元都可以用td加一个class属性搞定。但是从语义上讲，一些表格单元应该用th标签。比如上文说到的日历表格，里面的“MON TUE WED... SUN”这些标识星期的单元，就应该用th而不是td。
h1-h6
对于h1-h6标签，从语义上讲，它们应该适用于所有标题文字。因此，一些如<div class="diary-title>的写法都是多余的，直接写成<h1>，然后直接对h1而不是.diary-title定义CSS，不是一样的效果么？当然，这个规矩我也不能定得太死，因为有时候标题部分的结构元素并不能简单的用一个h1就能解决的。但我最多用类似<h1><span></span></h1>的方法将标题的结构嵌套得更复杂，以满足表现的需要。
但这里会出现一个语义上的分歧。h1究竟该理解为一级标题呢还是理解为1号字体大小的标题。我通常理解为一级标题，一级标题下再有小标题就用h2。但是事实上回顾HTML设计之初，h1-h6后面的数字更多的被理解为控制标题文字大小的。用h3或许只是为了使用三号大小的字体，而并非它就是三级标题。否则一级标题全用h1，个个都是斗大的字，又不得不用CSS来控制字号，感觉很累赘。所以，这是一个待商榷的问题。
ul ol
凡是需要罗列条款的，都应该用ul或者ol，而不是用p。比如招聘广告里的职位需求，比如注意事项，比如操作步骤说明。此外一个流行的用法是网页的导航菜单也用ul li来列举，然后再用CSS控制其排列方式。
应该要补充的是，别忘了li里面还可以再用ul或ol，形成第二级列表。
dl dt dd
这是一组几乎被人忘记的标签，但Jeffrey Zeldman在《网站重构》中大力推崇对它们的使用。dl应该是“defining list（或是definition list？有知道的朋友请告诉我）”的全称，一个典型的用法是字典的词条。单词的名字放在dt里面，单词的解释放在dd里面。而alistapart.com网站更加高明的，将右侧栏整个定义为dl，每个单元的标题用dt，而该单元的内容则用dd。
img
img标签本身也没啥好说的。只是想老生常谈一个，即只有当确实这个元素是内容里必须的图片的时候才使用img，否则应该用CSS定义为样式。如插图，头像，表情图标，这些是内容里必须出现的图片，用img。而其他的比如标题的背景图，列表项前面的小icon，这些都不应该用img标签。
span
span如今大有和div并驾齐驱的风头。但是事实上我认为我们还是应该遵从它最初的使用。我个人的理解，span最初就是用来带class或者style属性的。它本身不具有明确的语义。因此在文本流中，我们需要对某些文字做样式上的改变，就用span括起来。比如有些字需要加红，我就用<span class="red">。
但是值得注意的是，这样又有可能犯之前h1里面提到的问题。因为有些文字的样式其实是有现成的标签的，比如<strong>、<sub>等，我们也应该适当的给它们一些机会。
a
a是控制超连接的标签。但有些特殊的情况，我们不一定喜欢用它。比如需要弹出一个小窗口。我没怎么留心，但我想有些设计师会将onclick直接定义到“播放”小图标的<img>标签里。我个人认为还是应该在img外面加一个a，然后将onclick定义到a里面，并记住在js函数最后写上return false。如果可以，该a标签的href属性也应该写上弹出窗口的URL,保证用户在禁止JS的情况下仍能够有效的打开页面。
我暂时就列出这么多。
最后再总结一下遵循HTML标签语义的重要性。Web标准的其中一个要求是低配置的兼容性：当用户禁用图片、禁用CSS或禁用JS的时候，我们仍能够让他有效的浏览网页内容。众所周知强制alt属性就是为禁用图片时的兼容性作考虑。而正确的遵循HTML标签的语义，则是保证禁用CSS时的兼容性。只有当正确使用了HTML标签，我们的网页在“CSS裸奔”的时候，才会仍然让人看得出哪里是导航菜单，哪里是文章标题，日历表格也不会分崩离析。
相关阅读 更多 +
