HTML5 是一种专门用于组织 Web 内容的语言。它通过创建一种标准化的、直观的 UI 标记语言简化 Web 设计和开发。HTML5 提供了解析和划分页面的方法，它允许创建各种独立的组件来按照逻辑组织站点，同时还为站点提供联合功能。HTML5 可以称作 “面向站点设计的信息映射方法”，因为它融入了信息映射、信息划分和消息标签等基本内容，使信息变得易于使用和理解，这构成了 HTML5 的生动语义和审美工具的基础。HTML5 使具备不同能力的设计师和开发人员能够发布从简单文本到丰富的交互式多媒体等各种内容。
HTML5 提供了有效的数据管理、绘图、视频和音频工具。它简化了面向 Web 和便携式设备的跨浏览器应用程序的开发。HTML5 是推动移动云计算服务的技术之一，因为它可以实现更高程度的灵活性，可以开发出激动人心的交互式网站。它还引入了新的标记和增强，包括一个优雅的结构、表单控件、API、多媒体、数据库支持，并极大地加快了处理速度。
HTML5 中的新标记更能让人产生共鸣，封装了它们的角色和用法。以前的 HTML 版本使用的标记不容易进行区分。然而，HTML5 提供了高度描述的、直观的标签。它提供了丰富的内容便签，可以立即识别出内容。例如，< div>标记现在补充了 < section>和 < article>标记。此外，还增加了 < video>、< audio>、< canvas>和 < figure>标记，可以更准确地描述内容的具体类型。
HTML5 实现了以下功能：
●提供了可以准确描述所包含的内容的标记
●增强的网络通信
●显著改善了一般存储
●用于运行后台流程的 Web Worker
●在应用程序和服务器之间建立持久连接的 WebSocket 接口
●更好地检索存储的数据
●改善了网页保存和载入速度
●支持 CSS3 管理 GUI，意味着 HTML5 具备面向内容的特性
●改善了浏览器的表单处理
●一个基于 SQL 的数据库 API，允许客户端本地存储
●画布和视频，无需安装第三方插件即可添加图形和视频
●Geolocation API 规范，使用智能手机位置功能来合并移动云服务和应用程序
●智能表单减少了下载 JavaScript 代码的需求，在移动设备和云服务器之间实现了更有效的通信
HTML5 创建了更加吸引人的用户体验：使用 HTML5 设计的页面可以提供与桌面应用程序类似的体验。HTML5 还将 API 功能和浏览器结合在一起，提供了增强的多平台开发。通过使用 HTML5，开发人员可以提供在不同平台之间切换的现代应用程序体验。
HTML5 实际上是一系列创新的代表。HTML5 提供了新的标记、新的方法，并通过与 CSS3 和 JavaScript 的相互作用形成了一个通用的开发框架。这是以客户端为中心的应用程序处理的核心。除了将 HTML5 技术的技巧和方法部署到桌面外，还可以在特性丰富的 Web 移动手机浏览器中实现
HTML5 —随着 Apple iPhone、Google Android 和运行 Palm webOS 的手机的流行和普及，这注定是一个不断增长的市场。
HTML5 的一个关键功能就是信息映射 —或内容阻塞（如果您喜欢的话）—可以生成更加容易理解的流程。随着 HTML5 在 Web 处理方面的地位越来越重要，您将看到它在设计和开发方面是多么地高效。
HTML5 标志着更有效的文本级别的语义流程，以及对表单构建和使用的更高级别的控制。所有这些特性和 HTML5 创新的许多其他优点是使它成为主要范式的根本原因。许多商业的或其他代理组织（即使这些组织其中很多的主要代理行为并不是信息处理和通信）都或多或少地反映到了这种日益增长的模式开发中。
HTML5 的成功并不是出于偶然。相反，它的技术和方法才是它取得成功的后盾。
页面规划
您将创建一个简单的 Web 页面。在这个过程中，我将讨论 HTML5 中引入的几个新标记。要创建一个有效的、高效的 Web 页面，必须对页面进行规划，考虑到需要创建的所有的组件。
创建的页面将采用如图 1 所示的高级设计。页面设计包含一个 Header 区、一个 Navigation 区、一个 Article 区（包含三个部分）、一个 Aside 区和一个 Footer 区。该页面将用于 Google Chrome 浏览器，消除了一些会引起感官混乱的内容，这些内容会引起浏览器兼容性问题，并且不利于理解页面基本结构。这种结构的目的是清楚地展示新的 HTML5 标记的用法，展示如何使用它们创建构造良好的代码和优雅的页面设计。
在创建页面的过程中，我使用了 CSS3，需要用 CSS3 正确地呈现 HTML5 页面。CSS3 是实现 HTML5 页面样式、导航和整体感官的重要工具。它的属性组可以在 W3Schools CSS3 参考站点（见 参考资料）找到，包括一些有用的元素，如背景、字体、选框和动画效果。
然而，在开始构建页面前，您需要了解一些有关新的 HTML5 标记的知识。
Header 区
示例中的 Header 区包含页面标题和副标题。您将使用 < header>标记创建页面的 Header区的内容。< header>标记可以包含有关 < section>和 < article>的信息以及 Web 页面本身。这里的 Web 页面包含页面的 Header区以及 Article 和 Section 区的 Header区，如图 1 所示。清单 1 提供了一个 < header> 标记示例。
清单 1. < header>; 标记示例
|
1 2 3 4 5 |
<header> <h1>Heading Text</h1> <p> Text or images can be included here</p> <p> Logos are frequently placed here too</p> </header> |
< header>标记还可以包含 < hgroup>标记，如清单 2 所示。< hgroup>标记使用从 <h1>到 <h6>的标题级别对标题进行了分组，其中包含主标题和子标题。
清单 2. < hgroup> 标记示例
|
1 2 3 4 5 6 7 |
<header> <hgroup> <h1>Main Heading</h1> <h2>Sub-heading </h2> </hgroup> <p> Text or images can be included here</p> </header> |
Navigation 区
可以使用 <nav>标记创建页面的 Navigation 区。<nav>元素专门为导航功能定义了一个区域。 <nav>标记应当用于主站点的导航，而不是用于包含页面其他区域的链接。Navigation 区可以包含如清单 3 所示的代码。
清单 3. <nav> 标记示例
|
1 2 3 4 5 6 7 8 |
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> |
Article 和 Section 区
您设计的页面还包含 Article 区，其中包含页面的实际内容。将使用 < article>标记来创建这个区域，该标记定义可独立于其他页面内容使用的内容。例如，如果想要创建一个 RSS 提要，可以使用 < article>来唯一地识别内容。
< article>标记识别可以移除并放到另一个上下文的内容，并且非常易于理解。
Acme United 页面规划中的 Article 区包含了三个 Section 区。将使用 < section>标记创建这些区。< section>包含 Web 内容的相关的组件区。< section> 标记 —以及 < article>标记 —可以包含标题、页脚或任何其他必要的组件。< section>标记用于对内容分组。< section>标记和 < article>标记的内容通常以 < header>开头，以 < footer>结尾，中间为标记的内容。
< section>标记还可以包含 < article>标记，正如 < article>标记可以包含 < section>标记一样。< section>应用于将类似的信息划分成组，而 < article>标记应用于文章或博客等可以删除并放到新上下文且不影响内容含义的信息。顾名思义，< article>提供了完整的信息判断，而 < section>标记包含了相关的信息，但是这些信息不能放到不同的上下文中，否则信息的含义就会丢失。
清单 4 显示了 < article> 和 < section>标记的用法示例。
图像元素
< section>和 < article>标记以及 < header>和 < footer>标记可以包含 < figure>标记。您可以使用该标记包含图像、图表和照片。
< figure>标记可以包含 < figcaption>，后者包含 < figure>标记中的图形的说明文字，允许您输入一段描述来将图形与内容更紧密地联系在一起。清单 5 提供了 < figure>和 < figcaption>标记结构的示例。
清单 5. < figure>< strong> 标记和 < figcaption> 标记示例
|
1 2 3 4 |
< figure> < img src="/figure.jpg" width="304" height="228" alt="Picture"> < figcaption>Caption for the figure< /figcaption> < /figure> |
媒体元素
< section>和 < article>标记还可以包含各种媒体元素。HTML5 提供了可以快速传达内容含义的方式。媒体元素，例如以前嵌入到页面中的音乐和视频，现在可以更加准确地识别出来。
< audio>标记识别声音内容，例如音乐或任何其他的音频流。< audio>标记的属性控制播放音频的时间、方式以及内容。这些属性是 src、preload、control、loop和 autoplay。在清单 6 的示例中，将在页面加载完毕后立即播放音频，并将为用户提供控件来停止或重新播放音频。
清单 6. < audio> 标记示例
|
1 2 3 |
< audio src="MyFirstMusic.ogg" controls autoplay loop"> Your browser does not support the audio tag. < /audio> |
< video>标记允许您广播视频片段或可视流媒体。它除了具备 < audio>标记的所有属性外，还包含另外三个属性：poster、width和 height。poster属性使您能够在加载视频时或根本不能加载视频时识别要使用的图像。
清单 7 提供了
清单 7.
|
1 2 3 |
< video src="MyFirstMovie.ogg" controls="controls"> Your browser does not support the video tag < /video> |
< video>和 < audio>标记可以包含 < Source>标记，后者为 < video>和 < audio> 标记定义了多媒体资源。您可以使用该元素指定其他的视频和音频文件，浏览器就可以根据它的媒体类型或编码支持进行选择。在清单 8 中，提供了两种选择。如果文件的 WMA 版本无法在当前使用的浏览器中播放，那么就可以尝试使用 MP3 版本。否者，显示一条消息，通知客户音频不可用的原因。
清单 8. < source> 标记示例
|
“面向站点设计的信息映射方法”，因为它融入了信息映射、信息划分和消息标签等基本内容，使信息变得易于使用和理解，这构成了 HTML5 的生动语义和审美工具的基础。HTML5 使具备不同能力的设计师和开发人员能够发布从简单文本到丰富的交互式多媒体等各种内容。
HTML5 提供了有效的数据管理、绘图、视频和音频工具。它简化了面向 Web 和便携式设备的跨浏览器应用程序的开发。HTML5 是推动移动云计算服务的技术之一，因为它可以实现更高程度的灵活性，可以开发出激动人心的交互式网站。它还引入了新的标记和增强，包括一个优雅的结构、表单控件、API、多媒体、数据库支持，并极大地加快了处理速度。 HTML5 中的新标记更能让人产生共鸣，封装了它们的角色和用法。以前的 HTML 版本使用的标记不容易进行区分。然而，HTML5 提供了高度描述的、直观的标签。它提供了丰富的内容便签，可以立即识别出内容。例如，< div>标记现在补充了 < section>和 < article>标记。此外，还增加了 < video>、< audio>、< canvas>和 < figure>标记，可以更准确地描述内容的具体类型。 HTML5 实现了以下功能： ●提供了可以准确描述所包含的内容的标记 ●增强的网络通信 ●显著改善了一般存储 ●用于运行后台流程的 Web Worker ●在应用程序和服务器之间建立持久连接的 WebSocket 接口 ●更好地检索存储的数据 ●改善了网页保存和载入速度 ●支持 CSS3 管理 GUI，意味着 HTML5 具备面向内容的特性 ●改善了浏览器的表单处理 ●一个基于 SQL 的数据库 API，允许客户端本地存储 ●画布和视频，无需安装第三方插件即可添加图形和视频 ●Geolocation API 规范，使用智能手机位置功能来合并移动云服务和应用程序 ●智能表单减少了下载 JavaScript 代码的需求，在移动设备和云服务器之间实现了更有效的通信 HTML5 创建了更加吸引人的用户体验：使用 HTML5 设计的页面可以提供与桌面应用程序类似的体验。HTML5 还将 API 功能和浏览器结合在一起，提供了增强的多平台开发。通过使用 HTML5，开发人员可以提供在不同平台之间切换的现代应用程序体验。 HTML5 实际上是一系列创新的代表。HTML5 提供了新的标记、新的方法，并通过与 CSS3 和 JavaScript 的相互作用形成了一个通用的开发框架。这是以客户端为中心的应用程序处理的核心。除了将 HTML5 技术的技巧和方法部署到桌面外，还可以在特性丰富的 Web 移动手机浏览器中实现 HTML5 —随着 Apple iPhone、Google Android 和运行 Palm webOS 的手机的流行和普及，这注定是一个不断增长的市场。 HTML5 的一个关键功能就是信息映射 —或内容阻塞（如果您喜欢的话）—可以生成更加容易理解的流程。随着 HTML5 在 Web 处理方面的地位越来越重要，您将看到它在设计和开发方面是多么地高效。 HTML5 标志着更有效的文本级别的语义流程，以及对表单构建和使用的更高级别的控制。所有这些特性和 HTML5 创新的许多其他优点是使它成为主要范式的根本原因。许多商业的或其他代理组织（即使这些组织其中很多的主要代理行为并不是信息处理和通信）都或多或少地反映到了这种日益增长的模式开发中。 HTML5 的成功并不是出于偶然。相反，它的技术和方法才是它取得成功的后盾。 页面规划 您将创建一个简单的 Web 页面。在这个过程中，我将讨论 HTML5 中引入的几个新标记。要创建一个有效的、高效的 Web 页面，必须对页面进行规划，考虑到需要创建的所有的组件。 创建的页面将采用如图 1 所示的高级设计。页面设计包含一个 Header 区、一个 Navigation 区、一个 Article 区（包含三个部分）、一个 Aside 区和一个 Footer 区。该页面将用于 Google Chrome 浏览器，消除了一些会引起感官混乱的内容，这些内容会引起浏览器兼容性问题，并且不利于理解页面基本结构。这种结构的目的是清楚地展示新的 HTML5 标记的用法，展示如何使用它们创建构造良好的代码和优雅的页面设计。
在创建页面的过程中，我使用了 CSS3，需要用 CSS3 正确地呈现 HTML5 页面。CSS3 是实现 HTML5 页面样式、导航和整体感官的重要工具。它的属性组可以在 W3Schools CSS3 参考站点（见 参考资料）找到，包括一些有用的元素，如背景、字体、选框和动画效果。 然而，在开始构建页面前，您需要了解一些有关新的 HTML5 标记的知识。 Header 区 示例中的 Header 区包含页面标题和副标题。您将使用 < header>标记创建页面的 Header区的内容。< header>标记可以包含有关 < section>和 < article>的信息以及 Web 页面本身。这里的 Web 页面包含页面的 Header区以及 Article 和 Section 区的 Header区，如图 1 所示。清单 1 提供了一个 < header> 标记示例。 清单 1. < header>; 标记示例
< header>标记还可以包含 < hgroup>标记，如清单 2 所示。< hgroup>标记使用从 <h1>到 <h6>的标题级别对标题进行了分组，其中包含主标题和子标题。 清单 2. < hgroup> 标记示例
Navigation 区 可以使用 <nav>标记创建页面的 Navigation 区。<nav>元素专门为导航功能定义了一个区域。 <nav>标记应当用于主站点的导航，而不是用于包含页面其他区域的链接。Navigation 区可以包含如清单 3 所示的代码。 清单 3. <nav> 标记示例
Article 和 Section 区 您设计的页面还包含 Article 区，其中包含页面的实际内容。将使用 < article>标记来创建这个区域，该标记定义可独立于其他页面内容使用的内容。例如，如果想要创建一个 RSS 提要，可以使用 < article>来唯一地识别内容。 Acme United 页面规划中的 Article 区包含了三个 Section 区。将使用 < section>标记创建这些区。< section>包含 Web 内容的相关的组件区。< section> 标记 —以及 < article>标记 —可以包含标题、页脚或任何其他必要的组件。< section>标记用于对内容分组。< section>标记和 < article>标记的内容通常以 < header>开头，以 < footer>结尾，中间为标记的内容。 < section>标记还可以包含 < article>标记，正如 < article>标记可以包含 < section>标记一样。< section>应用于将类似的信息划分成组，而 < article>标记应用于文章或博客等可以删除并放到新上下文且不影响内容含义的信息。顾名思义，< article>提供了完整的信息判断，而 < section>标记包含了相关的信息，但是这些信息不能放到不同的上下文中，否则信息的含义就会丢失。 清单 4 显示了 < article> 和 < section>标记的用法示例。 图像元素 < section>和 < article>标记以及 < header>和 < footer>标记可以包含 < figure>标记。您可以使用该标记包含图像、图表和照片。 清单 5. < figure>< strong> 标记和 < figcaption> 标记示例
媒体元素 < section>和 < article>标记还可以包含各种媒体元素。HTML5 提供了可以快速传达内容含义的方式。媒体元素，例如以前嵌入到页面中的音乐和视频，现在可以更加准确地识别出来。 < audio>标记识别声音内容，例如音乐或任何其他的音频流。< audio>标记的属性控制播放音频的时间、方式以及内容。这些属性是 src、preload、control、loop和 autoplay。在清单 6 的示例中，将在页面加载完毕后立即播放音频，并将为用户提供控件来停止或重新播放音频。 清单 6. < audio> 标记示例
< video>标记允许您广播视频片段或可视流媒体。它除了具备 < audio>标记的所有属性外，还包含另外三个属性：poster、width和 height。poster属性使您能够在加载视频时或根本不能加载视频时识别要使用的图像。 清单 7 提供了 清单 7.
|
