3.3 HTML5简介
HTML5是HTML的下一个主要修订版本，现在仍处于发展阶段。从广义上来说，HTML5实际上指的是包括HTML、CSS和JavaScript在内的一套技术组合。和以前的版本不同，HTML5并非仅仅用来标识Web内容，它的新使命是将Web带入一个成熟的应用平台。
3.3.1 HTML5的语法变化
HTML5中，语法发生了很大的变化。但是，HTML5的“语法变化”和其他编程语言的语法变更意义有所不同。HTML原本是通过SGML（Standard Generalized Markup Language）元语言来规定语法的。但是由于SGML的语法非常复杂，文档结构解析程序的开发也不太容易，多数Web浏览器不作为SGML解释器运行。因此，HTML规范中虽然要求“应遵循SGML的语法”，但实际情况却是，对于HTML的执行在各浏览器之间并没有一个统一的标准。
在HTML5中，提高Web浏览器间的兼容性是HTML5要实现的重大目标。要确保兼容性，必须消除规范与实现的背离。因此，HTML5需要重新定义新的HTML语法，即实现规范向实现靠拢。
由于文档结构解析的算法也有着详细的记载，使得Web浏览器厂商可以专注于遵循规范去进行实现工作。在新版本的FireFox和WebKit（Nightly Builder版）中，已经内置了遵循HTML5规范的解释器。IE（Internet Explorer）和Opera也为了提供兼容性更好的实现而紧锣密鼓地努力着。
3.3.2 HTML 5中的标记方法
HTML 5中的标记方法有三种。
1. 内容类型(ContentType)
HTML 5的文件扩展名与内容类型保持不变。也就是说，扩展名仍然为.html或.htm，内容类型(ContentType)仍然为text/html。
2. DOCTYPE声明
DOCTYPE声明是HTML文件中必不可少的，它位于文件第一行。在HTML 4中，DOCTYPE声明的方法如下。
<!DOCTYPE html PUBLI"-//W3C//DTD XHTML 1.0Transitional//EN" "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在HTML 5中，刻意不使用版本声明，声明文档将会适用于所有版本的HTML。HTML 5中的DOCTYPE声明方法（不区分大小写）如下。
<!DOCTYPE html>
另外，当使用工具时，也可以在DOCTYPE声明方式中加入SYSTEM识别符，声明方法如下面的代码所示。
<!DOCTYPE HTML SYSTEM"about：legacy-compat">
提示：在HTML 5中，DOCTYPE声明方式允许不区分英文大小写，引号不区分是单引号还是双引号。
3. 字符编码的设置
字符编码的设置方法有些新的变化。在以往设置HTML文件的字符编码时，要用到如下<meta>标记。
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
在HTML5中，可以使用<meta>标记的新属性charset来设置字符编码，如下面的代码所示。
<meta charset="UTF-8">
以上两种方法都有效。因此也可以继续使用前者的方法（通过content属性来设置），但要注意不能同时使用。
3.3.3 HTML 5中新增加的标记
在HTML 5中新增了以下标记。
1. section
<section>标记标识页面中如章节、页眉、页脚或页面中其他部分的一个内容区块。
语法格式：<section>…</section>
示例：
<section> 欢迎学习HTLM 5 </section>
2. article
<article>标记标识页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章或报纸中的一篇文章。
语法格式：<article>…</article>
示例：
<article>HTLM 5华丽蜕变</article>
3. aside
<aside>标记用于标识<article>标记内容之外的，并且与<article>标识内容相关的一些辅助信息。
语法格式：<aside>…</aside>
示例：
<aside>HTML 5将开启一个新的时代</aside>
4. header
<header>标记标识页面中一个内容区块或整个页面的标题。
语法格式：<header>…</header>
示例：
<header> HTML 5应用与开发指南</header>
5. hgroup
<hgroup>标记用于组合整个页面或页面中一个内容区块的标题。
语法格式：<hgroup>…</hgroup>
示例：
<hgroup>系统功能管理</hgroup>
6. footer
<footer>标记标识整个页面或页面中一个内容区块的脚注。
语法格式：<footer>…</footer>
示例：
<footer>李彬<br/>
135*******1<br/>
2011-10-1
</footer>
7. nav
<nav>标记用于标识页面中导航链接的部分。
语法格式：<nav></nav>
8. figure
<figure>标记标识一段独立的流内容。一般标识文档主体流内容中的一个独立单元。
语法格式：<figure>…</figure>
示例：
<figure> <figcaption>HTML5</figcaption> <p>HTML5是当今最流行的网络应用技术之一</p> </figure>
9. video
<video>标记用于定义视频，例如电影片段或其他视频流。
语法格式：<video>…</video>
示例：
<video src="movie.ogv"，controls="controls">video标记应用示例</video>
10. audio
在HTML 5中，<audio>标记用于定义音频，例如音乐或其他音频流。
语法格式：<audio>…</audio>
示例：
<audio src="someaudio.wav">audio标记应用示例</audio>
11. embed
<embed>标记用来插入各种多媒体。多媒体文件的格式可以是Midi、WAV、AIFF、AU和MP3等。
语法格式：<embed/>
示例：
<embed src="horse.wav"/>
12. mark
<mark>标记主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。
语法格式：<mark>…</mark>
示例：
<mark>HTML5技术的应用</mark>
13. progress
<progress>标记标识运行中的进程，可以使用<progress>标记来显示JavaScript中耗费时间函数的进程。
语法格式：<progress>…</progress>
14. meter
<meter>标记定义度量衡。仅用于已知最大值和最小值的度量。
语法格式：<meter>…</meter>
15. time
<time>标记标识日期或时间，也可以同时标识两者。
语法格式：<time>…</time>
16. wbr
<wbr>标记表示软换行。<wbr>标记与<br>标记的区别是，<br>标记表示此处必须换行；而<wbr>标记的意思是浏览器窗口或父级元素的宽度足够宽时（没必要换行时），不进行换行，而当宽度不够时，主动在此处进行换行。<wbr>标记对英文这类拼音型语言的作用很大，但是对于中文却没多大用处。
语法格式：…<wbr>…
示例：
<p>To learn AJAX，you must be fami<wbr>liar with the XMLHttp<wbr>Request Object．</p>
17. canvas
<canvas>标记用于标识图形，例如图表和其他图像。这个标记本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript，以使脚本能够把要绘制的图像绘制到画布上。
语法格式：<canvas></canvas>
示例：
<canvas id="myCanvas"width="300"height="300"></canvas>
18. command
<command>标记标识命令按钮，例如单选按钮或复选框。
示例：
<command onclick=＂cut()＂label=＂cut＂>
19. details
<details>标记通常与<summary>标记配合使用，标识用户要求得到并且可以得到的细节信息。<summary>标记提供标题或图例。标题是可见的，用户单击标题时，会显示出细节信息。<summary>标记是<details>标记的第一个子标记。
语法格式：<details>…</details>
示例：
<details> <summary>HTML 5应用实例</summary> 本节将教您如何学习和使用HTML 5 </details>
20. datalist
<datalist>标记用于标识可选数据的列表。<datalist>标记通常与<input>标记配合使用，可以制作出具有输入值的下拉列表。
语法格式：<datalist>…</datalist>
除了以上这些之外，还有<datagrid>、<keygen>、<output>、<source>、<menu>等标记，这里就不再一一讲解了，有兴趣的读者可以阅读HTML 5专业书籍进行学习。
3.3.4 HTML 5中新增加的属性
HTML 5新增了很多属性，下面简单介绍其中一些属性。
1. 表单相关属性
新增的与表单相关的属性如下。
autofocus属性。该属性可以用在<input>(type=text)、<select>、<textarea>与<button>标记当中。autofocus属性可以让标识对象在打开画面时自动获得焦点。
placeholder属性。该属性可以用在<input>标记(type=text)和<textarea>标记当中。使用该属性时会对用户的输入进行提示，通常用于提示用户可以输入的内容。
form属性。该属性用在<input>、<output>、<select>、<textarea>、<button>和<fieldset>标记当中。
required属性。该属性用在<input>标记(type=text)和<textarea>标记当中。该属性用于在用户提交表单的时候进行检查，检查该标记对象内一定要有输入内容。
formaction、formenctype、formmethod、formnovalidate与formtarget。这些属性可以用在<input>标记与<button>标记中，用来重载<form>标记的action、enctype、method、novalidate与target属性。
novalidate属性。该属性可以用在<input>、<button>和<form>标记中，用来取消提交时进行的有关检查，即表单可以被无条件地提交。
2. 与链接相关的属性
新增的与链接相关的属性如下。
media属性。该属性用在<a>与<area>标记中用来规定目标URL是用什么类型的媒介进行优化的。
hreflang属性与rel属性。用在<area>标记中，以保持与<a>标记、<link>标记的一致性。
sizes属性。用在<link>标记中，用于指定关联图标(icon标识)的大小，通常可以与<icon>标记结合使用。
target属性。用在<base>标记中，主要目的是保持与<a>标记的一致性。
3. 其他属性
charset属性。用在<meta>标记中，用来为文档字符编码的指定提供一种良好的方式。
type和label属性。用在<meta>标记中。label属性为菜单定义一个可见的标注，type属性可以使菜单以上下文菜单、工具条或列表菜单3种形式出现。
scoped属性。用在<style>标记中用来规定样式的作用范围。
async属性。用在<script>标记中，用于定义脚本是否异步执行。
为了方便读者学习，下面将HTML的标记及其含义制作成了表格，如表3-1所示。
表3-1 HTML标记及其功能描述
