HTML5开发手册

HTML5开发手册/哈德逊（Hudson,C.），（英）里德百特（Leadbetter,T.）著；廖望译.--北京：人民邮电出版社，2013.6

ISBN　978-7-115-31722-3

Ⅰ.①H…　Ⅱ.①哈…②里…③廖…　Ⅲ.①超文本标记语言—程序设计—技术手册　Ⅳ.①TP312-62

中国版本图书馆CIP数据核字（2013）第082488号

Chuck Hudson,Tom Leadbetter:HTML5 Developer's Cookbook

All rights reserved.No part of this publication may be reproduced,stored in a retrieval system,or transmitted in any form or by any means,electronic,mechanical,photocopying,recording,or otherwise without the prior consent of Addison Wesley.

本书封面贴有Pearson Education（培生教育集团）激光防伪标签。无标签者不得销售。

◆著　[美]Chuck Hudson　[英]Tom Leadbetter

责任编辑　傅道坤

责任印制　程彦红

◆人民邮电出版社出版发行　　北京市崇文区夕照寺街14号

邮编　100061　　电子邮件　315@ptpress.com.cn

网址　http://www.ptpress.com.cn

北京中新伟业印刷有限公司印刷

◆开本：800×1000　1/16

字数：507千字　　2013年7月第1版

印数：1-3000册　　2013年7月北京第1次印刷

内容提要

HTML5作为当今最炙手可热的Web开发技术，凭借其强大的功能特性和跨平台等优势，吸引了业内开发人员的重点关注，掌握HTML5技术也成为Web开发人员的一项必备技能。

本书采用菜谱的方式为HTML5新手以及有一定经验的用户提供了一些专家级的建议和经过测试的代码示例，可以帮助其顺利创建高质量的HTML5应用。本书总共分为15章，先后讲解了HTML5中新增的元素、浏览器对HTML5的支持、CSS3中的新布局和样式、HTML5 Web表单、多媒体技术、地理定位API、客户端存储、WebSocket API，以及集成设备数据等内容。

本书内容组织合理，示例丰富，适合对HTML5以及移动应用开发感兴趣的新手阅读。对于有一定经验的Web开发人员，本书也极具参考价值。

关于作者

Chuck Hudson从20世纪90年代起就从事Web和移动领域的开发工作。他是一位成功的技术创业者，对利用技术来解决企业问题具有浓厚的兴趣。这也使他为许多公司提供 Web 技术咨询，并在各种会议上演讲。他曾是geek-in-training的一员，也是一位认证的PHP程序员、PayPal开发人员，并且还在波士顿和亚特兰大地区从事 Web 编程、移动技术和企业家精神等方面的讲授和培训工作。在2008年，由于编写了首个iOS移动Web和原生应用，他获得了eBay开发明星大奖。

Tom Leadbetter是一位来自于英国利物浦的Web设计人员和开发人员。他从2005年开始就投身于Web行业，并先后为多家公司和客户效力。在2009年前期，他开始接触HTML5，并在HTML5Doctor.com上撰写了很多HTML5的文章。

献辞

谨将本书献给我亲爱的祖父Alex，感谢您与我分享对生命和书籍的爱。

致谢

每当从事挑战性的项目时，总需要有多人参与迚来，共同完成该项目。能够与 Tom Leadbetter合作撰写本书，我感到非常幸运。Tom Leadbetter是一位极其有才华的设计师与开发人员。感谢你，Tom，感谢你分享你的知识，检验我的所知，还认真地倾听我许多疯狂的主意。

感谢我的家人：母亲，谢谢您的支持；父亲，谢谢您为我打开创业之路；祖父母，谢谢你们的爱。我亲爱的孩子Sierra，你总能在询问我十万个为什么的时候为我带来笑容。希望你永进不要停止求知的脚步。特别感谢 Michele，感谢你能理解我对尖端技术的痴狂，并支持我参与到无尽的项目中来。当我仅仅因为一行代码而抓狂的时候，你的理解意味着一切。

Tom S.，感谢你这些年带来的欢笑。我已经迫不及待地希望看到还有什么冒险在前面等着我们。

最后，感谢朋友以及家人在我写书的这段时间内给予的支持。是你们教会了我：只要有激情并能坚持如故，就一切皆有可能。

首先感谢我的搭档 Chuck Hudson。在写书的过程中，他给予了我很多帮助，并在我最需要的时候，提供了很多宝贵的意见。此外，他还为本书编写了很多优美的代码。

感谢HTML5的各位“医生”：Rick Clark、Bruce Lawson、Remy Sharp、Jack Osborne、Mike Robinson、Oli Studholme和Brandan Lennox。谢谢你们对HTML5Doctor.com站点所做的贡献，以及所花费的时间和精力。该站点为Web社区提供了精彩的知识和讨论。

最后，感谢我的妻子 Lucy。谢谢你对我的支持，以及在我通宵达旦地工作时，所表现出来的耐心。我能够竭尽全力完成此书，这要归功于你对我不懈的帮助。

感谢Trina MacDonald与Pearson给我们撰写本书的机会，以及在我们不断提高本书质量的过程中给予的宽容。感谢Michael Thurston、Evan Burchard、Tim Wright、Siddharth Ram和Kim Wimpsett 等诸位编辑。谢谢你们提供的建议和详细且有见地的反馈。你们让我们能够更清晰地洞察整体而不是局限于片面，从而迚一步提升了本书的质量。谢谢你们为此所付出的宝贵时间和精力。没有大家为本书所做出的牺牲，本书不可能付梓。

最后，我们要感谢整个HTML5社区无私地与我们分享知识。还要感谢各位读者，敢于在此时作为先驱者尝试HTML5技术。我们真心希望，你能够在本书中享受到与我们创作时相同的乐趣。

前言

HTML（超文本标记语言）是构建网页的核心语言。在过去的20 多年里，无数的开发者编写着 HTML。在HTML 诞生的前几年，这门语言经历了翻天覆地的变化，直到 1990年后才相对稳定了起来。不过，现在一切开始改变。

在1991年，Tim Berners-Lee撰写了一篇名叫“HTML Tags”（HTML标记）的文档。文档中描述了20个可以用来编写Web文档的标记。到1993年中期，IETF（因特网工程任务组）发布了第一个HTML规范的提议，该提议最后过期。而直到1995年11月第一个正式规范才得以发布，并且是HTML 2.0的规范，而不是HTML 1.0。

HTML 3.2在1998年发布。紧随的HTML 4也在1998年发布。HTML 4一共有3个变体：严格（Strict）、过渡（Transitional）、框架（Frameset）。在这个时期里，浏览器开发商，比如Microsoft、Netscape，开始以略有不同的方式实现 HTML，由此引燃了第一轮浏览器大战（http://en.wikipedia.org/wiki/Browser_wars）。

在HTML 4发布后，W3C（万维网联盟）决定停止HTML的进化与发展，并且开始将工作转向 XHTML 1.0（可扩展超文本标记语言），该语言基于 XML，并被当作是 Internet的未来之星。实际上，XHTML并没有引入新的元素，规范也与HTML 4相一致。但是，开发者必须服从新的语法规则：标记必须封闭或者是自封闭的，而且属性值也必须加上引号。这就需要更为严格紧凑的编码规范，并确保开发者具有一致的编码风格。在2001年的这段时间里，随着博客的兴起，以及人们对 Web 标准重要性的日益关注，CSS（层叠样式表）开始展露头角。

