在讨论 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 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" > 5 <title>HTML5</title> 6 <link rel="stylesheet" href="html5.css"> 7 </head> 8 <body> 9 <header> 10 <h1>Header</h1> 11 <h2>Subtitle</h2> 12 <h4>HTML5 Rocks!</h4> 13 </header> 14 <div id="container"> 15 <nav> 16 <h3>Nav</h3> 17 <a href="http://www.example.com">Link 1</a> 18 <a href="http://www.example.com">Link 2</a> 19 <a href="http://www.example.com">Link 3</a> 20 </nav> 21 <section> 22 <article> 23 <header> 24 <h1>Article Header</h1> 25 </header> 26 <p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.</p> 27 <p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.</p> 28 <footer> 29 <h2>Article Footer</h2> 30 </footer> 31 </article> 32 <article> 33 <header> 34 <h1>Article Header</h1> 35 </header> 36 <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p> 37 <footer> 38 <h2>Article Footer</h2> 39 </footer> 40 </article> 41 </section> 42 <aside> 43 <h3>Aside</h3> 44 <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncus</p> 45 </aside> 46 <footer> 47 <h2>Footer</h2> 48 </footer> 49 </div> 50 </body> 51 </html>
没有样式的页面看起来有些枯燥乏味。代码清单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）的形式显示出来。