HTML5秘籍(第2版) 第二章ch02.pdfVIP

第 2 章 用语义元素构造网页 Web诞生到现在的20年间，网站发生了天翻地覆的变化。不过，最让人叹为观止的， 从 还不是Web 的变化有多大，而是最古老的HTML元素到今天依然被沿用着！事实上， Web开发人员在构建现代网站时使用的HTML元素，与 10年前构建网站时使用的HTML元素别无 二致。 有一个元素特别值得一提，那就是温和谦恭的div （division ，分区）元素，它堪称每一个 现代网页的柱石。利用div元素，可以把整个HTML文档分隔为页眉、侧边面板、导航条，等 等。再辅以少量可靠的CSS ，就可以把这些区块转换成带边框的盒子或带阴影的分栏，而且各就 各位。 这种div加样式的技术既简明又强大，还非常灵活——但不够透明。在查看别人的源代码 时，必须费点劲才能知道哪个div表示什么，而整个页面又是怎么搭建起来的。为了理解页面 的构造，不得不在标记、样式表和浏览器显示的页面之间跳来转去。特别是在破解别人编写的不 怎么符合最佳实践的页面时，即便你也在自己的网站中应用了同样的设计技术，也少不了会面对 这种困惑。 这种情况引发了人们的思考。是不是可以用更好的东西来代替div？这种东西需要发挥与 div一样的作用，但却能传达出更多的语义。而且，要能够把侧边栏与页眉分开，以及把广告 条与菜单分开。HTML5为此引用了一组构造页面的新元素，实现了Web开发人员的这一夙愿。 如果你的 技能尘封已久，急需温故知新，然后才能看懂样式表，那说明你还没法学 提示 CSS 习这一章。好在附录 中包含一个简明的 教程，在那里可以找到 知识的基本介绍。 A CSS CSS 2.1 语义元素 要想让网页的结构更清晰，需要使用HTML5中新的语义元素 （semantic element ）。这些元素 可以为它们标注的内容赋予额外的含义。例如，新的time元素用于在网页中标注一个有效的日 期或时间。下面就是time元素最简单的用例： Registration begins on time2014-11-25/time. 30 ｜ 第 2 章 用语义元素构造网页 这行代码在网页中呈现的结果如下所示： 1 Registration begins on 2014-11-25. 最关键的是要理解，time元素没有任何内置的样式。实际上，网页的读者也没有办法知道 有一个额外的元素包含了日期。你可以使用样式表为time元素添加样式，但默认情况下，time 2 元素中的文本与普通文本没有任何区别。 设计time元素的用意是让它来包含一小段信息。不过，大多数HTML5语义元素的用途是 标识页面中的一个内容区块。比如，nav元素用于标识一组导航链接。而footer元素用于标 3 识通常放在页面底部的文脚（或页脚）。算起来，大概有十几个类似的新元素。 尽管语义元素在 的新功能里不怎么起眼，但它们的数量却不少。 新增的大 注意 HTML5 HTML5 4 部分元素都是语义元素。 所有语义元素都有一个显著的特点：不真正做任何事。相对来说，video元素则囊括了在 5 页面中充当视频播放器的全部能力（参见5.2.5节）。有读者可能会问了，既然它们不会改变网页 的外观，那为什么还要使用这些新元素呢？ 有如下几条理由。 6  容易修改和维护。解读传统的网页比较困难。要想理解整