2002年伊始，W3C发布了XHTML 1.1的草稿。虽然XHTML 1实际上是HTML中夹杂了小部分的XML，而XHTML 1.1实质上则是XML。然而XHTML 1.1被认为太过于超前，而且并不向后兼容。也就是说，如果使用XHTML 1.1开发网站，则该网站无法适用于当时或者更落后的浏览器。

这导致Web社区以及浏览器开发商，甚至于W3C自己的担忧。并不是所有人都坚信XML将是Web未来的标记语言。

在2004年，来自于Apple、Mozilla和Opera的员工开始以个人的名义研究规范，目的是为了创造出可以向后兼容的代码，这些代码可以用来创建Web应用。W3C拒绝了这个提议。因此，命名为WHATWG（网页超文本技术工作小组）的新兴小组得以建立。

WHATWG开始在Web表单2.0和Web应用1.0方向上发挥作用。这些规范的编辑者为Ian“Hixie”Hickson。与规范相关的问题与构思都是通过一个公共的邮件列表进行提交的。虽然在初期，WHATWG只在Web表单2.0和Web应用1.0这两个规范上发挥作用，但是后来二者合而为一，成为HTML5。

所以，WHATWG在开发HTML5之时，W3C的XHTML 2规范日渐式微。在2006年，W3C承认在是否放弃HTML上做出了错误的决定。它虽然会继续开发XHTML 2，但同时也开始再次关注HTML的发展。W3C决定以WHATWG当时所完成的工作为起点，来开发新版的HTML。

尽管这是一个利好消息，但这也带来了混乱的格局。因为当时一共有3种不同的标记语言正处于开发过程期间：W3C开发的HTML 5和XHTML 2；WHATWG开发的HTML5（注意，它与前者的区别是字母和数字之间没有空格）。所以，HTML5和HTML 5这两个规范同时由两个小组各自开发。

WHATWG与W3C的运作方式不同，因此它能够以更快的方式发展。由于WHATWG采用了公共邮件列表，因此定期就会收到一些新想法，并且 Web 开发人员可以利用它对所做出的某些决议提出质疑。规范小组一直都可以实施好的想法，拒绝差的想法，并且根据社区的反馈快速地修改或删除规范中的某些项。WHATWG的HTML5的开发速度要快于W3C。

就这样过了几年。在2009年，W3C宣布停止开发XHTML 2。HTML5胜利了。

那么，HTML5规范处于什么样的境地呢？事实上，它主要还是由WHATWG开发，而W3C则接收此规范并且进行审核。

这个过程并非那么完美，但是我们得到了激动人心的结果。

W3C（http://dev.w3c.org/html5/spec/spec.html）和WHATWG（http://whatwg.org/specs/web-apps/current-works/multipage/）各自持有一个规范的版本，而且这两个版本都有纷繁复杂的文档。在2011年3月，Ben Schwarz发布的“WHATWG HTML5 specification for web developers”是我们推荐使用的版本。如果你对日常的讨论感兴趣，可以同时通过邮件列表获知该规范的最近进展：http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org。

基础 HTML5 规范仅仅是一个基础。重要的改变正跟随着技术的进步而持续。WHATWG和W3C 小组的成员同时也在开发新的添加规范，这包括如网络连接信息、设备摄像头信息等特性。浏览器厂商也一起工作，以帮助定义这些特性，并且快速地将它们引入自己的浏览器中。接下来的几年将是振奋人心的。

HTML5 在设计时即考虑了支持当前存在的内容，也就是说，它是向后兼容的。当初提出的XHTML2规范存在的一个重大问题就是它将使现存的网站无法访问。HTML5是在HTML4的基础上建立的，所以浏览器可以继续支持HTML。浏览器不仅支持HTML5的新元素，而且还支持HTML 4中的一切。当前工作在HTML 4或者XHTML的网站，在HTML5中仍能完全正常工作。

使用HTML5意味着你可以继续使用之前的编码风格。我们会在第1章中详细解释这一点。但是HTML5在设计时就考虑到了开发人员，所以你可以继续使用HTML或XHTML语法，而浏览器知道该怎么做。

HTML5 同时也告诉了浏览器如何处理由不正确的标记所引发的错误。以前，浏览器都是靠自己解释错误，这也导致了各个浏览器有各自不同的行为。HTML5 是为开发人员与浏览器厂商所写的，所以在不久的将来，我们都会在同一个标准之上工作。

也许HTML5真正的威力在于它满足了Web应用开发人员的需求。因为浏览器的功能很强大，我们可以编写与应用程序十分相似的网站：它们可以提供图片分享、绘图、文件编辑等特性。以前，这些特性需要多层JavaScript，以及Java或Flash这样的插件。但是，这带来了易用性问题和对第三方软件稳定性的依赖。通过HTML5提供的强大API（浏览器中用于绘图的Canvas、拖放、离线存储、原生视频），我们拥有了创建Web应用的新标准。通过指定的标准，浏览器可以稳定而且正确地处理这些事情。Web社区能帮助开发和壮大这些标准，持续地推进改善它们，而开发人员再也不需要使用特殊的技巧来实现这些特性。

HTML5 并不只是一个单独的技术。它是一个概括性的术语，包含了新的以及增强的HTML元素、CSS样式、JavaScript API和事件。这些技术相互交叉，提供了大量的新特性来提升用户体验，使网站更贴近于原生应用，而且能够与设备更好地集成。下面列出了一部分可用的、新的或增强的功能：

提高网页的语义；

页面之间的信息传递；

从严格意义上来讲，地理位置并不是 HTML5 规范的一部分，但是这种酷炫的新技术是与HTML5 同时发展起来，所以人们常常将它们混为一谈。因此，我们在本书中也会讨论地理位置这一技术。

在Web开发中，并非所有的新东西都属于HTML5。CSS3就不是HTML5，但是它也很新而且很炫，因此将它放入到HTML5的范畴之内。CSS是一款完全不同于HTML的语言和技术。CSS是为展示（presentation）而生，HTML 是为搭建（structure）而生。你可以用CSS3 做出很多漂亮的东西，但是开发人员和社区应该明白它俩之间的区别。

至于HTML5是否是Flash的杀手，我们对此并不想争辩。至少由于HTML5的出现，现在浏览器可以直接提供大量不可思议而且标准的功能。

HTML5当然有logo。在过去几年，Web开发人员和站长们都喜欢将图标放置在站点上，以表示自己遵循各种 W3C 指导方针，例如（X）HTML、CSS 或者可访问性。在最近，这种风气有所减少。但是在2011年初，W3C发布了一系列logo之后，又一次在Web社区中引爆了这一潮流。因为它将许多Web技术（包括CSS3）囊括在HTML5这一宽泛的范畴之内。前面提到，CSS3不是HTML5的一部分。而W3C对CSS3的接纳引发了Web社区的关注。

值得庆幸的是，W3C修改了logo的目的和定义。所以主logo（见图a）表示“HTML5，现代Web开发的基石”。其他较小的logo（见图b）表示“现代Web开发和网站的方方面面，如样式、语义、图形等。”

所以，开发人员大可以使用这些logo来体现自身对关键Web标准的支持。虽然这不是硬性要求，但是你可以使用它们来表示你采用了各种技术。这些 logo 可以在http://w3.org/html/logo上获取，那儿还有一个logo生成器，你可以选择不同的图标和样式。

本书遵从菜谱的风格，以示例的方式来解释某一主题，并给出与该主题相关的示例。在大多数情况下，这些示例都会试图显示如何使用技术来解决真实的编码问题，而不是一些毫无真实用途的示例。我们衷心希望，本书的读者能够像在厨房中使用菜谱那样，通过本书这些宝贵的示例来解决真实环境中的编码问题。

