在讨论 HTML5 编程之前，让我们快速预览一下 HTML5 的新功能。
1.6.1新的 DOCTYPE 和字符集
首先，根据 HTML5 设计准则的第 3 条——化繁为简，Web 页面的 DOCTYPE 被极大地简化了。以下面这段 HTML4 DOCTYPE 代码为例进行对比：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>谁能记得住？所以在新建页面的时候，我们往往只能通过复制粘贴的方式添加这么长的DOCTYPE，同时脑子里还不确定复制的对不对。HTML5 干净利索地解决了这个问题：<!DOCTYPE html>现在的 DOCTYPE 好记多了。跟 DOCTYPE 一样，字符集的声明也被简化了。过去是这样的：<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>现在成了：<meta charset=”utf-8″>使用新的 DOCTYPE 后，浏览器默认以标准模式（standards mode）显示页面。例如， Firefox用打开一个 HTML5 页面，然后点击“ 工具➤页面信息” （Tools ➤ Page Info），会看 到图 1-1 所示的画面。示例页面是以标准模式显示的。使用 HTML5 的 DOCTYPE 会触发浏览器以标准兼容模式显示页面。众所周知，Web 页面有多种显示模式，比如怪异模式（Quirks） 近标准模式、（Almost Standards）以及标准模式（Standards）。其中标准模式也被称为非怪异模式（no-quirks） 浏览器会根据 DOCTYPE 来识别该使用哪种模式，。以及使用什么规则来验证页面。在怪异模式下，浏览器会尽量不中断页面显示，即使没有完全通过验证也会将其显示出来。HTML5 引入了新的标记元素和其他机制（随后会详细讨论），因此如果坚持使用已废弃的元素，那么页面将无法通过验证。1.6.2 新元素和旧元素
HTML5 引入了很多新的标记元素，根据内容类型的不同，这些元素被分成了 7 大类。见表1-1。
HTML5的内容类型
| 内容类型 | 描述 |
|---|---|
| 内嵌 | 向文档中添加其他类型的内容，例如audio、video、canvas和iframe等 |
| 流 | 在文档和应用的body中使用的元素，例如form、h1和small等 |
| 标题 | 段落标题，例如h1、h2和hgroup等 |
| 交互 | 与用户交互的内容，例如音频和视频的控件、button和texta |
| 元数据 | 通常出现在页面的head中，设置页面其他部分的表现和行为，例如script、style |
| 短语 | 文本和文本标记元素，例如mark、kbd、sub和sup等 |
| 片段 | 用于定义页面片段的元素，例如article、aside和title等 |
上述所有类型的元素都可以通过 CSS 来设定样式。此外，虽然其中一些元素，如 canvas、audio 和 video，在使用时往往需要其他 API 来配合，以实现细粒度控制，但它们同样可以直接使用。我们在后续章节中详细讨论这类元素 API。限于篇幅，本书讨论的内容无法涵盖所有新元素，不过片段类元素是全新的，我们会在下一节讨论，而 canvas、audio 和 video 作为 HTML5 新增的元素也会在后续章节中详细讨论。
同样地，对于旧的标签元素，网上的资料已经很多了，我们不会把所有旧的标签元素都罗列出来。不过需要注意的是，HTML5 中移除了很多在行内设样式的标记元素，如 big、center、font 和 basefont 等，以鼓励开发人员使用 CSS。
1.6.3 语义化标记
片段类的内容类型包含许多 HTML5 元素。HTML5 定义了一种新的语义化标记来描述元素的内容。虽然语义化标记不会让你马上感受到有什么好处，但是它可以简化 HTML 页面设计，并且将来搜索引擎在抓取和索引网页的时候，也绝对会利用到这些元素的优势。前面我们说过，HTML5 的宗旨之一就是存在即合理。Google 分析了上百万的页面，从中发现了 DIV 标签的通用 ID 名称重复量很大。例如，很多开发人员喜欢使用 DIV id=”footer”来标记页脚内容，所以 HTML5 引入了一组新的片段类元素，在目前主流的浏览器中已经可以用了。
1-2 HTML5中新的片段类元素
| 元素名 | 描述 |
|---|---|
| header | 标记头部区域的内容（用于整个页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面中的一块区 |
| section | Web页面中的一块区域 |
| article | 独立的文章内 |
| aside | 相关内容或者引文 |
| nav | 导航类辅助内容 |
上面所有的元素都能用 CSS 设定样式。之前说到了 HTML5 效率优先的设计理念，它推崇表现和内容的分离，所以在 HTML5 的实际编程中，开发人员必须使用 CSS 来定义样式。代码清单1-1 是一个 HTML5 页面的概貌，其中使用了新的 DOCTYPE、字符集和语义化标记元素——新的片段类元素。示例代码对应的源码在 code/intro 文件夹中。
代码清单 1-1 HTML5 示例页面
1 2 3 4 5HTML5 6 7 8 910 14Header
11Subtitle
12HTML5 Rocks!
1315 2150 5122 42 46 4923 3224 26Article Header
25Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.
27Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.
28 3133 4134 36Article Header
35HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio
37 40
没有样式的页面看起来有些枯燥乏味。代码清单1-2是一些可以用来设置内容样式的 CSS 代码。需要注意的是，这份样式表使用了 CSS3的一些新特性，比如圆角（border-radius）和旋转变换（transform:rotate();）。CSS3同 HTML5一样也正在开发过程中，并且为了便于浏览器逐步支持，也采用了模块化的方式发布子规范（例如变换（transformation） 动画、（animation）和过渡（transition）分别对应不同的子规范）。
CSS3 的规范很可能还会变动，CSS3 中的功能也处于实验期，因此为了避免命名空间冲突，这些功能都会加上浏览器厂商的前缀。要显示圆角、渐变（gradients）、阴影（shadows）和变形（transformations）的话，需要在声明的部分加上前缀：-moz-（Mozilla 浏览器）、o-（Opera 浏览器）和-webkit-（Safari 和 Chrome 等基于 WebKit 核心的浏览器）。代码清单 1-2 HTML5 页面对应的 CSS 文件
body { background-color:#CCCCCC; font-family:Geneva, Arial, Helvetica, sans-serif; margin: 0px auto; max-width:900px; border:solid; border-color:#FFFFFF;}header { background-color: #F47D31; display:block; color:#FFFFFF; text-align:center;}header h2 { margin: 0px;}h1 { font-size: 72px; margin: 0px;}h2 { font-size: 24px; margin: 0px; text-align:center; color: #F47D31;}h3 { font-size: 18px; margin: 0px; text-align:center; color: #F47D31;}h4 { color: #F47D31; background-color: #fff; -webkit-box-shadow: 2px 2px 20px #888; -webkit-transform: rotate(-45deg); -moz-box-shadow: 2px 2px 20px #888; -moz-transform: rotate(-45deg); position: absolute; padding: 0px 150px; top: 50px; left: -120px; text-align:center;}nav { display:block; width:25%; float:left;}nav a:link, nav a:visited { display: block; border-bottom: 3px solid #fff; padding: 10px; text-decoration: none; font-weight: bold; margin: 5px;}nav a:hover { color: white; background-color: #F47D31;}nav h3 { margin: 15px; color: white;}#container { background-color: #888;}section { display:block; width:50%; float:left;}article { background-color: #eee; display:block; margin: 10px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 20px #888; -webkit-transform: rotate(-10deg); -moz-box-shadow: 2px 2px 20px #888; -moz-transform: rotate(-10deg);}article header { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px;}article footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px;}article h1 { font-size: 18px;}aside { display:block; width:25%; float:left;}aside h3 { margin: 15px; color: white;}aside p { margin: 15px; color: white; font-weight: bold; font-style: italic;}footer { clear: both; display: block; background-color: #F47D31; color:#FFFFFF; text-align:center; padding: 15px;}footer h2 { font-size: 14px; color: white;}/* links */a { color: #F47D31;}a:hover { text-decoration: underline;}
图 1-2 是代码清单 1-1 中的页面应用了 CSS（包括部分 CSS3）之后的显示效果。其实并不能把这个页面当成所谓的典型 HTML5 页面。因为计划赶不上变化，这个示例使用了很多新标签只是为了演示而已。
最后需要说明的是，看起来好像浏览器是因为识别了新的元素，所以显示出了对应的内容。其实不然，事实上这些元素很可能是先被重命名为了 foo 或者 bar，然后再应用样式，最后才显示出来的（当然，对于搜索引擎优化来说没有任何好处）。IE 是个特例，因为 IE 需要将这些元素都作为 DOM 的一部分，所以要想在 IE 中看到这些元素，必须用编程的方式把它们插入 DOM中，然后再以块元素（block element）的形式显示出来。