《HTML5实战》——第1章 HTML5：从文档到应用的转变1.1 探索标记语言：HTML5速览

本节书摘来自异步社区《HTML5实战》一书中的第1章，第1.1节，作者： 【美】Rob Crowther , Joe Lennon , Ash Blue , Grey Wanish 更多章节内容可以访问云栖社区“异步社区”公众号查看。

第1章 HTML5：从文档到应用的转变

本章主要内容

• HTML5的基本知识
• 新语义标记及媒体特性
• 新的JavaScript API
• 紧密相关的Web规范
  HTML5是现在Web开发的最热门主题之一，这是有充分理由的。这不仅因为它是最新的Web标记语言，还因为它制定了Web应用开发的一整套新标准。上一个版本的HTML语言（以及它那以严格著称的基于XML的兄弟：XHTML）主要把HTML限定为一种用于页面文档的标记性语言。HTML5则是第一个将Web作为应用开发平台的HTML语言。

HTML5定义了一系列新元素，用以帮助开发者创建富互联网应用，另外还提供了一些标准 JavaScript API，用来在浏览器内实现类原生应用。< video>元素就是 HTML5 的新元素中的一员，有了它，我们就可以在浏览器中播放视频，而无需安装任何额外插件。另外，HTML5还提供了Media Element Interface，能让我们借助JavaScript来控制视频播放。它还具有开发游戏、构建移动应用等诸多功能。

本章主要学习内容

• HTML5新引入的杰出特性，如何将它们立即应用到Web应用中。
• 对于还在使用旧版或不兼容浏览器的用户，如何提供回退或替代方案。
• 使用可访问的富互联网应用（Accessible Rich Internet Applications，ARIA）角色和微数据来进一步增强HTML页面的语义。
• HTML5自身所用到的大量JavaScript API，以及一些紧密相关的API规范。
  通过本章的学习，你会对HTML5所能提供的功能范围有更为清晰的认识，并将其用于自己的应用中。

文档（HTML4）与应用（HTML5）

Web起初只有文档。1993年，Mosaic浏览器添加了表单，但只有数据输入，所有的应用逻辑还只能位于服务器端。1995年出现了JavaScript技术，从而使得实现浏览器应用在理论上成为可能，但其可行性仍不高，直到1999年出现了XMLHTTPRequest对象。HTML的一个重要版本是4.01，但也只是一个推荐标准。所以并不奇怪，4.01规范基本上还着重于如何使用标记来描述文档，也就是我们现在通常所说的语义标记。

HTML5姗姗来迟，这期间互联网已经发生了巨变。如下文所示，在语义标记方面，HTML5有很多改进。然而，相比起HTML4来说，HTML5最大的改进和差异在于利用JavaScript构建浏览器应用的能力。基于此，而且也由于本书内容的重点在于介绍HTML5的新特性，我们更主要介绍的是JavaScript，而非标记语言。当然，我们会涉及到标记语言，但如你所知，JavaScript才是HTML5真正的主角。
下面，我们先从如何创建HTML5文档开始。

1.1 探索标记语言：HTML5速览

要想学习HTML5的新技术，最好直接上手进行实践的探索。本节不仅会概要介绍各种新特性，还会教你顺利地将现有的应用利用HTML5约定进行更新，即使用户没有最新最强大的浏览器，他们的用户体验也不会变差。

本节主要学习内容

• 如何创建基本的HTML5文档结构。
• 如何使用新的语义元素来布局页面。
• 如何处理无法识别新元素的旧版本IE浏览器。
• 能立刻用HTML5实现的新表单功能。
• 如何使用新的UI元素，例如进度条与可折叠部分。
  我们先从HTML5文档的基本结构出发，假如你不喜欢这些基础知识，可以快速阅读它们。到了1.2节，就已经略过了语义标记，从而进入到HTML5的生态系统中。

1.1.1 HTML5文档的基本结构
与采用旧版本的HTML语言相比，HTML5在构建文档的方式上别无二致：文档都以< !DOCTYPE >声明开头，整个HTML文档都要包含在< html >和 html >这两个相互匹配的标签内。在这些标签间，还有一个< head >部分，用于存放< meta >信息及其他一些非内容的项目（如样式表），以及一个存放页面内容的< body >部分。如果你之前写过HTML文档或应用，就会很熟悉这些概念，但是你应该留意HTML5的一些细微差别，本节就将介绍这些差别：

• HTML5的DOCTYPE声明的格式；
• 如何使用开放的元素；
• 在部分中，如何使用各种元素的精简版本。
  下面，我们通过hello.html文档来详细讨论一下具体区别。代码清单1-1是用HTML5写的一个“Hello, World!”程序。

