当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文 |
|
|||
初学DIV+CSS应该理解HTML标签的语义 | |||
2008-4-18 12:38:12 文/未知 出处:IT世界网 | |||
如今Web标准都被通俗的叫做“div+css”或者“层布局”。我不反对这种便宜行事的叫法。但是这样会陷入一个误区:即大量的使用div标签作为结构元素。事实上这是一种更高级的div滥用(Jeffrey Zeldman在《网站重构》一书中提到)。 HTML为我们提供了相当丰富的标签,每个标签都有它各自的含义。我认为在设计时,除了遵循HTML语法以外,应该充分利用并遵守各标签的“语义”。如标题文字应该包含在h1-h6中,大段的文字内容应该由<p>进行分段而不是<br />,列表项应该放在ul或ol或dl中,表格形式的数据应该仍然用table布局。 为什么要这样做?一个很有说服力的原因是,保证在用户去掉CSS显示的情况下,网页能够尽量有效的将内容的结构层次显示出来。如果全部用div,当去掉CSS之后,整个网页就失去了层次,只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。 我下面详细的列举一下我对一些标签的语义的理解: p br table th th则是另一个会被忽视的标签。由于CSS的万能,所有的表格单元都可以用td加一个class属性搞定。但是从语义上讲,一些表格单元应该用th标签。比如上文说到的日历表格,里面的“MON TUE WED... SUN”这些标识星期的单元,就应该用th而不是td。 h1-h6 但这里会出现一个语义上的分歧。h1究竟该理解为一级标题呢还是理解为1号字体大小的标题。我通常理解为一级标题,一级标题下再有小标题就用h2。但是事实上回顾HTML设计之初,h1-h6后面的数字更多的被理解为控制标题文字大小的。用h3或许只是为了使用三号大小的字体,而并非它就是三级标题。否则一级标题全用h1,个个都是斗大的字,又不得不用CSS来控制字号,感觉很累赘。所以,这是一个待商榷的问题。 ul ol 应该要补充的是,别忘了li里面还可以再用ul或ol,形成第二级列表。 dl dt dd img span 但是值得注意的是,这样又有可能犯之前h1里面提到的问题。因为有些文字的样式其实是有现成的标签的,比如<strong>、<sub>等,我们也应该适当的给它们一些机会。 a 我暂时就列出这么多。 最后再总结一下遵循HTML标签语义的重要性。Web标准的其中一个要求是低配置的兼容性:当用户禁用图片、禁用CSS或禁用JS的时候,我们仍能够让他有效的浏览网页内容。众所周知强制alt属性就是为禁用图片时的兼容性作考虑。而正确的遵循HTML标签的语义,则是保证禁用CSS时的兼容性。只有当正确使用了HTML标签,我们的网页在“CSS裸奔”的时候,才会仍然让人看得出哪里是导航菜单,哪里是文章标题,日历表格也不会分崩离析。 |
|||
最新热点 | 最新推荐 | 相关文章 | ||
CSS伪类选择器nth-child() css3教程:background属性调整增强 css教程:CSS3 Media Queries 详解 CSS 类名的长命名和短命名 CSS实例教程:非浮动区域设置宽度 如何使用css约束一个层不可见? CSS的list-style解释 小议使用“完整”的CSS的缺点 CSS中的相对定位与绝对定位详解 实例使用DIV+CSS制作圆角边框加阴影… |
关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |