一、HTML5结构

HTML5 引入了新的元素和属性，以实现更整洁的结构、更智能的形式和更丰富的媒体；这使开发人员的生活更加轻松。HTML5 功能根据其功能分为几个组，新的结构元素属于组语义，包括结构元素、媒体元素、属性、表单类型、链接关系类型、国际化语义和附加语义的微数据。HTML5 中有大量的添加和增强，所有这些都是为了更好地在 web 上呈现内容。在为 Windows 8 开发应用时，您将使用其中的许多功能；将其用于 Windows 8 开发的区别和优势在于，您不必担心浏览器的兼容性，至少在 Windows 应用商店应用级别上是这样，因为 Windows 8 是一个使用最新 web 标准的 HTML5 平台。HTML5 和 CSS3 中使用的所有内容都在代码中为您提供，并保证在应用中正常工作。最新版本的 VisualStudio（VS2012）包含了一个新的 HTML 和 CSS 编辑器，它提供了对 HTML5 和 CSS3 元素和片段的全面支持。

在本章中，我们将介绍以下主题：

• 语义要素


• 媒体元素


• 形式元素


• 自定义数据属性

HTML5 标记比之前的标记更具语义，这是因为有了新的语义元素来描述页面内容的结构。语义元素列表包括以下内容：

• 标记定义文档或节的标题。它将标题或一组标题包装在一个页面或一个章节中，还可以包含标识、横幅和主要导航链接等信息。一个页面中可以有多个标记。




• 标签包装了可按主题分组的相关内容。

  标签可以包括和




• 标记表示独立于文档整体使用的自包含内容，例如博客条目。

  和

  非常相似，因为它们都是独立的标签，并保存相关内容；然而，如果它的内容可以联合（通过 atom 或 RSS 提要），那么

  元素更合适。




• 标记表示最近的

  父元素（如果存在）或父元素的联系人信息，在这种情况下，该父元素适用于整个文档。

将所有这些新元素放在一个页面中会产生以下标记：

HTML5 引入了和等新媒体元素，可以认为这是继 HTML 早期版本中的图像之后媒体类型的一次新革命。这两个元素使得在 HTML 页面/文档中嵌入媒体变得非常容易，并通过HTML5 媒体元素 API提供内置媒体支持。根据 W3C 最新规范，我们可以定义和如下：

• 标签是一种媒体元素，用于播放带有字幕的视频或电影以及音频文件


• 标签是其媒体数据为音频的媒体元素，即声音或音频流

和元素分别播放音频和视频文件。它们之间唯一的区别在于元素没有视觉内容的播放区域，与元素相反。

在 HTML5 之前，我们需要一个插件来播放音频或视频文件，这需要编写大量的标记。没有 HTML5，嵌入媒体元素从未如此容易；只需放置一个标记，生成两行代码，您就可以获得一个带有播放控件的媒体播放器。与之前的标签几乎相同。请参阅以下代码：

上一个示例生成的媒体播放器类似于 Internet Explorer 9（IE9）上的以下屏幕截图，并且可能因浏览器而异：

前面的代码以最简单的形式显示了标记，但是标记有更多的属性和选项。请参阅以下代码：

首先，注意包装在元素内的

标记中的内容。此内容为回退文本，仅在浏览器不支持标记时使用。它通过向用户通知此问题，为较旧的 web 浏览器提供了一个优雅的回退，我们可以添加一个链接来允许下载此音频文件。这样，用户就不会只是站在那里想发生了什么。这是最简单的退路；您也可以将 Javascript 用于同样的目的。

前面的代码片段还显示了元素的一些属性。根据 W3C 规范，src、controls、autoplay、loop、preload、mediagroup和muted是媒体元素的共同属性，即和。

• controls属性显示网页音频的标准 HTML5 控件，控件的设计因浏览器代理而异。


• DOM 加载完成后，autoplay属性会自动播放音频文件。


• loop属性自动启用重复。


• mediagroup属性使用媒体控制器将多个媒体元素链接在一起。


• muted属性将音频文件的默认状态设置为静音。


• preload属性向用户代理提供了一个提示，提示作者认为什么会带来最佳的用户体验。其值可以是none、metadata或auto。
  
  
  • none：该值向浏览器提示该网页并不期望用户需要该媒体资源。
  
  
  • metadata：该值提示浏览器获取资源元数据（维度、曲目列表、持续时间等）。
  
  
  • auto：此值提示浏览器将用户需求放在首位，不会给服务器带来任何风险。空值（如仅添加属性preload时）映射到auto值。
  
  
  
  

您可以为cOntrols="controls"中的属性指定一个值，该值具有相同的行为。但是为了简单和代码更少，您可以简单地省略该属性的值；同样适用于loop、autoplay和muted。您可以使用src属性或元素指定媒体资源。

注

该属性覆盖元素。

媒体资源（音频或视频）具有 MIME 类型，另外还有一个编解码器，如以下代码所示：

必须在元素中设置type属性的值。如果资源不支持其类型，浏览器/用户代理将避免下载资源。您可以添加多种格式的音频/视频，以确保跨不同浏览器的播放支持。浏览器代理将遍历元素；如果无法呈现第一个类型，则会跳到下一个验证其类型，以此类推。为此，您必须检查不同浏览器中的和元素支持的 MIME 类型列表。浏览器不仅检查 MIME 类型，还检查指定的编解码器。因此，即使浏览器代理可以呈现资源类型，如果不支持编解码器，视频/音频也不会加载。

以下表列出了跨主要浏览器对 3 种主要视频格式的支持：

|

总体安排

|

IE9+

|

铬

|

火狐

|

歌剧

|

游猎

|
| --- | --- | --- | --- | --- | --- |
| WebM（VP8 编解码器） | 对 | 对 | 对 | 对 | 不 |
| MP4（H.264 编解码器） | 对 | 对 | 不 | 不 | 对 |
| OGV（OGG THEORA 编解码器） | 不 | 对 | 对 | 对 | 不 |

从上表中的列表中，我们可以得出结论，在 HTML5 视频中同时提供 WebM 和 MP4 格式的媒体资源将保证在所有主要浏览器的最新版本中加载。这一理论在 VisualStudio2012 中得到了强化，它为 HTML5 标签提供了全面的智能感知支持。当您为 HTML5元素插入以下代码片段时，会在标记中列出 3 个元素：

元素还包括poster属性，该属性用于指定当没有视频数据可用时或在用户单击播放按钮之前，要在视觉内容区域中显示的图像的路径。出于广告目的，您可以使用视频中的图像或帧，让用户了解视频的内容。如果未指定海报图像且未设置autoplay属性，则浏览器可能仅显示填充元素尺寸的黑框。例如，以下代码显示了两个类似视频的代码示例之间的差异，并为第二个视频指定了海报：

此标记的输出将在屏幕上产生以下内容：

您可能已经注意到，在前面的示例中，我们为两个视频指定了width值400。元素接受标准的 HTMLwidth和height属性。如果width和height没有设置值，则视觉内容区域会延伸到视频的原始大小。建议在元素上设置width和height属性，从而避免拉伸到全尺寸，并以所需的观看尺寸对视频进行编码。

注

宽度和高度属性的值不接受单位。该值表示 CSS 像素，例如，codehilite">

var testVideo = document.getElementById('myVideo');
if (testVideo.paused)
testVideo.play();
else
testVideo.pause();