基本的页面结构就是这样，接着，让我们来看看如何利用新的语义元素来构建一个简单的博客文章页面。

HTML与XML

对于之前的HTML规范，我们既可以认为它们是HTML，也可以认为是XHTML。HTML标记设计得非常宽松，而XHTML则是基于XML的，并具有一种很严格的解析模型。XHTML要求所有元素都具有结束标签（如不能只有开始标签< br >而没有结束标签< br />），另外它还要求所有的标签与属性都必须小写。一个小错误就能导致整个页面的加载失败。正是由于这种苛刻的错误处理机制，多数网站根本无法正确实现XHTML。它们更倾向于使用XHTML的语法的表单，但却利用text/html内容类型来发送页面，将XML标记用HTML来解析。

HTML5将HTML与XML的各种规范融合为一种规范，也就是说，规范提供了一种词汇表，既可以用HTML，也可以用XHTML来表达。XHTML序列化必须要带上的XML内容类型（如aplication/xml+xhtml）一齐发送，另外，它还需要遵从XML的解析原则，带上xmlns声明、闭合标签等内容。在本章的下载代码中，还有着代码清单1-1的另外两个版本，展示了用正确及不正确的XHTML标记书写的同样的标记：hello-invalid.xhtml，在XML文档中使用HTML语法；hello-valid.xhtml，将标记都改成了正确的XML。
1.1.2 使用新的语义元素
如果此前你了解过HTML5内容，那么有可能听说过大量关于新语义元素。它们具有十分重要的作用，尤其是能让搜索引擎或辅助技术（如屏幕阅读器）更好地理解页面，使用起来也比你所熟悉并喜爱的HTML4元素要更容易。

但不要因此而特别兴奋。如果你希望这些新元素能够让页面变得绚丽，那你可能会有些失望了。就功能而言，这些新的元素相当于一系列

元素。默认情况下，它们的作用就像是块元素一样，并且可以使用CSS进行样式化。它们的重要性来自于它们所有的标准语义。

考虑一个常见的博客文章页面，Web页面包含一系列区块（section）。首先，你需要有站点的标题和导航链接，或者是一些侧边栏导航链接，一个主要的内容区域，带有更深一层导航链接的页脚，或是一些版权声明和法律声明链接。代码清单 1-2 展示了如何用HTML4或XHTML来书写该博客文章的标记。

https://yqfile.alicdn.com/28687a733b1a9a4f08f1008b134417f7ee168b88.png" >

之前的代码没有错，在HTML5里仍然有效，你完全可以继续使用

元素再配上你喜欢的语义类名。但从语义的角度来看，这种方法却暴露出几个问题。

• 使用旧式标准，使用已命名的类来区分博客文章页面内的各个区域。这貌似没有问题，但类的命名规范完全取决于作者。一个人可能取“header”，另一个人可能取“heading”，主要内容部分或许叫做“main”，而另一个人或许把它取作“body”或“article”。
• 有些人可能更喜欢使用ID来取代类，他们可能会把id定义为“header”，而另一些人可能会把类名定义为“header”。
  总之，搜索引擎或其他由计算机控制的应用程序无法可靠地确认每一区块所呈现的内容。

这个问题需要利用新的语义元素来解决。现在，我们与其使用类和ID来定义各种区块（标题、导航链接、页脚），不如采用几种不同的HTML元素来定义，如代码清单1-3所示。把这个代码插入到hello.html文件的

标签之中。

另外两个重要的HTML5元素：< aside >与< mark >
有必要再介绍一下另两个以后会常用的HTML5元素：< aside >与< mark >。你可以用元素来定义一个在页面中独立于主要内容区域的部分。在传统的书籍或杂志中，这部分内容通常表现为边栏，包含同一主题的信息，但跟页面上的主要文章又不尽相同。如在一个博客内，可能会在文章旁边放上广告，这些广告内容就可以放在元素中。在Web应用主要部分的上方，还可以用< aside >来实现弹出式广告或浮动窗口。

< mark >元素可以用来展示文档中应被标记或者说突出显示的文本部分，通常用来高亮显示文档中的搜索词。

有了新的语义元素，页面标记结构不仅清晰易读，搜索引擎机器人和辅助技术也能轻易理解页面。说到辅助技术，就涉及到了下面要谈到的一个主要主题：ARIA角色。

1.1.3 使用ARIA角色来增强可访问性
在构建Web应用时，你必须确保所有用户都能访问，这其中就包括那些需要辅助技术（如屏幕阅读器）才能访问的用户。要想确保页面被访问，就应该慎重考虑标记语义的问题。单纯使用HTML标记就能让这项任务变得简单起来，而且现在HTML5的新元素还进一步增强了语义。但是，在创建Web应用时，迎合辅助技术却变得更加困难。这是因为，在现今的Web应用中，用于动态修改页面的JavaScript代码量不断增加，从而使得单纯通过良好的标记来实现优秀可访问性变得愈发困难。为了解决这种问题，人们制定了WAI（Web Accessibility Initiative，Web可访问性倡议）和ARIA标准及规范。