总体上，本书都是在开始先介绍简单的主题，然后在此基础上讲解更为复杂的主题。在前几章，我们介绍了新添加的HTML5元素和CSS3。然后在后面几章介绍各种JavaScript的API和事件。很明显，如果要追求细枝末节，对于任何一个主题都可以独自成书。对于CSS3这样的主题也是如此，而且市面也有很多相当不错的CSS3图书。

对于每章中介绍的主题，我们都会包含一个表格，其中列出常见浏览器对相关特性的支持情况。我们还会包含一个或多个“菜谱”示例，来显示如何应用每种技术。在大多情况下，这些“菜谱”都有一些指示、代码和代码解释。而且每一个“菜谱”都张贴到www.HTML5Developers Cookbook.com上。

构成HTML5的多个组件，如JavaScript的API，还仍处于规范制定和各个浏览器平台的实现阶段。我们只关注那些已经被一个或多个关键浏览器明确指定和支持的元素。然而，读者也应该理解，HTML5的新特性和功能是持续演进、不断更新的。在第15章，我们会介绍一些与设备集成相关的、即将出现的特性和功能。

在本书中，“菜谱”分为三种类型：初学者、中级、高级。这些类型表示所涉主题的难度，以及学完这个菜谱所需要分配的时间和精力。这只是一种粗略的分类，实际花费的时间和精力视读者水平而定。

如果你有过Web 开发的经验，肯定会发现本书中的“菜谱”几乎不会使用任何 JavaScript第三方库（比如jQuery）或其他种类繁多的库。本书也会有使用第三方库的例外情况，其目的是专门强调第三方库或集成对于解决特定问题所能带来的帮助。由于每位读者有自己喜欢的库，而各种库对于HTML5特性又有不同的支持程度和集成方式，所以，我们尽量将重点放在HTML5的核心技术上。

我们坚信，在日常的Web 设计和站点、应用的开发之中，库扮演了重要的作用。我们也都有各自喜爱的库。大多数情况下，库在集成许多HTML5特性时，其集成方式和这些特性的定义方式相同。因此，理解了如何在通用的JavaScript中使用这些特性组件后，在库中使用它们也就得心应手了。

就其本质而言，本书既然为“菜谱”编排风格，因此会包含大量的代码清单。由于 HTML5技术变化发展迅速，也就有必要为本书配套一个站点，以保持实时更新。出于该目的，为本书建立了配套站点 www.HTML5DeveloperCookbook.com。该站点既有菜谱和可用的执行文件的电子版本供下载，还包含了一些附加资源。

现在有一个共识，那就是开发人员现在不能也不应该开始使用HTML5，但情况并非如此。

不，完全没有必要等到2022年！在2008年的一次交流中，HTML5编辑Ian Hickson给出了一个时间线，这一时间线表明，HTML5 只有在2022年时才能准备就绪。这在媒体和Web社区中引起了轩然大波。我们相信，Hickson的意思是HTML5的最终提议将在2022年前后发布。不过，这并不意味着你不能使用当前已经定义和采纳的部分。通过前面对HTML历史的介绍可以看到，规范在制定的过程中花费了大量的时间和精力，而且在最终确定之前，还有很长的路要走。

这一点可以在CSS 2.1的争论中看出。CSS 2.1已经开发了10多年，直到2011年夏季才最终确立。但是在开发的这些年里，我们不是一样使用着CSS么？现在我们来到了CSS3的时代，但是谁知道它什么时候能够完成呢？这个例子很好地解释了Web 社区一直走在规范的前面，并推动着技术的发展。

是的，现在就可以使用HTML5！因为根本就没有确定的时间点指导我们什么时候放弃HTML 4，以及什么时候开始使用HTML5。没有人知道W3C什么时候才官方宣布HTML5已经完成。也许在那时，我们已经开始使用HTML6特性了。但是，浏览器厂商一直在竭诚拥抱HTML5，并时刻接纳HTML5的新特性。

由于在规范和附加的规范中存在许多不同的内容与技术，你可以选择使用HTML5中感兴趣的部分（而不是要么全选，要么全不选）。不过，并非所有的浏览器都能很好地展现这些特性。在第3章，我们将介绍一些处理浏览器不同支持情况的方法。最新版本的Firefox、Safari、Opera、Chrome和IE都支持很多的HTML5特性（虽然有细微区别）。然而，浏览器的改进在时刻发生，甚至在编写本书时，浏览器就有了显著改进。只要浏览器之间的竞争还在，那么改进就会继续。

那么，请准备好你的文本编辑器或者HTML编辑器、一个浏览器，让我们开始HTML5之旅吧。

第1章 HTML5中新的结构元素

HTML5并不是一种具有JavaScript API和酷炫视频的交互式巫术。它有20多个新的元素，可以用来开发Web页面、添加语义以交付容易访问的可重用内容。在后面章节，我们将学习新的HTML5 表单控件和多媒体元素。本章主要讲解新的结构元素，如header、hgroup、nav、footer、article、section和aside。你将知道何时以及如何单独或组合使用这些新元素。实际上，你还将学会利用这些新元素创建一个基本的网站模板，如图1.1所示。

1.1 初学者“菜谱”：建立HTML5初始文件

现在我们开始HTML5的旅程，让我们先从HTML文件最上面的声明部分说起。虽然在这一区域的内容并不包含新的元素，但是它现在有一种新的书写方式，在我们开始进入正题之前要知道这一点。

1.1.1 doctype

看起来很眼熟么？

doctype称作文档类型声明（Document Type Definition），它总是作为HTML文件的第一行。doctype是Web标准要求的一部分，用来告诉浏览器如何处理文档，这也就是将其放在HTML文档第一行的原因所在。所以，如果你不在第一行使用doctype，或者是在doctype前面添加其他代码，浏览器将进入怪异模式（quirks mode），由此导致你编写的代码在某些浏览器下无法正常运行。

你肯定也不愿意去记忆前面出现的这个doctype，是吧？要想记住它太困难了。现在，HTML5提供了一个很好的而且容易记忆的doctype：

老实讲，就这么多。你只需要它，就可以告诉浏览器应处于标准模式下。即使某个浏览器尚未实现HTML5，页面仍然可以继续工作。如果使用<!doctype html5>，很有可能再次触发浏览器的怪异模式。无论最新的HTML语言版本是多少，选择使用doctype，就能在浏览器中正常运行。

你可以在http://infomesh.net/html/history/early上查阅到1990年11月13日的HTML文件格式。那时的标记相当简单，就像 HTML5的doctype。事实上，如果你为那个页面添加这个新的doctype，也可以通过验证。

1.1.2 字符编码

在head标记中的第一行需要包含的是charset（字符集）声明，它告诉浏览器应该如何解释这个文件。在本例中，我们想要发送一个HTML文档到浏览器中。

在HTML 4中，它应该如下所示：

但是，在HTML5中，它会像doctype一样非常简洁：

太简单了！记住，你的页面需要字符编码和doctype声明。

1.1.3 JavaScript和CSS链接

我们会快速讲解本节内容。HTML5 有助于降低页面中的大量标记（markup），还可以简化对JavaScript（和其他客户端脚本文件）与CSS的调用。在HTML 4中，script和link元素需要使用type属性，如下所示：

但在HTML5中，上面这些代码如下所示：

