[让CSS更规范]使用有意义的标记

摘自《精通CSS:高级Web标准解决方案》

大多数人不关心建筑物的地基。但是,如果没有坚固的地基,建筑物的主体也就不会存在了。同样,如果没有结构良好且有效的(X)HTML文档,那么我们要做的许多事情都是不可能实现的(或者说实现起来是非常困难的)。

早期的Web仅仅是一系列相互链接的研究文档,并使用HTML添加基本的格式和结构。但是,随着万维网的流行,HTML开始用来表现页面。人们使用字体和粗体标签的组合来创建所需的视觉效果,而不只是用标题元素突出显示页面的标题。表格成了一种布局工具而不是显示数据的方式,人们使用块引用(blockquote)来添加空白而不是表示引用。Web很快就失去了意义,成了字体和表格标签的大杂烩。

HTML原本是一种简单且容易理解的标记语言。但是,随着网页变得越来越复杂,代码变得几乎不可能理解了。因此,需要使用复杂的WYSIWYG(所见即所得)工具来处理大量的无意义标签。不幸的是,这些工具并没有使事情简化,反而添加了它们自己的复杂标记。新千年开始以来,即使普通的网页也变得非常复杂,以致于几乎不可能进行手工编辑而不破坏代码。看起来不能这样下去了。

就在这种情况下,CSS出现了。有了CSS,就可以控制页面的外观并且将文档的表现部分与内容分隔开表现标签(比如字体标签)可以去掉,而且可以使用CSS而不是表格来控制布局。标记重新变得简单了,人们又开始对底层代码感兴趣了。

意义重新回到了文档中。浏览器的默认样式可以被覆盖,所以可以将某些内容标为标题,而不需要为它指定大的、加粗的、难看的字体。可以创建列表,而这些列表不一定显示为一系列带黑点的列表项,可以使用没有相关联样式的块引用。开发人员开始按照(X)HTML元素的原义使用它们,无需去管它们的外观。

有意义的标记为开发人员提供了几个重要的好处。与表现性的页面相比,有意义的页面更容易处理。例如,假设需要修改页面中的一个引用。如果这个引用加上了正确的标记,那么很容易搜索代码,找到第一个块引用元素。但是,如果这个引用只是另一个段落元素标签,那么就很难寻找了。

除了人容易理解之外,程序和其他设备也可以理解有意义的标记(也称为语义标记)。例如,搜索引擎可以识别出标题行(因为它被包围在h1标签中)并给它分配更高的重要度。屏幕阅读器的用户可以依靠标题作为辅助的页面导航措施。

更重要的是,有意义的标记提供了将元素调整为你所需样式的简单方法。它在文档中添加了结构并且创建一个底层框架。可以直接设置元素的样式,而不需要添加其他标识符,因此避免了不必要的代码膨胀。

(X)HTML包含丰富的有意义元素,比如:
h1, h2等。
ul, ol和dl。
strong和em。
blockquote和cite。
abbr, acronym和code。
fieldset, legend和label。
caption, thead, tbody和tfoot。

因此,当存在意义合适的元素时,就应该使用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值