如今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。
最后再总结一下遵循HTML标签语义的重要性。WEB标准的其中一个要求是低配置的兼容性:当用户禁用图片、禁用CSS或禁用JS的时候,我们仍能够让他有效的浏览网页内容。众所周知强制ALT属性就是为禁用图片时的兼容性作考虑。而正确的遵循HTML标签的语义,则是保证禁用CSS时的兼容性。
本集视频讲解要点
1.CSS的继承特性;
2.CSS的层叠特性;
《浅谈CSS和XHTML及Web标准(下)》配套视频教程下载
千脑下载:浅谈CSS和XHTML及Web标准【下】
Ziddu下载:浅谈CSS和XHTML及Web标准【下】