html5——标签介绍与使用

HTML5 规范包括一系列新的语义元素，用于提供 Web 页面的各个区域或部分的意义，例如页眉、页脚、导航等等。在以前版本的 HTML 中，通常使用 <div> 元素来创建这些部分，使用 ID 或 类属性来区分它们。这样做的问题是这没有任何语义意义，因为没有定义严格的规则来指定要使用的类名称或 ID，使软件极其难以确定特定区域的操作。HTML5 应该可以帮助解决这些问题，使 Web 浏览器更容易分析文档的语义结构。值得指出的是继续在 HTML5 中使用 <div> 元素仍旧有效，但是为了将来检查您的工作，建议您在相关的地方使用语义元素。另一方面，还建议您避免将这些新元素用于它们不应用于的目的。例如，<nav> 元素不应用于任何链接组；该元素旨在环绕页面上的主要导航块。
HTML 5 引入的主要语义元素包括：<header>此元素用于定义 Web 页面的某些部分的标题，可以是整个页面、<article> 元素或 <section> 元素。<footer>与 <header> 元素类似，此新元素定义页面的某些部分的页脚。页脚不一定是在页面、文章或区域的结尾，但是它通常是在那个位置。<nav>这是 Web 页面上主要导航链接的容器。此元素不应用于所有链接组，而是应仅用于主要导航块。如果您有一个 <footer> 元素包含导航链接，不需要将这些链接封装在 <nav> 元素中，因为 <footer> 元素将可以独自包括这些链接。<article><article> 元素用于定义页面上可以独自分布的独立项目，例如新闻项目、博客或评论。此类项目通常使用 RSS feed 来联合。<section>此元素表示文档或应用程序的一部分，例如，文章或教程的一章或一节。例如，您现在正在阅读的章节在 HTML5 中可以使用 <section> 元素括起来。<section> 元素通常具有一个页眉，虽然严格来说是不需要的。例如，您现在正在阅读的章节的页眉将包含文本 “语义元素”。<aside>此新元素可以用于标记边栏或一些将认为与其周围内容有点无关的内容。此项的一个例子就是广告块。<hgroup>在某些情况下，页面、文章或区域可能需要多个标题，例如，您有一个标题和一个副标题。例如，本教程具有标题 “使用 HTML5 和 CSS3 创建现代 Web 站点” 和副标题 “在 HTML5 中实施 canvas 和 video 元素”。您可以在 <hgroup> 元素中封装这些标题，使用 <h1> 元素表示主标题，<h2> 元素表示副标题。 除此之外，还有 <audio> 和 <video> 元素用来替代 Web 当前对 Flash 作为一种多媒体交付平台的依赖

<canvas> 元素

<canvas> 元素最初是由 Apple® 开发的，用于 Mac OS X Dashboard 部件和 Safari 中，但是后来被 Mozilla® 和 Opera® 用于它们的 Web 浏览器中。该元素已经被标准化并与一系列 2D 绘图 API 包括在 HTML5 规范中，这些 API可以用于创建该元素内的形状、文本、过渡和动画。

许多人相信 <canvas> 元素是 HTML5 最重要的一个方面，因为它可以促进快速创建图表、交互式游戏、绘图应用程序以及其他图形，而无需 Adobe Flash 等外部插件。

<canvas> 元素自身是非常基础的，定义对象的宽度、高度和惟一 ID。然后，开发人员必须使用一系列 JavaScript API 在 canvas 实际绘制对象，通常是在 Web 页面已经完成了呈现后。这些 API 允许开发人员绘制形状和线条；应用颜色、不透明性以及倾斜度；转换 canvas 对象；以及执行动画。这些 API 还允许 <canvas> 成为交互式的并对鼠标操作和键操作等用户输入做出响应，从而促进在 canvas 上创建游戏和 Web 应用程序。

使用 <audio> 和 <video>

最近这些年，YouTube 等视频共享站点和 Hulu 等内容交付平台的流行已经展示了 Web 用于多媒体流的巨大增长。不幸的是，Web 自身没有构建此类内容，因此，视频和音频的配置基本上是通过 Flash Video (.flv) 文件格式和 Adobe Flash 平台来促成的。

但是，HTML5 支持两种新元素 <audio> 和 <video>，这样 Web 开发人员就可以在不依赖用户安装额外浏览器插件的情况下包括多媒体内容。如果用户选择使用这些元素，多个浏览器（包括 Mozilla Firefox、Apple Safari 和 Google Chrome）已经开始支持这些新元素并提供标准浏览器播放控件。另外，如果开发人员希望创建自己的播放控件，已经提供了一组标准 JavaScript API 来允许开发人员这样做。原生多媒体播放控件的一个重要优点是理论上它需要较少的 CPU 资源，从而可以节约能量。

但是，这些新多媒体元素的一个重要问题是每个浏览器支持的文件格式以及这些文件可以用来编码的各种 codec 的专利许可问题。Mozilla 和 Opera 希望使用开放源 Theora 视频容器和 codec，其对于在 Web 浏览器中包括 codec 不需要专利许可。另一方面，Apple 和 Google 不满意 Theora 的质量，特别是对于交付高清晰度（HD）内容方面，类似于 YouTube。它们更喜欢 H.264 codec，通常包含在 MP4、MOV 或 MKV 文件中。

但是，该问题不仅存在于视频，音频 codec 具有同样的问题。MP3 和 AAC 格式是有专利限制的，而 Vorbis 格式没有。Vorbis 音频的问题是其未被广泛使用，因为可移植媒体播放器和许多媒体软件应用程序不支持它。

在不久的将来，关于 HTML5 <video> 和 <audio> 需要做出许多决策，人们将非常有兴趣来了解在最终的建议中将推动哪种 codec 和格式。同时，您可以通过使视频可用于各种格式以及通过提供 Flash 视频作为最后的选择，来尝试支持所有浏览器。让我们希望可以做出最终决策，而不要留给浏览器供应商去确定要从支持哪种格式，那样将基本上表示这些新元素是无用的。