详情
本书作者peter·Gasston巧妙地引导你通过学习目前最新最实用的技术，深入了解HTML5，CSS3，JavaScript和SVG这些不可不知的技术。对于要建立现代化的，功能齐全的网站和应用程序的Web开发人员，这本书将是不可或缺的。
书名：移动网页设计与开发 HTML5+CSS3+JavaScript
ISBN：978-7-115-34260-7
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
Copyright © 2013 by Peter Gasston. Title of English-language original: The Modern Web, ISBN 978-1-59327-487-0, published by No Starch Press. Simplified Chinese-language edition copyright © 2014 by Posts and Telecom Press. All rights reserved.
本书中文简体字版由美国No Starch 出版社授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。
版权所有，侵权必究。
献给Dave、Jim、Morena、Nick、Rupert和Steve，以及伦敦网络标准小组所有其他组织者。他们不但给了我第一次公开演说的机会，而且让演讲现场充满活力。
万分感谢本书的审稿人David Storey。他在该领域具备深厚的专业知识，因此，他的反馈对我来说非常宝贵。虽然他帮我纠正了很多错误，并指导了我多次，但书中如果仍出现其他错误，那完全是我的责任。
感谢Keith Fancher、Serena Yang和Bill Pollock，以及No Starch Press出版团队的其他人员。在整本书的写作过程中，他们不但给予我极大的支持，并且给了我很多指导。他们对本书的集体贡献是无可估量的。
感谢Dimitri Glazkov的帮助，他为我解答了几个Web组件方面的疑问。还要感谢Bruce Lawson，对于第2章中讲述的新HTML5组件，他给我的反馈意见非常有帮助。在本书的写作过程中，我一直都在参考他的著作，还有他的HTML5博士同事的著作。
我要感谢David Walsh，尽管我们从未谋面，但我经常使用他的网站。要知道，那是个相当出色的网站。
Stephen Hay和Chris Mills是非常好相处的人，他们对我的帮助很大，使我能集思广益。
特别感谢Giles McCartney、Richard Locke和Tom Shirley，他们既是我的同行，也是我的朋友。还要感谢我在Preloaded、Poke、Top10、Believe.in和rehabstudio的所有同事。
最后，和以往一样，向我的妻子Ana致以最深的感谢，感谢她在本书的写作过程中对我的宽容和支持。
我们正处于一个史无前例的网络创新时代。不久前，一家叫微软的公司主宰着网络世界，例如，2003年全球约95％的电脑使用IE浏览器。这种高度统治的优势是：为开发人员提供了一个稳定的市场；但同时也存在严重的缺陷：微软选择了结束IE浏览器的非核心工作，使得网络创新停滞不前——这就是一个缺乏竞争的封闭环境导致的结果。
现在的情形完全不同了，将近四五个主要浏览器厂商，大约相同数量的主要操作系统商，以及更多的团队一直参与其中。Adobe已经将其核心业务从Flash和应用程序中转移到开放的网络世界，还有像三星和任天堂这样的科技公司也加入其中；他们和谷歌、苹果以及微软这些核心成员一同塑造着未来网络以及未来网络的建立方式。
此外，我们访问网络的途径——各种智能设备，也发生了巨大的变化。我们不仅仅只限于使用台式电脑和笔记本电脑浏览网页，现在，可以使用各种类型的智能设备——包括智能手机、平板电脑和游戏机——这些智能设备数不胜数。
本书讲述的是，在这个网络无处不在的时代，如何进行前端网页开发。它将让我们学会如何带着多设备世界的远见卓识，去开发一流的网站、一流的应用程序，以及任何建立在开放网络上的技术。这不是一本教你使用移动网站或智能电视应用程序的书，而是一本关于当前和不久的将来网络技术最新发展动态的书，它能提高我们创建网站的能力，帮助我们创建出在任何设备上都能有最佳体验的网站。
因为人们往往在同一时间使用多种设备，所以，区分一个用户到底是“手机用户”还是“平板电脑用户”的做法会误导人。2012年，谷歌进行的调查研究表明，81%的参与者一边看电视，一边使用他们的智能手机；66%的参与者，一边使用台式机，一边使用智能手机。这种同时使用多种设备的行为被称作“同时放映”。
与此同时，90%的参与者在一个设备开始一项任务，却在另一个设备上完成。例如，他们在智能手机上浏览购物网站，然后，在购买的时候换用笔记本电脑。这种根据执行任务的不同，而相续使用不同设备的行为被称为“随后放映”。
换句话说，用户会使用两个或三个不同的设备来访问您的网站，虽然每次他们访问的目的会略有不同，但是他们每次想要访问的信息却是不变的。
有一件最重要的事情，我们需要一直牢记：对于我们网站的访问者，哪些方面是我们所不了解的。例如，我们不知道他们在哪里—我并不是指地理上的，因为我们可以使用GPS来定位他们。我的意思是，我们不知道他们是在家里，还是在公司，或是在公交车上，又或是在其他什么地方。也就是说，对于网站访问者访问我们网站时所处的环境，我们根本一无所知。
关于这一点，我们推定的共同原则是：人们在外出时匆匆忙忙，一般都使用手机，并且经常使用3G的低带宽连接。然而情况并非总是如此: 人们也经常在家里使用手机，使用性能良好快速的Wi-Fi连接。有时，即使是通过连接方式也不能判断网站访问者所处的环境，因为如果周围很多人同时使用宽带，带宽就会减小，信号就可能不好。事实上，在很多情况下，3G（或是许多国家的4G）网络确实能提供更好的连接。
此外，我们还推断：台式电脑比手机更强大。但是，这种情况不会持续很久了。具有快速处理器的双核手机，或者甚至四核的手机正在上市，在一两年内，谁能预测它们会变得多么强大。你看，就几年时间，平板电脑和笔记本电脑的杂交物（例如，许多Windows 8设备）现在比笔记本电脑的功能还更强大。
对于屏幕大小的问题，我们的推断是：像电视这类大屏设备，观众想要从中获得更丰富的图形环境；但是，屏幕宽大并不等同于处理器功能强大，也不等同于网络连接快速。很多网络电视处理器的功能还比不上智能手机；并且和其他任何设备一样，网络电视的连接速度也变化无常。此外，尺寸太大还会影响设备的便携性。设备越便于携带，我们越难确定它的应用环境。
实际上，这才是第一原则：我们不能去做推断。可是，如果把这作为第一原则，我就会打破自己的规则。
在本书中为了避免重复，对于几种常见的应用环境，我将使用它们的简称。虽然这几种应用环境并不一定是最常见的情形，但我认为它们普遍存在，很有必要使用简称。例如：手机用户没有超级快速的互联网连接。通常，手机用户在家里使用超级快速的光纤连接，通过2英尺外的清晰Wi-Fi信号来播送；但是，当手机用户出门在外时，却恰恰相反，也确实如此，他们转而依靠很弱的3G信号（我就经常这样）。因此，很多智能手机在生产过程中就考虑到这种情况；它们任何时候都限制可用连接的数量，以至于不会狼吞虎咽地获取宝贵的数据，因为用户是要为此付费的。
同样，一名台式计算机用户很可能直接使用宽带连接，因为它能提供快速的数据传送频率。当然，这么说并不一定都正确，例如，在偏远地区，宽带速度极其缓慢，很多人仍然使用拨号连接。但是，前一种情形还是很普遍，足以让我给它一个简称。
我在整本书中使用诸如此类的简称，仅仅是为了避免一遍一遍地说明和重复，但我不能竭力鼓吹这种想法—当你创建或规划网站或是应用程序时，你不能也不应该认为这些推断是最重要的。
你面临着一个挑战，那就是：你不知道网站用户是谁，他们在哪里，他们正在做什么，或者他们做这件事时使用的是哪种设备。尽管你能获取其中的一些（虽然不是所有的) 相关信息，但是，对于全面的应用环境，你完全不清楚，并且上述问题还会因人而异而发生变化。不过，有一件事情能相当确定：用户要么想要访问你所提供的信息，要么想要查明你所提供的信息不是他们需要的。不管是那种情况，他们都希望能快速的找到答案。
因此，网站的性能至关重要。无论是上下班高峰期间，用户使用智能手机查找下一班回家列车的相关信息；还是蜷缩在家里的沙发上，浏览购物网站，用户都想要尽快地完成这些任务，并且使用距离最近的设备，这会让他们感觉更高效（这被称为“获取时间”）。
你的网站要很快捷，无论它用什么设备来显示，都要让人有速度快的感觉。这里的快速，不仅仅是指技术性能（当然，这极为重要）上的；还涉及界面的响应能力，以及用户是否能轻松地进行网站导航，找到他们所需的信息来完成任务—因为他们本来就是为了完成这个任务，才来访问您的网站。
我开门见山地告诉你，本书将不涉及每个平台的优化设计。我不写这方面的相关内容，是因为这方面的知识我也不懂。我之所以成为一名开发人员，而不是设计师，是有原因的：这是因为当我使用Photoshop时，结果看起来像戴着拳击手套来使用鼠标。
在本书中，我将会教用户现代编码技术和方法，依靠这些知识，用户不但可以建立跨多个设备运行的网站，而且可以量身定制网站，以适应单一类型的目标设备运行（我会在第1章中详细讲述这些技术，所以在此就不细说了）。
以下两点非常重要，当您阅读本书时要牢记在心：
作为一个网络开发人员，应该做到：随时接受新的知识。例如，了解网络标准的最新发展动态，你要好奇，要爱玩，要对所有的网络动态了如指掌。你很幸运，可以从事这个知识共享的行业，能够追随那些本书中提到人，能够访问那些本书中提到的网站；或者，你也可以找到自己的消息来源，例如上Twitter，或是上本地网络开发社区的meetup。只要保持积极参与就对了。这是从事网络开发最激动人心的时代，想要真正把握住这次机会，你需要投入额外的精力。
首先，为你计划去做的事情画一幅更雄伟的蓝图。如果你正在创建一个网站，不要仅仅想着“创建一个适合网络和移动设备的网站”就行，而应该想想如何使网站在任何设备上都能运行。此外，还要考虑人们将如何使用您的网站；人们想要从网站中获取些什么；以及作为一个开发人员，你如何帮助他们实现目标—不仅仅是当前的目标，还包括将来的目标。在过去五年里，我们已经见证了网络的重大转变—谁能预言，五年后，它又会有哪些变化。
在这一章里，我将谈论一些必要的网络技术，一些非常有用的知识，以及多设备网络工作的要求和规定。本章的目的确保我们的起点相同，这是一种比喻—我知道我们现在确实起点相同，因为你正在阅读这段话—但下一章才真正开始涉及技术内容。
如果读者渴望马上学习这些技术，则可以跳过这一章并直接阅读第2章。但我强烈建议读者不要这样做。因为第1章含有一些有趣且实用的背景信息。此外，技术含量较少的内容使我有机会表现我那令人惊叹的幽默感。
在整本书中，我会经常提到网站，但这个术语只是一个方便的简称，其目的是避免重复。本书所讲述的功能，与网站、网络应用程序和打包的HTML混合应用程序相关—简而言之，就是任何可以使用HTML、CSS和JavaScript的东西。但是这样太过啰唆，所以，除了需要作更具体说明的情况，大多数时候我只是简单地使用“网站”一词。
此外，当我提及呈现网页或应用程序的软件时，我会使用“浏览器”或“用户代理”。这样做的目的同样是为了避免重复。再重申一次，我正在努力地避免重复。
在我开始谈论技术之前，我首先要说明一下对你的一些推测，以及有效使用本书所需的知识。首先，让我们来讨论讨论你是谁。你有可能是专家，或是你想成为专家，又或者你是个喜欢使用网络的人；不过，无论你是谁，你一定具备HTML、CSS和JavaScript的应用知识—可能还没达到深入、精通的水平，但却无需我向你解释它们的概念或写法。
或许你刚刚学会创建网站并需要更新你的技能，或许你正在学校学习网络开发并想学习额外的课程，又或许你是一个从业的开发人员，但是没机会了解网络编码的最新发展。无论你属于哪种情况，我推断，你都想要了解如何运用现代方式创建网站，因为这种网站能跨多设备运行，并且支持所有设备的维度和功能—这无疑是你挑选本书的原因。
这本书需要你具备网络开发的相关知识。它既不是一本初学者指南，也不是一本高级读物。更确切地说，本书是对当前的、最新的和不久将来的HTML、CSS、JavaScript以及相关技术特征的点滴见解，并着重讲解了那些最有助于在多设备世界里创建网站的技术。
此外，你还要具备一些基础知识，你需要了解浏览器上的开发者工具，但不用达到超级熟练的程度。在一些JavaScript的例子中，我把结果输入工具中的开发人员控制台，这是一种标准化的工作方法。如果你使用的是Chrome、Firefox、IE9 +、Opera和Safari这类本机工具，或是Firebug之类第三方工具，操作方法也一样。例如，我可能使用这样一行代码：
结果将会在控制台中显示。图1-1所示为它在Firebug中的显示。正如我在前文提到的，我不会经常使用控制台或开发者工具，但如果你不知道如何使用它们，那你真的应该现在就花时间来学习。
图1-1：在Firebug控制台显示的消息“Hello World”
当你读到这段话时，无论是已经具备所需的所有知识并准备继续前进，还是你已经做好准备并试图蒙混过关。不管是哪种情况，接下来，我们将开始讨论技术相关的内容。
关于HTML5到底是什么，还是有些模糊不清。这是我们大家（我们大多数人，大多数用户）对它的理解与其真实的含义有所偏差。HTML5不是一个用于我们创建网站的全新平台，不是一个富多媒体环境，也不是一个可以跨多设备运行网站的工具。总体来说，HTML5是一种尝试，不断制作网站以满足我们当前使用方式的需求，它由最早的简单文本链接网络转变而来。
大多数人认为，HTML5是一系列相关关联并相互补充的技术的集合，这些技术包括CSS3、SVG、JavaScript API等。尽管一些研发人员更愿意使用这种广义定义，但我真的不喜欢把所有的技术混为一谈，所以，我更情愿把HTML5称为网络平台。实际上，我更喜欢Bruce Lawson对它的定义—激动人心的网络新技术（NEWT）。这既是一个很酷的简称，并有一个可爱的标识。但我不得不承认，在这场争论中，我的想法没有得到认可，网络平台这个名称也没有得到采纳。
这个网络平台是巨大的。http://platform.html5.org/列出了所有与该平台相关的技术；这个目录确实相当长，其中所包含的内容远远超出了本书的范围。
所以，我将着重介绍核心内容，即那些足以用来编写跨多设备运行的网站的技术，包括HTML5、CSS3、SVG、Canva和一些设备API。当书中用到这些术语的时候，我会逐一解释。但是，首先我要对HTML5和CSS3的含义作更详尽的说明。
HTML5是HTML4.01的迭代，它在HTML4.01基础上添加了一些新功能，废弃或者删除了几项旧功能，并且对一些现有的功能进行了修改。编写HTML5的目的一是为了规范许多开发人员已使用多年的常见程序编辑和设计模式，二是为了满足现代网络的需求，这是因为，现代网络与应用程序的相关性和它与文档的相关性是一样大的（也可能更大）。事实上，Web Applications 1.0是HTML5的前身。
HTML5的新功能包括建立可提供含义和可接入性的文档，我会在第2章中介绍。HTML5还会有一系列的新窗体功能和UI控件，使得应用程序的生成变得更加简单，这方面的内容可以翻阅第8章。此外，HTML5还包括依然被很多人用来相互联系的本机（无插件）视频，第9章将讲述这个话题。
如今有两个主要群体正对HTML5产生着影响，他们的角色和职责大致是这样的：WHATWG（读者不需要知道这个首字母缩略词是什么意思），这是个由浏览器生产商们和“感兴趣各方”组成的财团，通过最重要的规格编辑器Ian Hickson，它创建了HTML的“现存规范”—这基本上是一个无版本的规范，它能不断地合并新功能、更新现有功能；另一个是W3C（万维网联盟），即万维网的标准机构，它的职责是获取无版本规格的快照，来创建编号了的版本，以使浏览器供应商能确保实现的兼容性。
事实上，情况比这要复杂些，另外，这还涉及很多政治争论。只有标准的书呆子才会对这些争论感兴趣，它们不会对读者有任何的实际影响。
W3C提议，虽然眼下还不能确认，到2014年时HTML5应当进入推荐状态—即“完成”状态；随后，在2016年推出HTML5.1。它还提议，HTML5应当分解成单独的模块，这样，就可以在不同的模块上同时进行操作，而不用担心影响到整体的速度。然而，这些对读者来说真的无关紧要，你仅仅需要知道的是当浏览器里何时会包含HTML5，以及何时可以使用HTML5。
作为一个具备HTML基本使用知识的人，你要熟悉基本的页面标记。但是对于HTML5，情况稍有不同—虽然不多，但值得提及。下面的代码块是本书中所有例子的基本模块（也可以参考范例文件template.html）：
大家应该对这个例子中的大部分代码比较熟悉，但我想讨论两个兴趣点。第一个兴趣点是Doctype。它是一个残余物，因为在过去，你不得不告诉浏览器所写的是哪种文档类型（strict HTML、transitional HTML、XHTML1.1等其他文档类型）。然而，在HTML5中，就没有必要这样做了—因为HTML5只青睐一种HTML—所以就不再需要Doctype声明了。理论上就是这样。
现代浏览器往往有三种渲染模式：怪异模式（quirks mode）模仿IE5的非标准渲染，这是为了满足兼容旧版网页的需求；标准模式（standards mode）是现代的标准兼容行为；近乎标准模式是添加了稍许混杂的标准模式。
想知道使用哪种模式，浏览器就要求助于Doctype。我们总是想要使用标准模式，所以在HTML5中，Doctype是能触发标准模式的最短可行路线：
第二个兴趣点是meta标记，它也是标准HTML5模板所做的另一个更改，用来表明Unicode字符范围。使用Unicode字符可以呈现页面上的文本，而UTF-8是一种被万维网普遍默认使用的Unicode字符，所以大多数情况都会使用UTF-8。meta标记使用charset属性：
确实可以这样：如果客户要求“用HTML5来创建网站”，则只需更新那两个标记，然后向他们收取一大笔费用。不要真这么做，我只是开个玩笑。
其实，我本应该涵盖很多其他模式，但是为了清晰和简洁，我把它们都省略了。如果想要了解更多模式，则可以访问深受用户欢迎的HTML5 Boilerplat网站。这里提供了全面的模板，读者可以仔细阅读，看看这个模板有什么作用—但请牢记，只能把它当成参考，不要一字不差地生搬硬套。
除了对核心模板的更改外，HTML5还有一两个新的最佳实践，读者应该考虑去实现它们。开发人员利用许多不同编写代码的方式来编写HTML5，当然，这些方式不应该被当作一成不变的规则，但在我看来，它们会使代码易于编写和维护。
HTML5的第一个最佳实践是，用户不再需要使用type属性来调用最常见的外部资源。在使用HTML4.01或者XHTML时，我们不得不为每个link、script或style标签声明类型：
但在万维网上工作时，CSS和JavaScript事实上是使用这些标记的默认资源类型，所以每次都将它们写出确实有一点冗余。因此可以立即删除它们，这样不仅浏览器能更好地理解代码，而且代码也能更整洁一些：
只有在不使用默认的CSS或JavaScript时，才需要使用这些标签。例如，某些版本的火狐浏览器具有最新版本JavaScript的实验实现。并且，为了安全起见，当用户想要使用最新版本JavaScript时，只需要在type属性中加上一个标记：
HTML5对语法也非常宽容。无论是使用所有的小写字符， 或是引用属性值，还是喜欢关闭空元素，HTML5都很乐于分析和理解它们。因此，以下三条代码的作用是相同的：
注释：
当属性值有多个值时，就需要使用引号，例如类名列表。如果属性值包含某些特殊字符，则也需要引号。
某些被称为布尔值属性（Boolean attribute）的属性，只有真或者假两种值；除非另有指定，否则它们被推定为以“真”这个值存在，所以用户不需要提供一个值—除非使用的是类似XML的语法，那就必需提供值，在这种情况下，需要使用属性本身的名称。这就意味着，以下两者是等效的：
我自己的偏好是全部使用小写，全部引用，但我不喜欢关闭空元素：
在整本书中，我使用的都是这种模式，因为我觉得这样更简洁，并且更易于使用。此外，我使用的文本编辑器具有语法高亮显示，这使得代码变得清晰，方便浏览。读者可以随心所欲地使用自己想要的模式，但必须保持一致，以确保可维护性。
正如HTML5对应HTML4.01一样，CSS3对应的是CSS2.1。CSS3是对一些现有CSS2.1功能进行标准化的进化迭代；因为在不同浏览器中，这些功能的执行会略有差异。另外，在这个网络发展的新时代，网络浏览器可以被嵌入任何设备，所以CSS3还引入了一套全新的功能，使得CSS能符合新时代的要求。
改造浏览器的第一类CSS3功能在很大程度上是视觉效果上的，并且，这些功能基于开发人员已经使用多年的编辑程序：使用任何来源的字体、圆角，并在文本和框上放置阴影。登录之后是一系列新的选择器，这些选择器能使文件寻访式样变得更容易；此外，它们能产生更动态的效果，如2D和3D的转换以及过渡动画。
除了许多光彩夺目的视觉效果，CSS3的真正革命来自于媒体查询。媒体查询是一种语法，使用这种语法，就可以根据浏览器的尺寸和功能，为浏览器提供样式，这是迈向多设备式样的第一步。第3章会讲到媒体查询，还会讲到CSS的一系列其他属性，这些属性对于创建响应式和适应式网站非常有用。
CSS还面临另一个重大挑战：如何解决布局的问题—即要使布局能够真正具备支持被用户代理查看的功能。这些功能包括动态用户界面属性和CSS控制网格系统。在第4章中会有更多相关内容。
不同于CSS2.1，CSS3不是一个单一的规范。在CSS2.1中，一切都放在同一个文档里描述，这种行为导致了文档太大且太复杂。相反，CSS3是模块化的，它是一系列更短更特定的规范，可以由浏览器通过模块化的方式来实现。和使用HTML5一样，如果打算等到CSS3“准备就绪”再使用它，那这种想法就太愚蠢了，因为某些模块将会很快就绪并实现，而另一些模块需要等待很长的时间。
CSS模块有级别数字，这些数字可以显示它们经历了多少迭代；有些模块已经到了级别4，这些级别4模块的可以先于级别3的模块实现。然而，这并不意味着，有一天我们会迎来CSS4。这种情况是不可能发生的。因为CSS3是一个简称，它表示“任何比CSS2.1更新颖的东西”，总有一天，这种区别将被摒弃，一切都将只是CSS。
当浏览器以实验或予标准的方式来实现功能时，为了能确保安全，避免兼容性问题，浏览器往往使用带有规范化属性名称的供应商特定前缀。例如，当CSS Apes模块提出了名为“gorilla”的新属性，Firefox和WebKit都在对这种新属性进行稍有差别的实验性的实现。可是，新属性在两个浏览器中产生的效果是不同的，所以，如果Firefox和WebKit都使用该属性名称时，通常会在属性名称前加上供应商前缀以避免一些潜在的冲突：
供应商特定前缀本是一个伟大的想法，但事实上，情况变得有些混乱。和其他方面问题一样，一些前缀的属性被开发人员如此广泛地使用，以至于其他浏览器厂商也感觉有必要使用它们竞争对手的供应商前缀，这样做很公平，但却让整件事变得有些荒谬。
浏览器厂商正试图让这个系统处于他们的掌控之中，但有时，使用供应商前缀属性会难以避免。大多数情况下，在我的代码示例中，我都使用无前缀属性。
如今，使用一些帮手为CSS开发助一臂之力，成为了非常时髦的事儿，尤其是致力于大型开发团队或是大项目的时候。通常，这些帮手以框架或预处理器的形式参与进来，并且往往两者同时参与CSS开发。
框架是一套预先定义的CSS规则，使用这些规则可以使开发更快速。它们通常包括版式和窗体，很多时候，还包括布局模式。Blueprint.css是一种非常珍贵的老框架，被用于许多知名网站；但目前流行的框架是Twitter推出的Bootstrap。Bootstrap提供了许多预先格式化的布局、排版和表单选项，以及一系列可重用的组件，甚至还提供JavaScript的扩展性。
预处理器是运行于服务器端的程序，它使用CSS类语言来提供扩展语法和简写语法；因为CSS类语言在生成时，可转变成正确格式化样式表。这些扩展不但有节省时间的功能，如变量和嵌套的规则；而且还有自定义功能，它们赋予用户难以置信的权力。在预处理器竞争中，Sass最受欢迎，而LESS紧跟其后，成为前者最主要的竞争对手。
虽然在现代网络开发中，框架和预处理器两者都有各自不同的作用，但在本书中，我不会讨论或使用它们。因为，我教授的是更基本的语言，同时也是它们两者所依赖的语言。
现在，读者应当已经了解多设备网络非凡的广泛性和多样性；另外，在这些设备上运行的浏览器范围也相当广，甚至在各式各类的浏览器中，还有各种版本和实现（我希望你已经明白这一点，因为序言中大部分的内容都在试图说明这一点）。因此，本书中所提到的一些功能有可能还没实现，或有可能在实现方式上略有不同。
对于每个新功能，我都将它们视为完全实现，而不涵盖每种不同级别的实现水平。另外，我还在附录A中介绍了这些新功能的实际实现。
此外，甚至最前沿的标准提案也会发生变化，即使是当某些浏览器中已经进行了试验性实现（这本书还没写完时，第4章中的网格布局模块就已经被更新）；所以，当读者读到这本书时，本书中的一些语法可能已经过时。把不断演进的标准拿来用纸质出版，就会遇到这种风险。但是，我试图通过关注那些可能发生变化的功能，并在同步网站列出一个勘误更新表，来尽力降低这种风险。
尽管大多数实现水平往往集中于台式电脑和笔记本浏览器，读者可能还是想要了解功能的实现水平。读者可以密切关注以下几个在线资源：“Can I Use...”显示了大量技术在大众化浏览器的最近、当前和未来版本中的支持水平；而HTML5 Please显示了通常使用最先进功能的安全水平，可大多是CSS3和JavaScript（这就是为什么我有点讨厌HTML5 Please这个名称的原因）。
The HTML5 Test网站不但告诉你浏览器支持多少种来自HTML5规范的功能，而且十分有效地记录了跨多种浏览器（包括电视和游戏机浏览器）和设备的实现水平。此外，在此网站上，用户还能对多达三个不同浏览器进行并排比较。然而，此网站仅仅限于单一的HTML5支持。
对于目前网络设备的现状，测试是确保所创建网站是否能跨多个设备运行的唯一方法。测试一直贯穿着整个项目，从开始到结束，都要抓住任何机会进行测试。如果规划的是一个多设备项目，那么，在整个项目中，多达40%至50%的时间将会用来测试。这是个很严肃的问题。
如果找不到实际设备的代替品来做测试，则可以着手建立一个库，并放入尽可能多的设备。如果单位附近有其他机构，还可以考虑集中资源，以获得范围更广的设备。许多城市都在组建设备实验室，其中有各种设备可供任何人使用，这些设备均由当地开发人员和公司捐赠。你还可以在线搜索最近的实验室，或者，考虑在公司或工作的地方参与组建一个实验室。
不要只对手机和平板电脑进行测试。如果网站的目标对象是年轻爱好者（研究表明，大约四分之一的美国青少年使用游戏机浏览器上网），则应该考虑测试游戏机浏览器；或者，如果网站瞄准的是休闲市场，则应该对电视设备进行测试。
如果无法使用实际设备，则可以使用一些专用的工具，大多数（也可能是全部）操作系统创建者和/或设备制造商都有可供免费下载的、设备模拟器的软件开发工具包（SDK）。在手机和平板电脑领域，安卓、Windows Phone和黑莓都有软件开发工具包，毫无疑问，除了它们之外，还有更多其他的品牌。在苹果的App商店里可以找到苹果公司的Xcode，它有iOS模拟器功能，在测试中，可以在设备和操作系统版本之间进行切换。
一旦设置好，许多这样的软件开发工具包还允许USB连接物理设备，通过配对的浏览器来做调试。但是，还有个更简单易行的方法—使用Opera的手机仿真器，一旦将其打开并连接到Opera的桌面版本，就可以使用在桌面上的开发人员工具来调试移动设备上的页面。如果需要使用WebKit—它主导着多设备引擎，为什么不用呢？—名为weinre的软件可以把台式机上的Chrome或Safari连接到安卓、iOS或黑莓模拟器上。
Adobe有一个叫做Edge Inspect的截图查看器，可以让任何使用Edge Inspect应用程序（眼下在iOS和安卓系统上可用）的设备与Chrome浏览器同步。这样，用户就能同时在许多不同的设备上预览网站，并用网络检查器进行远程调试。
本章提供了现代网络开发所需的所有入门信息。在这章里，我消除了HTML5的歧义，并把读者引入网络平台；读者可以了解HTML5的用处并学习如何编写HTML5。此外，我还简单介绍了CSS3。
本章的关键信息在后半部分：第一，始终保持更新网络平台功能在常见浏览器中的实现水平；第二，测试，测试，再测试，进行更多的测试；当你觉得没有更多的测试要做，还要再次测试。然后，再做一次测试，祝你好运。
已经解释很多了！接下来，让我们卷起袖子开始工作吧。
还记得那个关于在沙子上建房子的人的寓言吗？或是用秸杆和棍子做房子的小猪？他们都是失败者。他们失败的原因在于没有认识到结构的重要性。
想创建出色的网站，不但需要良好的结构，而且需要在用HTML开始的网站上进行。用什么方式给网页加标记将影响到网页是否具有坚实的结构，这不仅对眼下的结构有影响，对将来也一样。在任何应用环境下，无论是创建一个极具交互式的网络应用程序，还是一个混合的移动应用程序，又或是一个宣传册式的单页网站；建立健全的结构是工作的重点。坚实的结构不但能使网页的编写和维护更方便、更容易；而且能使浏览器和其他用户代理了解你的网页。此外，结构严谨的DOM可以提升性能，使语法分析对浏览器来说变得更容易，并且，它需要的内存也较少。
除了结构简单之外，还需要语义丰厚。为网页内容赋予额外的意思可以产生立竿见影的效果：查寻引擎可以更容易理解并获取数据。虽然更长远的好处还有待发现，但很可能某一天我们就知道了。
HTML5和相关的技术使一切变得简单。使用HTML5现有的良好实现方法，创建出的网页不仅结构坚实、语义丰富，而且执行力强、数据丰富。
一系列新的语义元素是HTML5的主要新功能之一。当用标题、列表和段落来标记科学文档时，语义元素能从词根扩展。大多数扩展后的新元素能为页面提供更好的结构；还能为开发人员提供更多的选项来标记各领域内容，而非仅限于使用带有一个相关联id或类的div。
举个例子，在过去，开发人员可能会使用：
有了HTML5，开发人员可以选择使用：
万维网联盟的HTML5规范列出10个结构元素。其中，3个已经在HTML4中存在：body、h1–h6（为方便起见，我们把h1–h6看作一个单一的实体）、address。其余的7个新元素中，4个是所谓的分节内容（sectioning content）元素。我会在下文阐明什么是分节内容（sectioning content）元素，但首先我要介绍一下这7个元素。
article 文档或网站的一个独立部分，如论坛帖子、博客条目或用户提交的评论。
aside 页面的一个区域，它和周围的内容关系不大。它可以被视为单独的一部分，像一篇杂志文章的侧边栏。
nav 文档中的导航区域，这个区域包含其他文档或同一文档其他领域的链接。
section 内容的一个专题组合，例如书中的一个章节，标签对话框中的一个页面，或者网站主页上的介绍。
其他三个用来定义分节内容中区域的结构元素：
footer 文档或文件区域的页脚，通常包含其所在section的有关元数据，例如作者的详细信息。
header 可能是文档的标题，但也可能是文档中一个区域的头部，通常含有标题（h1–h6）元素来标记标题。
hgroup 用于一组多层次标题元素的分组，如副标题或标语。
HTML5还有一些不影响页面基本结构的其他新元素，在必要的时候，我会在书中的其他章节介绍它们。现在，让我们来更深入地了解为什么以上10个新元素会被最先创建出来。
设定这些新元素的目的是为了提供清晰的文档大纲，从而使浏览器和其他机器（尤其是像屏幕阅读器这样的辅助技术）能更好地解析文档大纲。试想，这些大纲就像文档结构图，显示其内容的层次结构。在该层次结构中，标题最重要，它与内容区域是父子关系，等等。
在HTML4中，这项任务通常使用从h1到h6的标题（header）元素来完成：h1是页面上独一无二且最重要的标题；h2元素通常是h1的直系子标题，以此类推。下面的示例在HTML4中相当常见：
嵌套标题以这种方式创建该文档大纲：
Great Apes（类人猿）
a．Gorilla（大猩猩）
i．Eastern Gorilla（东部大猩猩）
ii．Western Gorilla（西部大猩猩）
b．Orangutan（猩猩）
注释：
类人猿迷会注意到我遗漏了矮黑猩猩和黑猩猩。这样做是因为考虑到空间和清晰度，而并非出于任何偏见。
我创建的这个结构视觉感官强，以这种方式使用标题来创建文档大纲被称为隐式分节（implicit sectioning）。
在HTML5中，分节内容元素更早出现，在大纲中创建节（sections），而非这些节（sections）中的标头（headers），这被称为显式分节（explicit sectioning）。所以，为了在HTML5中获得相同的类人猿标记结构，则需使用以下代码：
最后产生的大纲会和HTML4的大纲相同，因为每个section元素或article元素在大纲中创建出一个新节（section）。section和article就是我前面提到的分节内容元素，还有另外两个分节内容元素是：aside和nav。
大纲的每个节应该有一个标题—任何标题都行。在我的示例中，我全部使用h1标题，但是，使用什么级别的标题并不重要，因为分节内容是用来创建新节的。我甚至可以通过掷骰子的方式得到不同的数字，从而决定每个标题使用哪个级别，以区别于其他标题。
注释：
我在这里有点油腔滑调了。读者可以（而且应该）仍然使用从h1到h6的分层方式，因为这有助于向后兼容性，并会使样式设计更容易。
标题（或可能一个包含标题的hgroup元素）和每个节都可以包含不同的header和footer，还可以包含进一步的节和分节根（sectioning root）。这些根是像blockquote和figure这样的元素，它们可以有自己的大纲，但对整体的文档大纲不起作用。
如果我这么解释读者还不是很懂，并不能说明你没认真阅读前面的内容。对每个分节内容元素的作用含糊不清，这种情况非常普遍，所以，为了帮助读者根据手头的任务来选择正确的元素，HTML5 Doctor创建了一张流程图（见图2-1）。
一张流程图。它可以协助选择元素。如果你善于根据说话的语气做出判断，那么可能已经开始感觉到，我并不是新HTML5结构元素的粉丝。如果真是这样，那你就猜对了。
正如前面那个小节所暗示的那样，我的挫败感越来越容易被察觉，要想掌握其中的一些新元素，可能相当富有挑战性，特别是在理解article和section之间区别的时候。概括来说：一个section可能包含多个article和多个section，并且，一个article可能包含某些section或article，此外，它们两者都会在大纲中创建出section。article和section两者之间是有区别的，但是，没有人—甚至HTML5规范的创作者也没能—设法给出一个清晰简洁、方便开发人员记忆的定义。
图2-1：如果不知道使用哪个区域元素才是正确的选择，
HTML5 Doctor会告诉你答案。
在Luke Stevens《The Truth About HTML5》（CreateSpace,2012）这本书中，Luke Stevens对article的隐晦描述是这么评价的：
如果HTML5规范把事情留给你来解决，那它就失效了，因为HTML5规范的全部意义就在于确切地指定你应该做什么。但是现在，它的解释是开放的，并且，到现在为止，还没有带来明显的益处。它是对现有功能的重复……
我太同意他说的话了。我预测，除非可以找到更加清晰的定义，否则，很多人会严重滥用这些元素。
出于技术的原因，我建议在开放的万维网上不要使用这些新元素。首先，较老的IE版本（IE8和8以下版本）根本不支持新元素。为了使老IE版本的浏览器识别出它们，就不得不先用JavaScript来创建它们。当然，这相当简单，只需使用条件注释来实现受大众欢迎的HTML5Shiv：
但是，这样做会使访问者对JavaScript产生依赖。对于每一个使用旧版本IE的访问者来说，他们的JavaScript都会失效，使得不能看到任何内部含有新元素的内容。虽然，这样的用户可能仅仅占很少的一部分，但是可访问性应该意味着每个人都能看到你的内容。如论坛帖子、博客条目或
其次，也是最重要的一点，目前没有可用的浏览器支持新的大纲算法（JAWS屏幕阅读器支持，但总是出错）。所以，你所有的努力并没有真正起到作用—当然，这一点在未来很可能会有所改变。
当然，是否要使用新结构元素，最后还得自己来决定。这不是强制性的—你可以和以前一样，仍然使用div元素。其实，我发现，很难推荐大家来使用这些新元素，除非有人已经为阅读HTML5规范做好了准备，并且能充分理解新元素在文档大纲中如何确切地起作用—而且，在他所处的工作环境中，老式浏览器不会成为一个问题。因为这些东西还处于编写阶段，我将寻找另一种方法来讲解页面结构。幸运的是，正好有一种方法能派上用场，它就是WAI-ARIA。
创建网页易读性倡议的无障碍的富因特网应用程序（Accessible Rich Internet Applications）组件（WAI-ARIA）的目的，就是为了解决可访问性的短缺。随着网络超越简单的文档标记，进入一个应用和交互的时代，可访问性短缺就产生了。
下面，我们来看看WAI-ARIA是如何做到这一点的。首先，创建一些HTML扩展（或者，事实上任何基于DOM语言的扩展都可以，例如SVG和XML的扩展）；其次，允许开发人员开发能识别交互式内容的浏览器和辅助技术。例如，如果有一个链接，单击它时，就会使用JavaScript创建一个屏幕上的对话框叠加，但没有办法让浏览器识别它；这个标记看起来就像一个标准的链接：
因为事件附加在使用脚本的链接上，所以，对于这里发生的事件，屏幕阅读设备没有任何信息，也就不能告诉用户事件的来龙去脉，用户对该事件仍然一无所知。WAI- ARIA引入一个新属性—aria-haspopup，只要出现上述的情况，它就会告诉用户到底发生了什么：
用户可以使用一系列的新属性，其中之一，就是所谓的landmark role。这些属性能使得屏幕阅读器和其他可访问导航设备能识别页面结构，这样的话，用户就可以轻松地找到文档。在某种程度上，这种解决方案履行了结构职责，而结构职责，本应是新创造的HTML5元素所应该履行的。
注释：
如前所述，眼下，一些用户代理和辅助技术不能正确解析新HTML5文档大纲，所以，使用landmark role可能会对提高向后兼容性有所帮助。
landmark role的应用使用了具有一系列预先定义值的role属性。这些值并不直接对应HTML5的结构元素，但它们大多都非常的相配。比方说，如果想要定义包含网站一般信息的文档区域，例如标识和品牌标语，则需添加banner：
banner大致类似于header元素，并且在大多数情况下，可以用它来代替header元素。
一些landmark role在HTML5中并没有对应物。在HTML5中，没有合适的元素来指明网页的主要内容在哪里，所以，要想让屏幕阅读器知道关键内容的位置，我们可以使用main：
WAI-ARIA规范所定义的8个landmark role：
application 显示页面的一个区域，这个页面是一个交互式应用程序，而不是一个文档。
banner 正如前面提到的，说明一般的网站内容，可能包含在标头中；在这种情况下，类似于header元素。
complementary 显示主要内容的相关内容，而不是主要内容的组成部分，像一个侧边栏；它类似于aside元素。
contentinfo 提供法律指令等文档信息。通常位于页脚，所以，在这种情况下类似于footer元素。
form 显示除搜索之外的任何形式，例如，联系人表单。
main 显示文档的核心内容。
navigation 包含导航这些文件或相关文件的链接组，类似于nav。
search 显示专门用来搜索这个网站或其他网站的格式。
landmark role不但可用于导航，而且有助于提供语义值，它还能为CSS制作便捷的样式钩子（hook）。使用确切属性值选择符（Exact Attribute Value Selector），就可以轻松地应用规则，例如，用在页眉中：
这个选择符几乎在所有过去10年的浏览器（我所知道的）中都已经实现，所以，除非使用一个非常旧的或一个非常基本的浏览器，否则确切属性值选择符就是有用—但请注意，复杂选择符可能对页面下载速度有不利的影响。
在继续探讨如何以不同的方式为页面添加更深层次的丰富含义之前，让我们先停下来问问“究竟为什么要使用语义？”我的意思是，我们通常都使用div元素来标记一个页面，难道这样做在本质上是错误的吗？ (例如，使用以下代码块)：
Divya Manian在一篇辩论性文章“Our Pointless Pursuit of Semantic Value”中也讨论了这个问题。在文章中，她认为，对于大多数人来说，过于强调语义标记就是浪费时间：
标记结构内容，但是，和我们教科书上所说的相比，选择标签所起的作用，实际上要小很多……
然而我要说，对于使用正确的语义元素，有两个很好的理由。第一，也是最平淡无奇的一个理由，使用正确的语义元素能够帮助我们制定一个约定俗成的标准，让编写的代码具有良好的可维护性。众所周知，如果使用语义元素，你的同事或继任者将能够在你的代码上工作，而不用学习你的名称方案。反过来也是一样的：如果你接手他人的代码，他或她如果按照标准来编码，你就会知道代码的情况到底如何。
还有另一个更深奥的原因，使用语义元素能增加内容的相关性（aboutness）。简单地说，相关性是衡量意义质量的一个标准，内容的相关性描述了内容的本质。
下面，我们来对这个原理做一个简单的说明，假设有一个网页，其中包含W.H.Auden的一首诗《葬礼蓝调》：
他是我的南北，我的西东。
是我作息的意义。
是我的日夜，欢唱谈话的内容。
我以为爱会永恒不朽……
……我错了
虽然我们知道这是一首关于死亡的诗，但是“死亡”这个词本身并没有出现在诗中。索引页的搜索引擎如何才能知道这首诗是关于什么主题，并且在该主题的搜索结果中找到它？当搜索引擎浏览该页面的链接文本时，在“阅读更多”的链接文本中没有提供上下文，可在 “W.H. Auden关于死亡的诗”的链接文本中提供了一些相关的信息检索。
正确使用语义元素能带来同样的好处。如果页面上所有的内容都用div来标记，内容就会没有上下文；反之，如果正确使用语义元素来标记页面，内容就会有上下文：
现在，哪些是重要标题，什么是主体内容，就非常清楚了。所以说，通过正确使用语义元素，可以赋予内容一些信息检索的相关性。
除了正确使用语义元素来标记内容，还可以使用很多其他方法来增加文档的含义，这些含义是机器所需的、而非用户所需（通常称为结构化数据）。例如，可以使用定义模式（微格式）中现有的属性和元素，或用新属性（RDFa和微数据）来扩展HTML。接下来，我们将一一对这些方法作简要介绍。
微格式由一群草根开发人员联合创建。通过使用现有属性的标准化标记模式，他们给内容添加上了更多的属性。微格式最大的魅力不在于它是HTML的扩展，而在于它使用当前的开发方法来工作。它既是一种设计原则，也是一组标准用法模式。
微格式多种多样，有相当复杂的微格式，也有极其简单的微格式。下面这个例子，可能是最简单的微格式：
这种微格式被称为Rel-Tag微格式。关键字是rel属性中的tag，它让其他机器知道URL链接到一个在a元素里的页面，这个页面由一个标签来描述，该标签的名称是URL的最后一个路径组件—在这个例子中，“gorilla”（大猩猩）。此时此刻，我大概应该告诉读者了—以免读者还没发现—我真的很喜欢大猩猩。
虽然hCard微格式也简单实用，但相比Rel-Tag微格式来说要更复杂一些。hCard微格式用标准化的“名片”语法来标记常见用户的详细信息。例如，这个标记，可能会被用来链接某人的在线联系方式：
这个标记很好，但数据的信息检索相关性不强。虽然读者能明白，这是本人的名字，这是本人的通讯地址；但搜索引擎爬网程序（search engine crawler）很可能不会达到这样的认知飞跃。然而，使用hCard模式，我们就可以为该标记添加属性值，提供更丰富的语义：
这几个标准化的类名赋予此内容更多的意义，这样的话，机器中的程序就能找到这个内容。说得更具体一点，也就是识别hCard模式的爬网程序将会看到vcard类，并知道当中的内容包含它要寻找的信息：它知道第一链接包含该联系人的全名（fn），第二个链接包含该联系人的工作单位（org）。
当然，微格式的模式不仅仅就这些，它有很多的模式。例如，有事件模式、点评模式、地理坐标模式，甚至还有菜单模式；除此之外，还有更多其他的模式。像谷歌这样的搜索引擎也使用它来改善搜索结果。所以，你也可以把微格式用在你的网页中，要知道，这不是仅供开发人员使用的秘传。
资源描述格式属性（Resource Description Format in Attributes，RDFa）是HTML的延伸，它使用一套全新的定制属性为内容提供上下文。其主要语法被称为RDFa Core。除此之外，还有一个被称为RDFa Lite的简单子集。RDFa Core和RDFa Lite两者都依赖预定义schema（数据说明）来描述内容。
与其告诉读者上面那句话的意思，还不如举例说明（那些在剧本创作学校度过的岁月是不会被白白浪费的！）。在网络中，尤其在博客和新闻站点上，日期是一个普遍的数据。我们经常会看到，日期被这样标记：
这是一个不复杂的功能标记，但是，其唯一的语义上下文是由类名所提供。运用RDFa Lite就可以让它更有意义；另外，还可以通过使用新property属性，从而让其他的机器知道这是一个日期：
该属性的值是术语“date”相关描述的URL，它来自于一个架构，而这个架构是一个称为都柏林核心（Dublin Core）的标准化词汇表的一部分。
读者可能已经注意到，这里使用的日期并不是一种非常易于阅读的格式。这是RDFa Lite的一个缺点：所有内容必须严格使用机器可读的格式。为了提供更适合于人类阅读的内容，就必须使用RDFa Core。有了RDFa Core，通过使用content属性，就可以把一组信息给机器，同时把另一组信息给人类：
这样的话，读者看到的是元素的内容；而机器看到的是该属性的值。虽然，这就意味着要做额外的标记，但这样做两全其美。
和使用微格式一样，某些搜索引擎也使用常见的RDFa模式来改善它们的搜索结果。
通过创建被称为微数据的简单语法，HTML5解决了语义问题。根本上，微数据是一系列提供富有意义的机读数据的名称值对。和前面一样，与其设法去解释它，还不如使用这个更简单易行的方法—向读者展示它是如何运作的：
此标记创建了一个单项。itemscope属性被用于标记此特定项的界限或范围的包含元素。里面含有被称为property的名称值对：itemprop属性的值是名称—在此示例中，是“city”—而元素的内容是值—在此示例中，是“London”。最后的结果是一个具有单个属性的项：
但是，这并不局限于每一项的单个属性；我们想要有多少属性就能有多少属性：
在这个示例中，该项的属性列表将会是这个样子：
正如我们所看到的那样，此标记有点类似于RDFa；也就是因为它像RDFa格式，才可以分别给人和机器不同的值。再看看下面使用datetime属性的例子：
和使用RDFa一样，通过itemtype属性链接到内容，我们可以用预定义架构来描述内容：
我们还可以使用诸如前面提及的都柏林核心这样的架构，甚至还可以像上面演示的那样，自己发明一个构架。
微数据有一个伴随物，叫做DOM API，对提取页面中的数据很有作用，并且，它在现代浏览器中已经被相当广泛地实现。API的关键是getitems方法，使用getitems方法会返回一张节点列表（NodeList），列表中包含页面上所有的项：
从这些项中，我们可以选择一个单项，例如，想知道它包含多少个属性，可以使用properties对象：
或者，我们能发现其中一个属性的值：
读者可以去查看范例文件microdata-api.html，其中有很多相关的示例。控制台里已经存录了结果，所以，只需打开你最喜欢的浏览器就能看到。所以，我鼓励读者自己打开浏览器去看看。对于任何手边没有浏览器的读者，图2-2显示了在Firebug中存储的结果。
图2-2：控制台中显示的一些微数据API的简单探索结果。
如果你已经决定给网页添加上机器可读的语义数据，并且认为这是一个正确的选择；那么，应该使用哪种格式呢？答案当然是视情况而定。先对内容进行评估，再阅读每种数据类型的优点和缺点，最后，选择那种对你来说最好的格式。在未来，我们通常看到的是简单微格式与微数据的混合体，当然，这只是我的个人看法。由于微数据语法灵活，所以出现一种很有趣的现象：它可以同时适应微格式和RDFa。下面的示例，显示了如何使用微数据来标记hCard：
同样，我们还可以轻松地使用RDFa数据架构：
在本人看来，微数据的灵活性将会让它的使用频率越来越高。即便如此，这并不表示对于一切来说，微数据都是完美的。一些微格式，例如Rel-Tag，它本身就非常简洁、易于使用，根本没必要试图用微数据去替换它们。
一般来看，使用微数据有两个原因。其中一个原因是为了征服微格式和RDFa；另一个原因是它能给我们带来很大的优势，让我们的内容能被搜索引擎和门户网站所注意并推广。2011年，四大网络巨头—谷歌、微软、雅虎和Yandex发起了一个新的网站：Schema.org，该网站介绍了一组使用微数据标记常见模式的共享词汇。
这些模式包括评论、事件、地点、项和对象，这类经常在网络中被大家讨论的东西。举例说明，假设你正在网站上写一篇书评（我们可以随机选择一本书，并给予它不偏不倚的评论）：
这一评论实际上包含两个项：这本书的详细内容和对该书的评论。我们可以使用Schema.org中的两个词汇为这两个项提供语义上的标记。这两个词汇是Book和Review。访问相关的节，就知道应该使用哪种微数据模式。然后，上面的标记就可以更新为：
尽管现在标记变得更加复杂，但它的意义也更丰富了。你使用的每个词汇用itemtype属性中有关架构的链接来定义，而这些项被标记为预设置的itemprop值。
Schema.org特定架构继承属性的方式很有趣，它能从更广泛的架构中继承属性。例如，“书”有来自自己架构的属性，还有来自更广泛的CreativeWork词汇的属性，以及来自最高阶层Thing（真是个很棒的名称！）的属性。Thing，它具有最通用的属性。
如果我们使用Schema.org模式来对内容进行标记，所有到达该页面的爬网程序就会知道作者和书名，还能知道我们对这本书做了点评，甚至还能知道我们给了它一个五颗星的评级。如果有人搜索这本书，我们的评论就会出现在搜索结果中，与其他人的评论一道，为读者提供了对该书相当全面的概述。
这是一种在搜索结果中给予额外信息的方法，它被许多搜索引擎所使用，谷歌把它命名为rich snippets（富摘要）。当用户搜索查询时，富摘要能为用户提供更多上下文，使用户无需切换到网页，就能够更好地评估结果的相关性。图2-3是一个富摘要的示例：
图2-3：一个富摘要的示例，它能给予谷歌搜索结果额外的信息。
富摘要能与微格式和RDFa一起使用，但其首选的语法是微数据。在Google的网站管理员页面上，有大量的资料和文档可供开发人员使用，其中有一个很有用的工具，它能帮助我们测试微数据的格式是否正确。在图2-4中，我们可以看到使用该工具从在上一节创建的书评中提取出的数据。
图2-4：富摘要测试工具从已标记的书评中提取的数据。
HTML5扩展元素含义还可以通过另一种方式：使用数据属性。这些都是用户定义的属性，这些属性的值能提供元素的相关信息，而无需给予机器或人类任何额外的语义。接下来，让我们看看更详细的解释。
假设我们想输出一组数据，其中每一项都有两个值—名称和编号 （例如，独特的数据库ID）；我们想将名称显示在文档中，还想让编号可以用于脚本运行中。从目前情况来看，没有相关的属性可以用来存储该信息；我们可能不得不使用这样一个类：
创建数据属性的目的，就是为了将数据相关联。数据属性能像类一样，让你存储这些额外的信息，而不暗含任何额外的意思。每个数据属性开始使用文字数据，然后使用用户定义的唯一键。在我们的示例中，可以使用这个：
现在，数据属性id与Peter的值关联。虽然该属性没有给元素额外的语义，但是可以为其他进程提供上下文，有关此数据的信息或许和JSON文件相关联，所以，可以使用JavaScript来查询。
使用数据集（dataset）属性的简单DOM API，脚本可以更加容易地获取该数据。若要获取一个数据属性的值，可以将数据值属性和正在查询的属性的键一起使用：
当我们把它应用于此示例的标记中，返回的结果将是123。我们还可以使用数据集更新属性值：
以下示例，演示了它是怎么起作用的：
在此示例中，我们执行了三个操作：首先获取id数据，然后将其设置为100，最后再次获取它。每一次都要把结果登录到控制台。输出结果如图2-5所示。
图2-5：在控制台中，用API操作所显示的数据属性的结果。
如果使用jQuery，与数据属性的互动甚至会变得更简单（如果读者还不知道什么是jQuery，则可以先翻阅第5章中的解释，读完它之后再回到这一节）。下面的例子是使用data()方法获取和设置的数据值：
此代码类似于前一节所示的代码，将返回相同的值：123。
然而，不同于数据集以一个字符串的形式返回所有的结果，data()类函数有一大优势：它还要对属性的值进行解析，并将它转换为正确的类型。如果使用前面的示例，该类型会是一个数字。但如果把标记更改为：
再次使用data()类函数：
变量name的值是Peter，其类型是一个字符串。
若想看看它是怎么运行的，可以参考示例文件data-attributes-jquery .html.。在该示例文件中，我使用同一标记把两个不同的数据属性相结合：
再使用jQuery，把每个数据属性的类型用JavaScript的typeof运算符登录到控制台中：
图2-6显示了输出结果。
图2-6：使用具有数据属性的jQuery data()类函数查找结果的类型。
数据属性如此有用，以至于一些公司已经开始广泛使用它们。Twitter很快就把它们用作一个在网页上添加Twitter按钮的选项，把某些内容相关的参数存储在一组预定义的属性里：
通过在网页上的其他位置包含一个对Twitter的JavaScript的调用，此元素被一个使用所提供数据的Tweet按钮所替换。很多其他的社会服务，如Facebook、Google+和LinkedIn，也采取相同的方式使用数据属性。
在目前被大家称为Web组件（Web Component）的建议中，扩展HTML有了一个令人兴奋的新方法。Web组件是一组技术的总称，它们使用CSS和标记，旨在促使为Web应用程序创建丰富界面变得简单易行。
眼下，规范还处于起草阶段，会有很多的更改。所以在这里，我们就不谈论它了，第11章将会更详细地介绍Web组件。
这一章介绍了一个优秀网站或应用程序的核心功能—基础结构。以正确而有意义的方式来使用标记，不但能为学习本书中所提到的其他知识奠定基础；而且在确保网站的可维护性和可扩展性上，这一点也至关重要。
对于HTML5结构元素，我一直保持中立态度，但无论我们是否使用它，有一点是绝对肯定的，那就是不管处于何种应用环境，我们都应该考虑在项目中使用WAI-ARIA。因为内容的可访问性是网络的基石，就算我们只使用role，我们和我们的用户也会获胜。
此外，我们学习了如何通过语义和结构化数据为网站添加上下文，还了解到信息检索相关性的重要性。当然，我们要采用什么方法，将取决于任务的应用环境。例如，要建立包含很多消费者导向内容的大型数据库导入网站，就有可能意味着，为了尽可能多地从搜索引擎和爬网程序中得到信息，我们需要添加丰富的语义。在这种情况下，就需要考虑使用RDFa、微格式和（或）微数据。但是，如果只是为移动设备创建混合应用程序，就不那么需要考虑使用这些了。
