开始之前本教程假定您具有 HTML、CSS 和 JavaScript 的一些基本经验。假定您知道什么是 HTML 元素或标记、属性表示什么、HTML 标记的基本语法、Web 页面的常规结构等等。关于 CSS，您应该熟悉元素、类、以及基于 ID 的选择器、CSS 特性的语法以及如何使用内嵌或外部样式表在您的 Web 页面中包括 CSS。最后，假定您具有一些 JavaScript 的工作知识，例如什么是变量、函数、if 语句和 for 循环以及如何在您的 Web 页面中包括 JavaScript 代码。如果您决定需要在开始之前先复习一下以上任何技术，请跳至 参考资料部分，查找一些有用的教程和文章，它们将帮助您快速了解 HTML、CSS 和 JavaScript 开发的基础知识。

关于本教程

在过去的十年左右，Web 2.0、富因特网应用程序（RIA）以及 Semantic Web 等概念都将 HTML、CSS 和 JavaScript 推到了它们的极限以及极限之外，建成依赖 Adobe® Flash 等插件来支持视频和音频等组件以及高度图形化和交互的应用程序。Adobe Flex 开发框架、Microsoft® 的 Silverlight 平台和 JavaFX 都似乎在 HTML 的缺点使得开发人员犯难时来提供支持。但是，使用 HTML5，标记语言将具有完整的多媒体支持、本地存储和脱机应用程序支持、原生 2D 绘图 API 以及承载新应用程序开发 API，提供所有这些都是旨在证明 HTML、CSS 和 JavaScript 可以为您的 Web 站点和应用程序提供一个丰富的前端。

HTML5 被广泛认为是计划在 2010 年出现的最重要的新技术之一，已经有几本关于该主题的书正在编写过程中，其中一些将最早在今年三月初出版。在过去许多年，Web 都是依赖于外部插件来提供 Web 浏览器自己无法支持的功能，特别是在 2D 绘图、动画以及多媒体方面。HTML 和 CSS 规范的最新版本目的是不再需要这些额外的浏览器组件来促进此类功能，以及减少进行以下细小操作所需的 JavaScript（或者在某些情况下完全不再需要 JavaScript）：行拖放、行条带化等等。请按照本教程学习如何使用 HTML5。

先决条件

HTML5 是一种对象较新的规范，因为浏览器支持是非常有限的（在编写本教程时）。本教程中提供的代码尽可能是跨浏览器兼容的，但是一些功能将无法在所有浏览器中使用。当前为浏览器特定的任何功能都会在本教程中明确指出。为了确保您可以体验所有这些新功能，建议您在开发 HTML5 和 CSS3 应用程序时在您的系统上安装以下 Web 浏览器的最新版本：

• Mozilla Firefox（版本3.5+）
• Apple Safari（版本 4.0+）
• Opera（版本 10.0+）
• Google Chrome（版本 3.0+）

您不需任何特定软件来编写 HTML 和 CSS 代码；任何基本文本编辑器都可以（例如 Notepad、vi、emacs 等等）。在本教程中，假定 源代码 存储在您本地计算机上的一个目录中 — 您不需要使用 Web 服务器或将文件上载到 Web 承载服务。

 

HTML5 中的新功能

在本部分，您将了解 HTML5 提供的一些很好的新功能。您将首先学习一些新的语义元素，这些元素用来提供现在 Web 页面的各个部分的意义：页眉、页脚、导航栏、边栏等等。然后，您将学习重要的新 <canvas> 元素和 2D 绘图 JavaScript API，可以用来创建形状、文本、动画、过渡等等。接下来，您将看到新的 <audio> 和 <video> 元素如何用来替代 Web 当前对 Flash 作为一种多媒体交付平台的依赖。接着，将向您介绍本地存储 API 和脱机应用程序支持，它们将进一步使 Web 应用程序在功能方面与其桌面对应项相一致，甚至在未连接到网络或互联网时也是如此。本部分结尾部分将简要概述 HTML5 规范中包括的其他新元素、属性和 API。

语义元素

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> 元素表示副标题。

本教程结尾的示例 Web 站点包括这些新的语义元素中的多个元素，我将在那时更详细地说明它们的语法和使用。

<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 应用程序。您将在本教程后面部分的示例 HTML5/CSS3 Web 站点中看到 <canvas> 元素操作的示例。

使用 <audio> 和 <video>

上一篇：HTML5基础，第4部分：点睛之笔Canvas
下一篇：HTML5多媒体组件的使用——第三部分：自定义控件