WAI-ARIA规范旨在通过对HTML文档作者提供的可访问性信息加以扩展来改善Web应用。ARIA角色、关系、状态及属性，可为Web应用定义出能够被屏幕阅读器这样的辅助技术所理解的工作方式。例如，构建了一个用于文本输入的下拉列表和一个无序列表，可以将ARIA角色combobox添加到< input >元素中，从而使其可以正确地在用户设备上显示出下拉列表框（combobox）。代码清单1-4展示了直接取自WAI-ARIA 1.0规范文档的一个范例。

HTML5规范现已明确声明，可以按照ARIA规范所描述的那样，在HTML元素上使用ARIA的 role 和 aria-* 属性，而在HTML4中，是不可以这样做的。HTML5还为特定HTML 元素定义了 ARIA 默认角色。如暗示了复选框的< input

元素的角色是checkbox，所以不需要像其他元素一样显式地使用role或aria-*属性了。

有些HTML元素能够通过改变原生语义而实现不同的行为，例如可以创建一个行为像按钮的< a >元素，在经过一些验证后，用它来提交表单。HTML5规范为这些元素定义了一些有效语义。当你使用元素来创建超链接时，则它的角色默认为link，而经过修改后，它的角色则可以表现为以下角色其中之一：button、checkbox、menuitem、menuitemcheckbox、menuitemradio、tab或treeitem。

关于默认、暗示的ARIA语义的完整列表以及具体元素语义的修改限制，可以参看HTML5规范的WAI-ARIA部分。

1.1.4 IE6～IE8的支持情况
HTML5元素与旧浏览器的兼容性可能是你比较关心的问题，这也理所当然。HTML的每一版都会引入新的元素，HTML5也不例外。多数现代的浏览器都能呈现这些元素，即使对于那些并不特别支持这些元素的版本也是如此。多数浏览器在处理未能识别的元素时，一般会将其渲染为通常的内联元素。然后，只需将其设置为block with CSS，让它们按照CSS来呈现即可。遗憾的是，IE例外。在IE9之前，未能识别的元素虽然能够渲染，但却不能按照CSS来呈现。可想而知，这就导致在生产应用的开发中很难利用新的HTML5元素，因为用户有可能还在使用IE6、IE7或IE8。

在IE中渲染新的元素属性
幸好，这个问题补救起来也很简单。如果想在页面上应用< header >元素，并使用CSS样式，可将下列代码段放入页面的< head> 部分内。这将强制IE在标签中使用CSS样式，即使所使用的IE本身并不支持某个元素。

需要为每个希望在页面中使用的HTML5元素都执行一个作用相等的JavaScript语句。这样做会导致从IE6到IE8都能正确地渲染格式，但在试图打印页面时，问题依然存在。

如何在IE打印页面上正确地渲染新元素
一种叫做IE Print Protector的解决方案可以修补这个打印问题。但与其重复劳动，还是推荐使用HTML shiv脚本来解决这个问题。Remy Sharp最先开发出的这个最流行的HTML shiv脚本，随后很多人又对其加以不断地改进。
警告 HTML5 shiv解决方案需要使用JavaScript。如果不想使用JavaScript，可以用基于XML的HTML5同胞兄弟——XHTML5。
HTML5还有哪些功能可以对现存应用加以大幅改善的呢？利用一些整合的简单功能，让表单变得有趣起来，怎么样？虽然表单在页面上很常见，但有了HTML5，它们就变得不再那么苍白乏味了。

1.1.5 HTML5所引入的新表单特性
虽然Web表单极其简陋，几乎没人喜欢，但Web之所以开始成为应用开发平台，关键因素之一即是Web表单。正是由于关注Web应用，所以HTML5在Web表单上做出了很大的改进，所有功能现在就可以用到旧浏览器上，无需为兼容性操心。

使用新的表单输入类型，改善数据输入语义
文本字段的使用范畴和频率早已远远超出了它的基本功能。就像在HTML4中

元素也被用来包含所有的块元素一样，文本字段也被用来处理所有的文本输入。HTML5提供了一些新的、向后兼容的类型，比简单的文本字段的功能更为强大，表 1-1 列出了HTML5中所提供的新输入类型。

现在，即使旧版本的浏览器并不理解某些输入类型，这些新型Web输入类型都能够立刻使用，但需要将其回退到标准输入类型再加以使用。一些新输入类型还允许浏览器为某些指定类型的表单字段提供标准的小部件。图1-1展示了一些新的小部件范例。