你可能会有疑问：“为什么现在可以这样做？”因为HTML5的一个初衷是在你编写代码时，让代码更加容易理解。所以，如果你想要链接某个脚本，浏览器会假设它是 JavaScript文件。并且如果使用rel=stylesheet，它只表示你是链接一个CSS文件。当然，不使用type属性也不会对老版本的浏览器造成影响。

1.1.4 语法编写风格

在HTML5中，对于上面的代码示例，可以使用略微不同的方式书写。可以全部使用大写：

可以不使用引号：

可以忽略闭合斜杠：

或者可以混合使用：

这些都可以使用，不过还是强烈建议使用前后一致的编码规范。这样不仅对你有所帮助，而且对打算使用你的代码的开发人员来说，也大有益处。语法风格也将是固定的。我们都曾使用过XHTML，所以应当做到闭合所有标记，使用小写字母，并使用引号将属性括起来。

将前面的代码整合起来便得到HTML5初始页面，如代码1.1所示。

将页面保存为.htm（或.html）文件，现在你可以使用大量的内容来填充该页面。

验证是一种很有用的工具，它可以检查事情可能出错的原因，在开发过程中它是很重要的一个步骤。不过，由于 HTML5 还在开发当中，所以还没有官方的验证器服务。W3C 验证器（http://validator.w3.org）可以检查你的页面与HTML5的一致性，但是也会警告这只是实验性功能。另外一个可以对页面进行测试的验证器是http://html5.validator.nu。这两个验证器都可以对你的页面进行测试。

1.2 这些新元素从何而来

这些新的结构元素是为了告诉浏览器，页面具有什么样的结构，以及内容具有什么样的语义，但是它们的名字从何而来呢？

2005年，Google 分析了10亿多个Web页面，并找到了开发人员和Web作者常用的类名（http://code.google.com/webstats）。这也使Ian Hickson（“Hixie”）—HTML5主规范的编辑—开始考虑这些新的元素。尽管这仅仅是7年以前的数据，但在Internet时代也已经算是比较陈旧的了。不过，它让我们认识到网站中哪些内容是重要而且可以复用的。

以下是当时最流行的20个类名：

有些类名供显示使用（比如 white、style1、msnormal），而其他类名则构成了HTML5 规范中的元素（footer、nav、header）。

为什么要使用这些新的元素呢？HTML5 让你可以为自己的内容提供语义含义。例如，如果你在页面中使用了导航，那么就可以使用nav元素，因为该元素蕴含了其内容的意义。

1.3 初学者“菜谱”：使用header元素建立网站标头

我们首先从一个典型的Web页面的顶端开始。

header 元素经常出现在Web 页面的最上面，它通常包含了logo、网站名称、网站导航等信息。它可以在一个页面中多次使用，后面将会讲到，它可以用于页面中特定分段区域（section）的导航，而不仅仅是页面到页面的导航。诸如搜索栏或者目录等也可以包含在header元素中。下面是一个简单的例子：

HTML5规范提到，header元素可以包含导航，所以图1.2中的元素可以使用一个包含logo、主导航链、搜索栏的header元素进行标记。视站点设计的不同，你也可以将nav放在header元素的外面。

下面列出了可以包含在header元素中的内容，如图1.2所示。

每个网页并没有限制只能使用一个header元素，也没有要求它必须在页面最顶部。我们在后面会详细讲解，如果某个页面有多个标题，可以将它们都放在一个header元素中。一个页面也可以使用多个h1标记，如代码1.2所示（本章后面会讲解article元素）。

代码1.2的运行结果如图1.3所示。

也可以在header 元素中加入作者和日期信息。只不过HTML5 规范建议将作者信息放在footer元素中。

如果在header元素中仅有一个标题（h1-6），那么就没有必要使用header了，直接使用h1～h6就足够了。

1.4 初学者“菜谱”：使用hgroup元素组合标题

使用新的HTML5元素hgroup，可以为header添加更多信息。

这个元素用来对多个相关联的h1～h6 标题进行分组。如果你的网站有副标题，可以使用代码1.3所示的元素，这将生成图1.4所示的布局。虽然hgroup是一个有效的分组选项，但是它主要是用来告知文档大纲（后面将讨论）哪个标题是最重要的。在代码1.3中，文档大纲只会包括最顶层的标题，在本例中是h1。

在代码1.3中，h2标题是与h1内容相关的，所以这里可以使用hgroup。如果只有一个h1-6的标题，就没有必要使用hgroup了。

1.5 初学者“菜谱”：使用nav元素创建导航

顾名思义，nav元素的作用是提供导航。它用于链接到网站内的其他页面，或者是链接到一个页面的其他部分（例如目录）。

nav最常用的用途是作为网站的主导航。很多情况下，开发者都使用无序列表编写导航，如代码1.4所示。

在HTML5中创建nav元素时，该代码没有太大变化。生成图1.5所示的代码看起来如代码1.5所示。

也可以将nav标记嵌入到header中，如代码1.6所示，原因是header元素中允许出现介绍性内容和导航内容。当然，不是说非要将它放在header 中，有时候我们需要根据样式设计而决定它的位置。我们也经常会看到在页面的页脚中放置的导航菜单，这些导航甚至有时和网站主导航一模一样。

没有必要将页面中的所有链接都放置到nav元素中。HTML5规范中警告：只有“主要导航”才适合放置在nav元素中。

在新闻或者博客站点上，经常可以看到带有指向文章或其他页面链接的侧边栏。代码1.7可以用来生成图1.6所示的元素。

注意，这里使用了一个h2标记来分隔nav中的链接组。如图1.6所示，h2标记可用作一个标签（tab）标题。当用户选中一个标题时，内容将会发生切换（该效果可以通过JavaScript来实现）。标题元素虽然不是必需的，但经常会根据需要用来对导航组进行分隔，使导航组的结构看起来更加整洁。出于样式的原因，也可以将前面的示例拆分为两个nav结构。

使用nav 元素能够有效地提升可访问性。屏幕阅读器之类的辅助技术能够搜索并立即使用这些导航组，而不需要等待它们全部加载完毕。通常，开发人员喜欢在HTML文档中使用“跳过”或者“跳转”这样的链接。访问页面时，只有点击这种链接才跳转到主导航或者主要内容上。现在，有了nav元素就可以完全抛弃这种方式了。遗憾的是，当今的辅助技术对HTML5元素的支持还非常有限，不过相信这方面能很快得到改善。

1.6 中级“菜谱”：使用新article元素

article元素和section元素（下一节讨论）是否是HTML5结构元素中最重要的两个，还有待讨论。不过它们肯定是最让人困惑的。

article元素是一个独立的内容块，它既可以独立存在，也可以被重用。RSS订阅中的内容就非常有代表性，因为每项基本都是独立的文章。你完全可以把某项从中抽取出来，而它仍然是具有意义的。

HTML5规范给出了一些如何使用article元素的示例：论坛的帖子、杂志或新闻的文章、一篇博文或用户提交的评论。

代码1.8用article元素编写了一篇新闻稿，其显示效果如图1.7所示。

这篇博文或新闻可以使用article的原因在于它是独立存在的。它能否存在于某个集体中（如RSS订阅）？可以！它拥有自身独立的意义么？拥有！那么它可以使用article元素。

后面的章节会讲到，可以在article中嵌套section，也可以在section中嵌套article。

HTML5规范讲到，article代表“内容独立的某个部分”，甚至博客评论也可以用它来表示。

1.7 中级“菜谱”：使用section元素对内容分组

