《Windows 8 开发权威指南：HTML5 和JavaScript卷》——第2章 HTML5 JavaScript概述以及新特性 2.1 HTML5概述

本节书摘来自异步社区《windows 8 开发权威指南：html5 和javascript卷》一书中的第2章，第2.1节，作者：尹成 , 李亚男 , 王腾 , 丁宽帅 , 尹子磊著，更多章节内容可以访问云栖社区“异步社区”公众号查看

html5已经推出，web也不会是一成不变的。

以前你一定听说过这句话或类似的内容。 我想，当你听到这句话时，可能会变得很激动，转动眼珠、皱着眉头一脸疑问。 也可能这三种反应你都有。有这些反应，我非常能理解。 html5 十分令人称道，正如我们所知，它可能会改变 web，但它的作用也被夸大了。 而且，它的真正意义还难以琢磨。 在使用 html5 构建应用程序时，我自己也有过上面所说的每一种反应。 html5 是一个宽泛的话题，要掌握它很困难，更不用说知道从哪里开始使用这套激动人心的新技术了。

2.1.1 什么是html5

到现在为止，你可能会发现html5对不同的人有着不同的意义。 对有些人来说，它只意味着诸如和之类的新标记以及可用在标记中的一些新属性。 对另一些人来说，它意味着web上一切崭新和有趣的功能，包括在单个浏览器中实现的技术或未正式包含在html5中的其他规范。 当然，了解html5的真正意义通常是很多人面临的第一个障碍。

坦率地讲，存在各种各样的定义是有道理的。 html5十分庞大！ html5由国际标准团体万维网联盟（w3c）正式定义，包含与下一代web技术相关的100多项规范。 将所有这100多项规范统称为html5，您可能会认为w3c过度简化了这些规范的定义。html5涉及的内容非常广泛，很难为它下一个合适的明确定义。我认为 w3c 是通过引入html5作为web变化的统一概念，从而界定这种变化的范围。

实际上，html5是描述一组html、css和javascript规范的泛称，这些规范旨在帮助开发人员构建下一代网站和应用程序。 这个定义主要由3部分组成：html、css 和 javascript。这3部分规定开发人员如何使用改进的标记、更丰富的样式功能以及新的javascript api以充分利用新web开发功能。

简单地说，html5 = html + css + javascript。

就是这样。html5是关于对html、css和javascript的更改的。这3个术语描述了html5的广度和范围，你不必担心所有这100多条规范。还是认为这有点简略？ 可能是这样，但你很快会明白，全面的html5定义并不像你选择采用的技术那样重要，因为这些技术值得你花费时间和精力。

以下几小节我们将介绍html5的重要新特性。

2.1.2 新的文档类型

目前很多网页还在使用xhtml1.0，并且要在第一行像这样声明文档类型：

在html5中，上面的声明方式将失效。html5的声明方式为：

<code>&lt;!doctype html&gt;</code>

html4.01中的doctype需要对dtd进行引用，因为html4.01基于sgml。而html5不基于sgml，因此不需要对dtd进行引用，但是需要doctype来规范浏览器的行为。需要注意的是doctype对大小写很敏感，请书写时注意大小写。

2.1.3 脚本和链接无需添加type属性

在html4或xhtml中，你需要用下面的两行代码来给你的网页添加css和javascript文件。

而在html5中，你不再需要指定类型属性。因此，代码可以简化如下：

2.1.4 用于绘画的画布（canvas元素）

html5的canvas元素使用javascript在网页上绘制图像。画布是一个矩形区域，你可以控制其每一个像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2.1.5 用于媒介播放的video和audio元素

我们无需再依赖第三方插件区渲染音频。html5提供了

<video></video>

mozilla和webkit还没有完全相处，当涉及音频格式时，firefox会希望看到一个.ogg文件，而webkit的浏览器支持.mp3扩展。这意味着，至少在现在，你应该创建两个版本的音频。当safari加载页面时，它不会承认.ogg格式，将会跳过它并转移到mp3版本。

2.1.6 新的特殊内容元素

&lt; article&gt;&lt; /article&gt;

用于定义独立的内容，比如，论坛帖子、报纸文章、博客条目、用户评论。标签的内容独立于文档的其余部分。

&lt; footer&gt;&lt; /footer&gt;

用于定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及联系信息。假如，你使用footer来插入联系信息，应该在footer元素内使用&lt; address&gt;元素。

&lt; header&gt;&lt; /header&gt;

用于定义文档的页眉（介绍信息）。

&lt; nav&gt;&lt; /nav&gt;

定义导航链接的部分。如果文档中有“前后”按钮，则应该把它放到&lt; nav&gt;元素中。

&lt; section&gt;&lt; /section&gt;

用于定义文档中的节，比如，章节、页眉、页脚或文档中的其他部分。

2.1.7 新的表单控件

html5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

数据检出器

html5拥有多个可供选取日期和时间的新输入类型，date、month、week、time、datetime、datetime-local。

email

用于应该包含e-mail地址的输入域。在提交表单时，会自动验证email域的值。例如：

e-mail:&lt; input type=”email” name=”user_email”&gt;

url

用于应该包含url地址的输入域。在提交表单时，会自动验证url域的值。

search

用于搜索域，比如站点搜索或google搜索。search域显示为常规文本域。