第 2 章 新的结构化标签和属性

先说一个普遍影响当今Web开发者的严重问题——div依赖症 。这一积习使得Web开发者过度使用<div>标签以及诸如bannersidebararticlefooter等id属性来包装元素。同时,这种开发方式的传染性也很强,在Web开发者中迅速传播开来。由于<div>标签是不可见的,所以轻微的依赖几年间都可能察觉不到。

以下是典型的“div依赖症”代码:

<div id="page">
<div id="navbar_wrapper">
<div id="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
...
</ul>
</div>
</div>

这段代码中有一个无序列表,它是个块级(block)元素,被两个同为块级元素的<div>标签包围。块级元素独占一行,而行内(inline)元素并不要求换行, 所以这个<div>标签并没有任何特定的语义含义。无序列表外围两个<div>标签的id属性告诉我们<div>标签各自的用途,但实际上,至少可以移除其中的一个<div>标签而不会带来任何影响。过度使用标记会让代码膨胀,并且很难给网页设置样式,网页维护起来也比较困难。

不过,还是有希望的!HTML5规范引入了新的用于描述内容的语义标签,为组织页面中的标签提供了解决方案。由于太多的开发者需要处理侧边栏(sidebar)、文档页眉(header)、页脚(footer)以及区块(section),因此,HTML5规范引入了新的专用标签,用于将页面划分成不同的逻辑区域。

除了以上这些新的结构化标签,本章还会讨论一些其他的标签,比如<meter><progress>标签,并讨论如何使用HTML5中新的自定义属性在元素里嵌入数据,这种全新的方式取代了以往常用的使用类或已有属性的方式。总之,本章将介绍如何用正确的标签做正确的事情。有了HTML5,就可以在你的职业生涯里消灭“div依赖症”。

以下列出了本章探讨的新元素及新特性。

  • <header>:定义页面或区块的页眉区域(C5、F3.6、S4、IE8、O10)
  • <footer>:定义页面或区块的页脚(C5、F3.6、S4、IE8、O10)
  • <nav>:定义页面或区块的导航条(C5、F3.6、S4、IE8、O10
  • <section>:区块,定义页面或内容分组的逻辑区域(C5、F3.6、S4、IE8、O10)
  • <article>:定义文章或完整的一块内容(C5、F3.6、S4、IE8、O10)
  • <aside>:定义次要或相关性内容(C5、F3.6S4、IE8、O10)
  • 定义列表(Description lists):定义名字与对应值,如定义项与描述内容(所有浏览器)
  • <meter>:描述一个数量范围(C8、F16、S6、O11)
  • <progress>:通过设置进度条,显示实时进度情况(C8、F6、S6、IE10、O11)
  • 自定义数据属性:通过data-模式,允许给元素添加自定义属性(所有的浏览器都支持通过JavaScript的getAttribute()方法读取这些自定义属性)

目录