section元素是一个总是需要标题的内容区域或页面区域。可以用它将多个部分的内容组合在一起，也可以根据需要，将内容的某一部分进一步划分。它不可用作通用封装器（generic wrapper）来实现样式上的需求。section元素中可以包含article元素，并且article元素也可以将其内容分割为section。正如上一节所说，你需要考虑何时使用article，以及何时使用section。代码1.9是一个使用section的示例，效果如图1.8所示。

代码1.9 利用section为不同类型的新闻创建一个基本的新闻页面

在图1.8中，每个section自身都有标题，它们相互之间是隔开的。如果该页面还有其他内容，可将这些内容封装到一个section中，然后为它加上“Types of new we do”的标题：

此外，还可以将“Nerdy News”区域（section）进一步划分为多个区域：

目前来看，section元素的使用方式和div标记的使用方式很相似。不过，与div不一样的是，section具有语义含义，它是一组相关内容的组合。

section中可以包含article。假设有一个新闻页面，它可能有一个新闻版块，而在该版块中又有不同类别的新闻。

就像报纸一样，这个新闻页面可能有一个“News”标题，其中包含各种类型的新闻。在HTML 4中，它们可以封装在一个div标记中，现在则可以将它们封装在一个section中了。然后再给每种类型的新闻加上标题，并放置在各自的section中。

如果你认为这部分内容具有独立的意义，那么就应当使用article标记。HTML5流程图能够很好地帮你决定使用哪个标记：http://html5doctor.com/happy-1st-birthday-us。

后面将会讲到，在我们介绍 HTML5 大纲的时候，需要检查是否使用了正确的标记，这很重要。

在早期的HTML5中，一个常见的错误是使用一个section来封装整个站点，如<section class=”container”>或<section class=”wrap”>。千万不要这样使用section!

“强烈建议开发人员将 div 元素视为最后求助的元素，也就是说在没有其他合适的元素时才求助于它。用div元素代替其他更合适的元素会导致页面的可访问性变差，而且维护难度也会加大。”

div元素并不承载任何特殊的语义。所以可以用它对那些不属于HTML5新元素的内容进行分组。通常当无法使用其他方法添加CSS样式时，才使用div。如果使用了section，它会添加到文档大纲中，表明它是重要的。相反，div则不能添加到大纲中。因此，如果section标记仅仅是用来添加样式，则最好使用div。

1.8 初学者“菜谱”：使用aside标记创建侧边栏

aside 标记表示跟周围内容紧密关联的一组内容，比如热门文章列表、博文分类、最近评论。这种内容与主页内容相关，但又与它相独立存在。

在当今的Web 开发中，侧边栏在页面中可谓是随处可见。侧边栏并不代表它的物理位置一定是在网页的两边，而是它经常包括如相关链接和分类列表等内容。要想正确地使用aside，取决于它的放置位置。如果放置在article中，aside内容必须与article内容紧密关联，比如词汇表。如果放置在article或者section之外，则它的内容应该是与整个页面相关的，如相关链接、网站所有者的微博列表或广告。代码1.10所示为如何建立“Related Links”部分，显示效果如图1.9所示。

也可以将aside嵌套在article之类的其他元素中。我们对前面的例子进行扩展，可以为用户提供涵盖各种短语或者用户不熟悉内容的词汇表。

1.9 初学者“菜谱”：使用footer元素

顾名思义，footer元素通常位于页面的底部。尽管footer通常位于某个区域或者页面的底部，但也并非总是如此。footer元素旨在包含作者、网站所有者、版权数据、网站规章制度等信息。如果它位于article或section中，则包含文章发布的日期、标记、分类和其他元数据。

以上的代码示例一般都放置在</body>标记的前面（版权消息放置在small标记中，下一章会提到）。

与header元素类似，footer元素可以在单个页面上多次使用，也可以将footer放在article中。代码1.11所示的页面中使用了一个站点范围的footer，还在article中使用了嵌套的footer元素，如图1.10所示。

该示例在一个article中使用了两个footer元素。在新闻或者博文中，文章开头和末尾通常都会显示作者或时间等信息，你可以根据需要多次使用footer。

在前面的示例中，我们还引入了time元素，这将在下一章介绍。

当然也可以在footer中加入其他内容，比如导航（使用nav元素）、合作方的logo、许可协议，以及你经常会看到的“This site is powered by <cms name>”文本。

HTML5 规范中讲到，footer 元素可以包含指向相关文档的链接。尽管在之前我们组合使用aside和nave也实现了该目的，但是如果footer位于article中，就可以使用它来提供这些信息。它还可以包含其他链接，显示“上一篇文章”、“下一篇文章”链接，代码如下所示：

1.10 中级“菜谱”：使用HTML5大纲工具验证结构

利用前面讲到的新元素，我们现在可以使页面内容更加连贯，更有逻辑，并允许人们使用这种层次结构（比如使用屏幕阅读器）来浏览我们的内容，获得与浏览目录一样便捷的体验。对大纲进行测试可以帮助检查是否正确地使用了标题和section。有很多的浏览器插件和网站应用可供你选择。这里，我们选用Google Chrome的一个插件：http://code.google.com/p/h5o/。

下载并安装后，在地址栏可以看到如图1.11所示的图标。

点击图标会显示类似目录的数据，其中内容通常是缩进的。

如果内容安排合理，显示的将是结构整齐、有逻辑的目录。如果看到有“Untitled section/article”，这通常代表使用了错误的标记，需要重新检查所使用的标记。需要注意的是，nav和aside 标记中出现的“Untitled article”无需计较。

正确的大纲与下面类似：

ii.我喜欢的东西

iii.我讨厌的东西

图1.12所示为某个文档大纲的示例，缩进是正确的，而且没有“Untitled Section”（nav中的无需考虑）。

在此“菜谱”中建立的页面的大纲如下所示：

代码1.12所示为该页面的源代码。

在页面顶端有一个header元素，在大纲中用作第一个节点（而不是页面标题），然后是各自包含标题的section元素。header元素中还有一个内容为“Bringing you all kinds of news!”的hgroup元素，但是大纲中并没有出现h2元素。这是因为大纲只读取元素中的第一个标题（h1～h6）。

section、article、nav和aside元素在大纲中显示的时候会有缩进。section包含了h1，所以在大纲中正常显示。也可以使用其他标题标记（h2或h3）替换。如果某个section中有内容而没有标题，那么大纲会显示“Untitled Section”，你需要避免这种情况。

1.11 高级“菜谱”：使用所有新标记建立新闻页面

图1.13和代码1.13所示为如何使用所有的HTML5新元素来建立一个新闻页面的布局。示例中使用了一些基本的CSS来定义元素的位置。阅读完后面的章节，我们能使这个页面更漂亮。

在编辑好一个基本的布局和代码后，让我们检查一下文档大纲。前面的代码会产生如下的大纲：

这看上去很优美。footer 元素与 section、article、nav和aside 不同，不是分栏内容（sectioning content），所以不会显示在大纲中。nav和aside 中没有标题，这也不要紧。当然也可以给 aside一个标题，不过嵌入的广告可不会保证有标题。

1.12 高级“菜谱”：使用所有新元素来建立搜索结果页面

在代码1.14中，我们将多个HTML5新元素放置到一起，来建立一个搜索结果页面的结构（见图1.14）。此“菜谱”是纯HTML代码，未使用任何CSS。

关于使用哪些标记，你可能会有其他的选择。这很好，你应该考虑如何编写漂亮的HTML代码。