第2章介绍如何通过Modernizr（HTML5的一个特性侦测脚本）来判断浏览器是否支持指定的输入类型，并在需要时提供能够回退使用的JavaScript部件。

改变字段行为的新属性
除了引入新的表单字段类型，HTML5还引入了10种通用属性，如表1-2所示。利用它们，就可以改变指定字段的行为。拿其中的placeholder属性来说，它可以让文本字段在没有输入之前，显示一些预设文本，如图1-2所示。

表1-2展示了HTML5新引入的一些输入属性。到了第2章，再来介绍这些属性与相关输入类型的应用方式。

https://yqfile.alicdn.com/32dc742cff207ebbc84d47151ec17051b7fc355f.png" >

能够执行客户端验证的新属性
无需使用JavaScript，有些属性就可以使浏览器执行客户端验证。例如，required属性明确要求字段必须被填充，否则浏览器就会报错。pattern属性定义验证输入数值的正则表达式。max和min属性则限制了number和date字段类型的最大值及最小值。

另外，浏览器对一些新的输入类型会执行一些验证，当用户输入的数值格式不正确时，浏览器就会警告用户。例如用户在email输入字段中输入了错误的电子邮件地址，浏览器就会给出一个出错提示，从而防止表单被提交至服务器端。

警告 不能单纯依靠客户端验证。无论是HTML5新增的浏览器原生验证，还是JavaScript验证代码，它们都不可靠。由于可以很容易绕过客户端验证，服务器端验证输入是不可或缺的。客户端验证主要应该用在改善用户体验上，并不能用作保障应用绝对安全的手段。
第2章将更为详细地介绍新增输入类型及属性。先来介绍一些HTML5新增的其他元素，它们可以轻松快速地与现有应用进行完美整合。

1.1.6 进度条、度量器和可折叠内容
HTML5定义了很多新颖的用于向用户传递信息的元素。这其中就包括很多开发者此前只能靠第三方的JavaScript库来实现的小部件，如进度条、度量器和可折叠内容等。

使用进度条来显示完成进度
利用< progress >属性，可以向用户呈现确定（或不确定）的进度条。确定的进度条有指定数值，进度条的进度由该值确定，所以很适用于显示文件上传进度——随着文件上传量，动态地改变进度条数值。不确定进度条则没有明确的数值，进度条会完全充满，在不确定操作进度的情况下，应用这种进度条，用户就能知道应用正在加载。这两种进度条的具体情况如图1-3所示。

图1-3 左边的进度条是一种已确定的进度条。在图中这种情况下，进度条的值为50%，
所以图中的进度条只走到了一半。右手进度条是不确定的进度条，没有值，
它通常显示为一个有着动画的完整的进度条，旨在表明
正在加载，但却不知道整体的进度

要想创建图1-3所示的进度条，只需下面这两行代码：

使用度量器来显示已知范围内的用户数据
< meter >元素与< progress >元素较为类似。< progress >主要用于展示任务的完成度（百分比），而< meter >则能展示在已知的标量范围内的数据变化。除了使用填充条图形来展示数值之外，我们还可以定义low、high和optimum这些范围关键点参数，还可以赋予这些参数更广泛的含义。当取值在低（low）范围时，度量器的填充条显示为红色；取值在中等范围时，显示为黄色；取值为高（high）和最高（optimum）范围时，显示为绿色。图1-4展示元素在取值不同情况下的显示效果。

图1-4所示的元素范例的代码如下：

https://yqfile.alicdn.com/8d3123d97b7d21434c781c4726d4e36d5b8ff610.png" >

无需JavaScript，使用< details >和< summary >来创建可折叠内容
以前要想创建可折叠内容，需要利用JavaScript切换该内容部分的CSS属性，才能实现内容的隐藏与实现。而HTML5利用< details >和< summary >元素，无需脚本代码，就能提供这样的功能。图1-5显示了这些新元素的实际应用效果。

图1-5 < details >和< summary >元素的实际效果范例。处于折叠状态时，< summary >元素之内的内容才能显示；打开状态时，< details >元素内所有内容都显示了出来

该< details >和< summary >范例代码如下：

https://yqfile.alicdn.com/5236c46aa2f834edf049fe16a5507069e1885e09.png" >

遗憾的是，浏览器对这些新元素的支持相当缓慢。不过，可以使用JavaScript轻松地创建一些回退方案。

利用本节所学的这些技术，你现在应该可以将已有应用升级到HTML5规范中去，不会因为用户没有使用最新、最强大的浏览器而导致任何副作用。下一节将介绍标记之外的一些特性及规范，并利用CSS3与JavaScript改善文档样式与交互性。