您当前的位置是:首页 >> 网页设计 >> div+css的初学者应该理解HTML的语义

div+css的初学者应该理解HTML的语义

     现在网页设计的标准一般都被叫做“div+css”或者“层布局”。中国WebSite网不反对这种便宜行事的叫法。但是这样会陷入一个误区：即大量的使用div标签作为结构元素。事实上这是一种更高级的div滥用。 

   实际上html为我们提供了相当丰富的标签，每个标签都有它各自的含义。我认为在设计时，除了遵循html语法以外，应该充分利用并遵守各标签的“语义”。如标题文字应该包含在h1-h6中，大段的文字内容应该由

进行分段而不是，列表项应该放在ul或ol或dl中，table形式的数据应该仍然用table布局。 

为什么要这样做呢？一个很有说服力的原因就是，保证在用户去掉CSS显示的情况下，网页能够尽量有效的将内容的结构层次显示出来。如果全部用div，当去掉CSS之后，整个网页就失去了层次，只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。 

我下面详细的说一下我对一些html标签的语义的理解： 

p br 
先说个最简单的。分段要用p标签而不是用br。这个似乎不用多说。但是有时候我们不得不放弃这个原则。一个常见的例子就是论坛发帖，如果我想分段，便打回车。而如此传输到后台并显示出来的，显然就是用分段的。 

table th 
由于现在网上大力宣扬div+css的原因，似乎现在谁用table布局谁就是未开化的土著。但我认为这种观点是不正确的。table的含义是table，因此凡是应该以table形式出现的数据，仍然应该用table布局。简单的例子是班级同学的花名册，包括姓名学号性别等等，这明显是一个table形式的数据，因此应该用table布局还得用table。另一个比较值得探讨的例子是，blog里面的日历导航。我曾经有见过一个blog程序，它的日历导航里的各个日期，从1号到30号全用div套好，再使用float:left样式7个一排的排出当月的日历。当我取消浏览器的CSS显示之后，日历的那部分则从1号到30号一竖排下来。我个人认为这是不对的。因为日历应该是一个table形式的数据，因此仍然应该用table布局。当取消css之后，应该仍然按照一排7个的样子归成一个table。 

th则是另一个会被忽视的标签。由于CSS的万能，所有的table单元都可以用td加一个class属性搞定。但是从语义上讲，一些table单元应该用th标签。比如上文说到的日历table，里面的“MON TUE WED... SUN”这些标识星期的单元，就应该用th而不是td。 

h1-h6 
对于h1-h6标签，从语义上讲，它们应该适用于所有标题文字。所以说，一些如。 

但是值得注意的是，这样又有可能犯之前h1里面提到的问题。因为有些文字的样式其实是有现成的标签的，比如、<sub>等，我们也应该适当的给它们一些机会。 

a 
a是控制超连接的标签。但有些特殊的情况，我们不一定喜欢用它。比如需要弹出一个小窗口。我没怎么留心，但我想有些设计师会将onclick直接定义到“播放”小图标</sub>

[1] [2] 下一页