所有搜索结果都包含在同一个 section 中，这个 section的标题为<h1>Results for "test"</h1>。之后，每个结果包含在自身的article中，各有一个header和footer。其实，搜索结果还可以根据内容进一步再划分为section或article。

代码末尾的分页可以看作是此页面的“主导航”（回忆HTML5规范中的定义），因为分页功能对用户如何在搜索结果之间进行导航至关重要。

1.13 小结

在本章中，我们学习了HTML5中可用的新元素，在创建Web页面的主架构时会用到它们。本章首先介绍了新的doctype，以及调用JavaScript和CSS文件的新方式，然后讲解了使用header、hgroup、nav、footer、article、section和aside标记来构造页面布局的方式。本章最后讲解了通过检查文档大纲，来检查页面结构是否正确，以及元素是否被正确使用。

第2章组合、文本级和重新定义的语义

前一章中，我们介绍了一些用于构建页面结构的HTML5 元素。本章中，读者将接触到更多的HTML5 元素（figure、time、details和mark 等）和一些重新定义的元素（address、s、cite、ol、dl、small、b、strong、i、em、abbr和hr）。后面还会介绍到新的块类型（block-level）的链接和WAI-ARIA。由于这些元素都与页面内容密切相关，所以将它们统称为组合元素或文本级元素。

2.1 初学者“菜谱”：使用figure和figcaption元素插入图片和图注

figure元素用于插入某张图片并添加描述。在HTML5以前，需要插入图片时只有额外使用div之类的元素才能将文本添加到页面中。这样做的缺点在于图片和图注之间并无任何关联。而现在添加figure之后，可以再利用figcaption为图片添加图注。

虽然figure通常用来插入图片，但它也可以是一段代码、图表、音乐或者视频。通常情况下，figure主要用于图片。图2.1所示为一个示例。用于创建图2.1的代码如代码2.1所示。

读者一定会为是否仍需要为figure元素加入alt文字（为不支持图片显示的浏览器提供的替代文字）而感到困惑。在figure 之外的img 元素总是需要alt。但如果图片只是为了提供展示，而不需要被辅助技术来识别时，就可以使用空的alt属性。不过，由于当今浏览器和辅助技术的支持问题，这很有可能会影响可访问性。

我们建议无论在哪种情况下都应为图片加上 alt 属性以防万一。在代码 2.1 中，图注的描述已经很清晰。但对于使用屏幕阅读器的用户，他无法知道分析数据是如何表现的，所以alt文字可以提供此信息。

虽然例子中直接插入了图片，但我们也可以利用Canvas或者SVG[1]绘制图像。

最初，规范中推荐使用legend元素而不是新的figcaption元素。但是由于跨浏览器样式差别的问题，开发者都倾向于使用figcaption而不是legend。

如图2.2所示，figure元素中不仅仅只能包含一张图片，可以使用figure元素来显示多张图片。代码2.2解释了如何在figure元素中插入多张图片。

显示图片内容的时候是否总是使用figcaption元素？如果单纯是为了显示某张图片（或图表等），那么使用普通的img标记足以。不过，如果它包含了额外的有助于内容描述的信息，那么就应该使用figure和figcaption。最后注意，figure中只能包含一个figcaption。

2.2 初学者“菜谱”：使用time元素插入日期和时间

使用time 元素，我们可以插入计算机能够识别的日期和时间，同时又能以一种可读的方式显示给用户。那么利用此元素，我们不仅可以为内容添加如发布时间、事件发生时间等信息，还可以利用其他的技术（比如说日历系统）。time元素有两个可选属性。

datetime：终端用户浏览的内容在time 标记之间，而计算机可以识别datetime值：datetime="2011-04-01T16:00Z"。其中的时间部分（T16:00）是可选的。也可以为其添加时差信息：T16:00+04:00。这里的Z代表的是协调世界时（Universal Coordinated Time，UTC），与添加时差信息+00:00相同。

pubdate：pubdate是布尔属性。它代表的是其最近的父article元素内容的发布日期和时间。如没找到任何父 article 元素，则指向整个文档。每个 article 元素只能拥有一个带pubdate的time元素。

time元素的意图是显示某个确定的时间，如“2011年1月22日”，而不是某个不确定的时间，如“2011年某天”。其中的datetime属性必须使用公历格式：YYYY-MM-DD，加时间格式T00:00。

下面是几个示例。

2.3 初学者“菜谱”：使用details元素创建可伸缩控件

在本书撰写时，只有Chrome 13+支持新的details元素。但愿其他浏览器能尽快支持它。

利用details元素能够在无需任何JavaScript和/或CSS的情况下，创建交互式展开/收缩的开关效果。在其中使用summary元素还可以创建内容的概述信息。

details有一个可选属性：open。若其为真，内容默认为展开样式；反之则为收缩样式，显示summary内容。Summary是一个可点击的部分，用以控制内容的展开与收缩。

图2.3显示了一个简要的作者自传，在默认情况下，顶上的details为展开状态。详细代码见代码2.3。

下面是另外一个利用details 显示、隐藏目录的例子。根据页面样式和内容多少，将目录始终显示于页面顶部是很有用的。用户可以点击展开它，然后跳转到页面中的其他章节。代码2.4演示了这种效果，其中details元素默认为收缩样式。

2.4 初学者“菜谱”：使用address元素提供通信信息

规范中将address元素定义为“分节元素”，与nav或article类似。不过，我们将它放在本章讲解，主要因为我们认为它作为文本级语义更为合适，原因是它的用法与文字内容相关，而不是页面布局。

多年以来，Web开发人员一直错误地使用了address元素。它并非显示通用邮寄地址（通常在某个“联系我们”页面中）的通用方式。因此，下面这种使用方式是错误的：

为了澄清这一点，HTML5将address元素定义为：显示与它最近的article或body元素的通信信息。

此定义的含义是什么？它表示你应该使用address元素来显示当前article作者或整个页面的通信信息。因为可以在article中使用address，所以这也意味着在一个页面中可以多次使用address元素。address元素的内容可以是电子邮件地址、网址、电话号码、邮寄地址或其他任何通信信息。

由于address元素用于通信信息，所以通常会在footer中使用到address。代码2.5使用了两次address元素：一次用于主页面内容的作者，另一次用于显示整个网站的作者。

2.5 初学者“菜谱”：使用mark元素高亮文本

利用mark元素，文档作者可以高亮显示文档中的某些文本以达到醒目的效果。

如果用户在站点中进行搜索，搜索页面中的关键字可以高亮显示。这时，就可以很好地利用到mark元素。不选用strong或者em元素的原因是，我们并非想要强调这些关键字，而仅仅是为用户提供高亮效果。图2.4所示为如何使用mark元素。代码2.6所示为对应的HTML和CSS。

2.6 初学者“菜谱”：使用s元素显示不准确或不相关的内容

以前，s元素是特意用来显示带删除线的文字的。在HTML5中，s元素得以重新定义，它现在用来显示不再正确或不相关的内容。

这意味着可以使用它显示某个产品曾经的价格，而这个产品现在的价格已经有所变化，如图 2.5所示。虽然在此情景下，使用s元素显示过时信息能够为读者带来很大便利，但并非总是正确的，这得视上下文而定。代码2.7所示为应当在何处使用这个元素。

在HTML 4中，s元素被定义为删除线文本，所以默认情况下浏览器会使用删除线来显示s元素中的内容。

如果文档内容被编辑或删除，请不要使用s元素，而应使用del元素。

2.7 现存元素的变化

