1.5 无插件范式 11 Audio和Video Forms MathML Microdata Server-Sent Events
Scalable Vector Graphics (SVG) WebSocket API及协议 Web Origin Concept Web Storage 索引数据库
应用缓存（离线Web应用） Web Workers 拖放
XMLHttpRequest Level 2
可以看到本书中所讨论到的API大多都在上面的列表中。为什么选择这些API呢？我们挑选的都是基本成熟的功能，也就是说这些功能已经得到了不止一种浏览器的支持，其他功能（不太成熟的）可能只在个别浏览器的某个beta版中可用，或者基本上只是个概念。
对于我们要讨论的HTML5功能，本书将提供各种浏览器的最新支持情况。不过，不管现在支持情况如何，不久的将来肯定会变，因为HTML5发展的速度非常快。不用担心，我们会推荐一些非常好的在线资源，用以查看当前（以及将来）浏览器的支持情况。www.caniuse.com网站按照浏览器的版本提供了详尽的HTML5功能支持情况。若用户通过浏览器访问www.html5test.com的话，该网站会直接显示用户浏览器对HTML5规范的支持情况。
1
2 3 4 5 6 7 8 8 9 10 11
12 第1章 HTML5概述 此外，本书的重点不是讨论使用某种模拟或者变通的方法让HTML5程序能够运行在旧浏览器上，而是着重关注HTML5规范本身，以及它的使用方法。也就是说，在本书中我们针对所讨论的每个API都会提供一些示例代码，开发人员可以直接拿来检测其可用性。因为检测用户代理的方式经常不可靠，所以我们使用特性检测。当然，还可以使用Modernizr —— 一个JavaScript库，它提供了非常先进的HTML5和CSS3检测功能。我们强烈推荐使用Modernizr，因为它是检测浏览器是否支持某些特性的最佳工具。
对于HTML多说几句 “大家好，我是Frank①，我喜欢画画。 我见过的第一个HTML canvas演示是一款简单的绘图程序，用户界面模仿的是微软的画图程序。尽管那落后于数字绘图几十年，并且当时只有个别浏览器支持，不过它却让我对其表现能力充满了期待。 当我开始数字绘图的时候，一般都使用安装在本地的桌面软件。不可否认，有些软件相当不错，但它们不具备Web应用的迷人特性。简而言之，这些软件都是离线的。想要共享数字作品，必须先从软件中将图像导出，然后上传至Web。但是在Web的实时画布上协作讨论的话就不存在这种问题了。HTML5应用可以省掉现在数字绘图流程中的导出环节，将整个创作过程都转移到线上，直至作品完成。 不能用HTML5实现的应用已经变得越来越少了。对于文本，Web已然成为双向沟通的理想媒介。通过全Web的方式处理文本的应用程序比比皆是，而类似绘图、视频编辑、3D建模等图形类程序才刚刚起步。 现在，我们已经开发出了许多功能强大的单机软件，用以创建和欣赏图片、音乐、电影等。更进一步，我们可以将这些软件移植到Web这个功能强大、无处不在的在线平台上。” ——Frank 1.6 HTML5的新功能 在讨论HTML5编程之前，让我们快速预览一下HTML5的新功能。 ——————————
① Frank，本书作者之一。——译者注
1.6 HTML5的新功能 13 1.6.1 新的DOCTYPE和字符集
首先，根据HTML5设计准则的第3条——化繁为简，Web页面的DOCTYPE被极大地简化了。
1
2 以下面这段HTML4 DOCTYPE代码为例进行对比：
3 谁能记得住？所以在新建页面的时候，我们往往只能通过复制粘贴的方式添加这么长的
4 DOCTYPE，同时脑子里还不确定复制的对不对。HTML5干净利索地解决了这个问题：
5 现在的DOCTYPE好记多了。跟DOCTYPE一样，字符集的声明也被简化了。过去是这样的：
6 现在成了：
7 使用新的DOCTYPE后，浏览器默认以标准模式（standards mode）显示页面。例如，用Firefox打开一个HTML5页面，然后单击“工具?页面信息”（Tools?Page Info），会看到图1-1所示的画面。示例页面是以标准模式显示的。
使用HTML5的DOCTYPE会触发浏览器以标准兼容模式显示页面。众所周知，Web页面有多种显示模式，比如怪异模式（Quirks）、近标准模式（Almost Standards）以及标准模式（Standards）。其中标准模式也被称为非怪异模式（no-quirks）。浏览器会根据DOCTYPE识别该使用哪种模式，以及使用什么规则来验证页面。在怪异模式下，浏览器会尽量不中断页面显示，即使没有完全通过验证也会将其显示出来。HTML5引入了新的标记元素和其他机制（随后会详细讨论），因此如果
8 8 9 10 11
14 第1章 HTML5概述 坚持使用已废弃的元素，那么页面将无法通过验证。
图1-1 标准兼容模式下显示的页面
1.6.2 新元素和旧元素
HTML5引入了很多新的标记元素，根据内容类型的不同，这些元素被分成了7大类。见表1-1。
表1-1 HTML5的内容类型
内容类型 内嵌 流 标题 交互 元数据 短语 片段
描 述
向文档中添加其他类型的内容，例如audio、video、canvas和iframe等 在文档和应用的body中使用的元素，例如form、h1和small等 段落标题，例如h1、h2和hgroup等
与用户交互的内容，例如音频和视频控件、button和textarea等
通常出现在页面的head中，设置页面其他部分的表现和行为，例如script、style和title等 文本和文本标记元素，例如mark、kbd、sub和sup等
用于定义文档中片段的元素，例如article、aside和title等
1.6 HTML5的新功能 15 上述所有类型的元素都可以通过CSS来设定样式。此外，虽然其中一些元素，如canvas、
audio和video，在使用时往往需要其他API来配合，以实现细粒度控制，但它们同样可以直接使
1
2 用。我们在后续章节中详细讨论这类元素API。
限于篇幅，本书讨论的内容无法涵盖所有新元素，不过片段类元素是全新的，我们会在下一节讨论，而canvas、audio和video作为HTML5新增的元素也会在后续章节中详细讨论。
同样地，对于旧的标签元素，网上的资料已经很多了，我们不会把所有旧的标签元素都罗列
3 4 5 出来。不过需要注意的是，HTML5中移除了很多在行内设样式的标记元素，如big、center、
font和basefont等，以鼓励开发人员使用CSS。
6 1.6.3 语义化标记
片段类的内容类型包含许多HTML5元素。HTML5定义了一种新的语义化标记来描述元素的内容。虽然语义化标记不会让你马上感受到有什么好处，但是它可以简化HTML页面设计，并且将来搜索引擎在抓取和索引网页的时候，也绝对会利用到这些元素的优势。
前面我们说过，HTML5的宗旨之一就是存在即合理。Google分析了上百万的页面，从中发
7 8 8 9 现了DIV标签的通用ID名称重复量很大。例如，很多开发人员喜欢使用DIV id=\来标记页脚内容，所以HTML5引入了一组新的片段类元素，在目前主流的浏览器中已经可以用了。表1-2列出了新增的语义化标记元素。
10 表1-2 HTML5中新的片段类元素
元 素 名
header
描 述
标记头部区域的内容（用于整个页面或页面中的一块区域）
11