在第1章中，我们介绍了用于创建页面布局和添加内容的新元素。在本章前半部分，我们介绍了更多的HTML5新元素，但是它们关注的是内容自身，比如图片。一直介绍新元素并不代表现存的元素都被我们忽略了。事实上，其中一些现有元素的角色发生了变化。

2.7.1 cite元素

HTML5对cite元素的定义进行了很大的修改。在HTML 4中，cite元素允许内容开发人员显示引用内容的作者或发言人。

虽然从技术上来说是错误的，但cite元素还是经常在blockquote中使用。

然而，HTML5中的cite用来显示某个作品（书籍、诗歌）的标题。HTML5规范中还着重强调：人名并非作品标题的一部分。因此，读者可以使用如下的代码：

（HTML5规范推荐使用b元素显示作者名。）

HTML5 禁止 cite 显示作者名的规定还引起了一些非议。Jeremy Keith的博文 http://24way.org/2009/incite-a-riot对这个事件进行了深入的介绍。总之，HTML5的cite元素不再向后兼容，并且HTML5规范推荐为人名使用b元素。不过，尽管其中的内容有意义，b元素仍然没有语义含义。

所以，读者需要自己决定是遵循规范，还是像很多开发者一样继续使用cite显示人名。开发者也很有必要关注cite元素的定义是否改变。

2011年7月，曾有过关于“允许在blockquote中使用footer元素”的讨论。这让开发者有机会在引用内容中添加作者名之类的信息。让我们静观其变。

2.7.2 ol元素

2.Aliquam tincidunt mauris eu risus.

用于创建有序列表的ol元素也被重新定义。现在它可以附加3种属性：

代码2.8使用了HTML5新定义的reversed属性。在任何支持此属性的浏览器中打开列表，该列表将以倒序显示。

当前还没有任何浏览器支持此属性，不过在支持以后，显示效果应该如下：

HTML 4废除了start属性。因此页面若使用了start属性，将无法通过验证。HTML5重拾起了该属性，也算是解决了对此属性需要时的困扰。因此，如果需要设置有序列表，使其从第二项开始，可以使用如下代码：

type属性也同样起死回生。以前，只有通过CSS才能改变列表样式（如使用罗马数字计数）。但在HTML5中，我们可以使用type来实现。代码2.9所示为一个示例。

上面的代码将会产生如下列表：

1.Lorem ipsum dolor sit amet,consectetuer adipiscing elit.

3.Vestibulum auctor dapibus neque.

使用type属性，我们无需CSS就可以设置排序数字的类型。一共有5种类型可供选择：

type=”1”= 1,2,3,4,5

type=”a”= a,b,c,d,e

type=”A”= A,B,C,D,E

type=”i”= i,ii,iii,iv,v

type=”I”= I,II,III,IV,V

如果将ol类型改变为上述任何一种类型，可以得到如下效果：

1.Lorem ipsum dolor sit amet,consectetuer adipiscing elit.

2.Aliquam tincidunt mauris eu risus.

3.Vestibulum auctor dapibus neque.

套用不同的类型后，可以在内容中引用1.b.ii项，而不是1.3.2。浏览器将会正确地实现type属性，不过在本书撰写时，使用该元素后会产生页面验证错误。

2.7.3 dl元素

在HTML 4中，dl元素为定义表，包含的是某个术语和它的定义。然而，由于其定义和使用相当不清晰，这导致了很多误用，更有开发者转而使用其他元素。

在HTML5中，dl元素被重新定义为一个描述或者关联列表。通过分析一些例子，可以很容易地理解该元素。代码2.10利用dl建立了一个术语表。我们将表放置于aside中，是因为我们假设aside元素位于article中，这也是Web开发中的常见情况。

代码2.11利用dl创建电影工作人员名单。

上面的代码为单个键（dt）赋予了多个值（dd）。实际上，也可以将每栏信息（导演、编剧等）分别放置在各自的section中，如下所示：

这在很大程度上取决于内容以及以什么样的结构来组织内容。

dl 元素以前被用作描述对话内容。不过，从规范来看，使用dl 是不恰当的。最初在HTML5中有一个dialog元素，但是在2009年底又将其从规范中删除了。作为替代，我们可以使用p元素。如果想给发言人的姓名添加样式，可使用span或b元素。例子如下：

2.7.4 small元素

在HTML 4中，small元素用来缩小字体。可是，缩小字体是显示层面的问题，应该由CSS来完成。因此，在HTML5中，small元素代表小打印体，如版权信息、条款或许可/法律信息：

因为small是内嵌元素，如果有需要，你可以将它嵌入其他元素中。比如嵌入 strong，它可以为该小打印体赋予重要性。

2.7.5 b和strong元素

在HTML 4中，b元素用作加粗。现在，它纯粹用作展示。所以应该用它来为不带特殊重要性的内容添加样式。

博文的首段就经常采用加粗的样式，以表现与众不同：

这里不使用strong的原因在于我们并不想表示首段更加重要，而只是想使它的样式有所不同。当然，也可以使用CSS（p:first-of-type或h2+p）来添加样式。代码2.12利用b元素为内容添加不同颜色。

strong元素用来标识重要的内容。所以我们不仅可以用来加粗文字，还可以嵌套此元素以增加内容的重要性。

2.7.6 i和em元素

i元素在HTML 4中用来创建斜体文字。不过，现在它的作用是以另外一种语气或心情表现内容。HTML 5规范给出了一些使用示例，其中包含了一个梦境、一个科技术语、一个想法或船名等：

相反，em 元素表示了能改变句子意思的强调。包含在em 中的一个或多个字在该句中有强调的意味。如果移动em元素，即改变强调的内容，相应的句子也会发生含义上的改变。

2.7.7 abbr元素

abbr 元素并非 HTML5 新引入的，也未被重新定义。那为何在这里提及它？这是因为abbr现在与acronym整合了。现在，abbr既可以标识缩写词，也可以表示首字母缩略词。可以使用title属性显示全称。该属性通常会以提示的形式显示给用户。

缩写词与首字母缩略词不同：NATO是首字母缩略词，而BBC是缩写。在HTML 4中，两个标记都可以使用。但是由于这时常给作者带来困惑，因此去掉了acronym，而都使用abbr。

2.7.8 hr元素

hr元素用于在文档中添加横线。它的用法有细微的改变。现在，在段落末尾使用它。比如在书籍中，可用其指示场景的切换。通常，此元素会显示为节与节之间的一条横线或某种特殊图案。现在，hr元素并不常见了。因为我们可以使用CSS在任何p、div、article或section元素后添加空格、图案、线段或是其他装饰。

2.7.9 不复存在的元素

HTML5中删除了如下元素，我们可以对它们说再见了：

acronym（使用abbr）

applet（使用object）

basefont（使用CSS来显示）

big（使用CSS来显示）

center（使用CSS来显示）

frame（iframe仍然存在）

font（使用CSS来显示）

strike（使用s或del，这视内容而定）

tt（使用CSS来显示）

u（使用CSS来显示）

如上列出的是当前已经删除的元素。若你仍在使用它们，我们建议你尽快停止。

2.8 初学者“菜谱”：为多个元素添加相同的超链接

HTML5 中一个非常实用的新特性是将某些元素组合起来，显示单个链接来提供更宽的点击空间。而在以前，我们需要使用JavaScript或一系列组合元素才能完成这种功能。

在HTML 4中，在编写新闻或博客主页等含有众多文章链接的页面时，我们需要使用代码2.13的方法使每个项目都可点击。

代码2.14所示为在HTML5中直接使用一个a元素做到这一点。

虽然可以直接将article元素放在a元素中，但是目前这将造成一些浏览器的兼容问题。因此，我们不建议这样使用。

2.9 中级“菜谱”：利用Microdata添加语义信息

Microdata 规范为开发者带来了给某些内容添加标签的功能。从计算机看来，这些内容变得更友善、更易于理解。理论上，像Google这样的“机器”能够借助于Microdata返回更加准确的页面信息。

读者可以将 Microdata视为某种自定义的元素。你可以使用它为商业、人、产品、事件等添加标签。由于不存在book 元素，你可以为现存的元素添加 Microdata 属性来表示书籍。

Microdata包含5个属性：itemid、itemprop、itemref、itemscope和itemtype。代码2.15所示为一个描述人的简单示例。

代码2.15表示某个名为Tom Leadbetter，家住United Kingdom，在Space Cowboy公司工作，职位是Space Cowboy的人。

当为某个元素添加itemscope时，该元素便成为了Microdata项。itemprop代表这个Microdata项的一个属性，它描述了元素中的内容。示例中共有两个itemscope属性：一个代表整体（人）内容；另外一个代表地址内容。

示例中itemprop的值取自http://data-vocabulary.org。该网站为诸多繁杂的数据类型（事件、产品等）提供命名。你也可以使用自定义的命名方式，不过考虑到结果一致的问题，你应该使用标准的并可识别的命名。Google 在http://google.com/support/webmasters/bin/answer.py?answer=99170 提供了一些示例和建议。使用Google webmaster Rich Snippets Testing 工具可检测你的Microdata，来查看Google如何在搜索结果页面中显示你的数据，如图2.6所示。

图2.7显示了该页面中Google获取的其他信息。

这仅仅是一个Microdata小例子，它还有很多有用选项。更多的例子请查看前面提到的Google网站。同样还有其他的一些工具可以在创建Microdata时提供帮助，详见http://foolip.org/microdatajs/live和http://microdata.freebaseapps.com。

在2011年6月，http://schema.org上线。它是由Bing、Google和Yahoo!共同推出的Microdata大纲。Schema.org 还提供了一些应用范例以及大量的数据示例。在代码 2.15 中，我们之所以使用http://data-vocabulary.org，是因为Rich Snippets Testing工具对其提供了支持。不过，开发者不久就可以在Microdata中使用http://schema.org了，并且我们相信 schema.org应该是开发者查阅Microdata元素的最好网站。

Microformats和RDFa是另外两种扩展HTML来描述特定信息的方法。这两种方法各有优劣，我们并不想在此讨论对它们的选择。事实上，你可以在Microdata中加入Microformats。虽然Microdata规范正脱颖而出，而当前实际上更加流行采用Microformats。

2.10 中级“菜谱”：在HTML5中使用WAI-ARIA

Web Accessibility Initiatives Accessible Rich Internet Applications（WAI-ARIA）也称作ARIA，是一个旨在提高Web应用和Web页面可访问性的草稿规范（http://w3.org/TR/wai-aria）。ARIA允许使开发者与内容作者开发能够被辅助技术识别和使用的富Internet应用和内容。通常，辅助技术无法知道一个组件（widget）是什么，组件也一般无法使用键盘访问。同样，试想一下，如果通过Ajax 调用更新内容，辅助技术无法知道内容已经更新，因而无法通知用户。虽然这里不会讨论ARIA所能提供的所有解决方案，不过我们会讲解ARIA的Landmark Roles（地标角色）部分，以及如何将这些新角色添加到HTML5文档中。

Landmark Roles是页面中用作导航地标的区域。规范中列出了50多种角色（http://w3.org/TR/wai-aria/roles#landmark_roles），下面列出了最为常用的角色：

role=”complementary”

role=”contentinfo”

role=”navigation”

你可以用如下的方法将它们添加到元素语言中：

这表示该表单（页面中可能存在多个表单）用于搜索。

纵览前面的列表，你可以看到上面一些角色有明显的配对HTML5元素。当你将它们添加到前面章节的主页面结构中，可以得到如图2.8所示的布局。

因为在此元素代码中使用了逻辑结构以及ARIA角色，终有一天辅助技术能够轻松地导航到页面的各个区域。不过，目前很少有屏幕阅读器支持HTML5，更不用说ARIA元素了。

你可以在文档顶部使用跳转链接（skip link），通常会使用CSS隐藏这些链接。这些链接允许使用屏幕阅读器、键盘或其他辅助技术的用户快速地“跳过”或“跳转”到重要的区域。这些区域通常是主导航或主页面内容。代码类似如下：

借助ARIA，“地标”会对用户高亮显示，以方便他们在这些选项之间循环。

HTML5验证接受ARIA角色。你也可以在HTML 4中使用ARIA角色，不过会造成验证错误。

这些角色同时还为你提供了巧妙的CSS“钩子”，方便你将它们加入选择器（selector）中。页面中可能有多个header或多个footer，但如果你想为主页面header和footer设置不同的样式，那么你可以在CSS中这样选择它们：

尽管没有必要这样使用CSS，但至少提供了一种备选方案。

关于WAI-ARIA规范和HTML5的可访问性还有很多方面，所以我们建议你通过下面的网站进一步了解：

http://w3.org/TR/wai-aria

http://html5accessiblity.com

http://paciellogroup.com/blog

2.11 高级“菜谱”：编写带有评论的文章页面

代码2.16创建了一个带评论的文章页面（见图2.9）。它使用了本章中介绍的一些新技术。

代码2.15使用了一些ARIA地标角色。此外，我们还使用了某些角色来辅助设置h1标记的样式。同时我们使用了b元素对article的首字母设置样式，让它看起来更漂亮点。在设置h1和b元素的样式时，没有必要使用上面的CSS代码，因为还有其他的方法选择这些元素，不过多一种选择也未尝不好。

页面中还多次使用了新的time元素，主article的pubdate中使用一次，每个评论中也分别使用了一次。在前面一章中，介绍了用户评论也属于article，所以我们在这里如此使用。这里我们将时间和日期作为它的标题。我们原本也可以使用评论的作者，但在大纲中出现多个重复的标题并不是我们想要的，使用日期和事件能够赋予它一个唯一的标识。这只是个人喜好问题，当然你也可以将评论作者作为标题。

页面还使用了编号列表（ordered list）使每个评论都带有一个编号，这不仅可以提供评论的顺序还可以为我们提供样式选项。在ol上使用reversed属性使最近的评论处于最顶端。这里还可以提供一个“按日期排序”的开关按钮，并使用JavaScript来添加或删除reverse属性。再次声明，你并非必须那样做，还有很多其他的办法。评论的设计也可能意味着你需要考虑其他一些方面。

2.12 小结

在本章中，你学习了很多新的元素和HTML5中调整后的元素。figure和details之类的新元素一定能使开发者的工作更加简单。借助新ARIA角色，你可以用更加明显的语义和更好的可访问性来组织自己的文档。此外，你还可以使用Microdata为你的HTML添加更多信息，以方便搜索引擎提供更丰富、更精确的数据。

虽然 HTML5 相应的各种规范尚未完成，各种细节不断变化，不过当前我们仍可以立即使用它的很多新特性。HTML5 是一种不断演进的语言，它融合了更加丰富的JavaScript API。各浏览器开发商需要不断更新以跟上规范的完善进度。面对这些不断的更新与浏览器的不同版本，作为开发者的我们会时常碰到浏览器的支持问题。

HTML5开发手册

图书目录:

详情

图书摘要

相关图书

相关文章

相关课程