本文介绍HTML5和CSS3的重要新特性，包括语义元素、canvas绘图、多媒体支持、本地存储、脱机应用及CSS3的效果与布局改进。
http://webdev.youkuaiyun.com/?p=474
开始之前
本教程假定您具有 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>
最近这些年，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 视频作为最后的选择，来尝试支持所有浏览器。让我们希望可以做出最终决策，而不要留给浏览器供应商去确定要从支持哪种格式，那样将基本上表示这些新元素是无用的。
同样，您将在本教程的后面部分看到 <video元素的操作。
本地存储和脱机应用程序
Web 开发人员过去习惯使用 cookie 在访问者的本地计算机上存储信息，允许 Web 页面稍后读取此信息。虽然 cookie 对于存储基础数据非常有用，但是它们受到以下事实的限制：Web 浏览器不需要为每个 Web 服务器保留超过 20 个 cookie 或每个 cookie 超过 4KB 的数据（包括名称和值）。另外，Cookie 在每次 HTTP 请求时都发送到 Web 服务器，这是一种资源浪费。
HTML5 为本地存储 API 的这些问题提供了解决方案，主要 HTML5 文档之外的一篇单独规范中将讲述该解决方案。通过该组 API，开发人员可以将信息存储在访问者的计算机上，同时确信它们之后仍将在那里。另外，该信息可以随时访问（甚至在页面被呈现之后），并且不会随着每次 HTTP 请求而被自动加载。该规范包括同源限制，这样可以防止 Web 站点读取或更改其他 Web 站点存储的数据。
大多数浏览器在本地缓存中存储 Web 页面，从而即使用户脱机时也可以查看这些页面。这对于静态页面非常好，但是无法用于通常为数据库驱动的动态内容，例如 Gmail、Facebook 或 Twitter。HTML5 提供了脱机应用程序支持，浏览器下载脱机使用应用程序需要的所有文件，当用户脱机使用该应用程序时，浏览器可以允许处理中所进行的任何更改在用户重新连接到互联网时都上载到服务器。
Web 表格增强功能
如果您以前创建过 Web 应用程序，您将更熟悉 HTML 的表格控件集合，其中一些是使用 <input元素来实施的。在 HTML 4 中，支持下列 input 类型：
- button
- checkbox
- file
- hidden
- image
- password
- reset
- radio
- submit
- text
另外，表格中还使用一些其他元素，例如 <select和 <textarea>。这些表格控件为诸如下列的基础表格字段提供了许多功能：姓名、电话号码和地址 — 您可能在联系人表格中发现这些字段。但是，Web 作为一种平台已经扩展，远不再是 HTML 格式用于提交联系人表格的阶段 — 现在它们用于提交应用程序数据来进行服务器端处理。因此，Web 应用程序开发人员不断发现他们需要一些更复杂的表格控件，例如微调按钮、滑块、日期/时间选择器、颜色选择器等等。
为了利用这些类型的控件，开发人员需要使用外部 JavaScript 库来提供 UI 组件，或者其他人使用替代开发框架，例如 Adobe Flex、Microsoft Silverlight 或 JavaFX。HTML5 通过提供完整范围的新表格 input 类型，目的在于填补其以前版本在这个方面的一些差距：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
目前，对这些新表格字段的支持是非常有限的。iPhone 上的 Mobile Safari 浏览器使用这些新类型中的一些来更改提供给用户的键盘类型（例如，对于电子邮件类型，将显示 @ 符号和 .com 快捷方式）。另外，Opera 为这些控件中的许多控件提供了一些新的部件，包括用于 number 类型的微调按钮和用于与日期相关的类型的日历日期选择器。这些新类型中最广泛可用的类型是 range 类型，Opera、Safari 和 Google Chrome 以滑块形式呈现该类型。
除了这些新的 input 类型，HTML5 还针对表格字段支持两种主要的新功能。第一种是自动聚焦，其告诉浏览器在呈现页面时自动将焦点置于特定表格字段，而无需 JavaScript 代码来进行此操作。第二个增强功能是占位符属性，其允许开发人员定义在基于文本框的控件内容为空白时其中将显示的文本。该功能的一个示例为搜索框，开发人员将不希望在框自身外使用标签。通过占位符属性，开发人员可以指定当控件的值为空白以及控件不具有焦点时将显示的文本。该属性的示例如 图 1 所示。
图 1. 占位符属性操作 
如图 1 所示，电子邮件地址和电话号码字段为空白且没有焦点时，占位符文本显示为灰色。该屏幕截图还显示了 range input 类型的一个例子，此处在 Safari 浏览器中通过滑块来表示。该屏幕截图截自本教程后面讨论的示例 Web 页面。
其他新功能
HTML5 包括许多新功能；无法在本教程中讲述所有这些功能。本部分简要概述了规范中的一些其他增强功能。
Web worker
该功能允许 JavaScript 代码设置为在后台处理中运行，从而促进多线程应用程序的开发。Web worker 提供给开发人员的主要好处是可以在后台处理密集计算，而不会影响用户界面的速度。
Geolocation
HTML5 包括一个 geolocation API，其允许 Web 应用程序确定您当前的地理位置，假定您的目标设备提供用于查找此类信息的功能（例如，移动电话上的 GPS）。如果您没有支持此功能的设备（例如，iPhone 或基于 Android 2.0 的智能手机），您可以使用 Firefox 并下载允许您手动设置您的位置的插件。
拖放
另一个有趣的功能是包括一个拖放 API。直到现在，实现无插件的拖放都要依赖于某些非常复杂的 JavaScript 或使用诸如 script.aculo.us 的 JavaScript 库。
跨文档消息传输
该功能允许不同窗口（和 iframe）中的文档互相发送和接收消息。对于开发将托管在主要 Web 页面的服务器之外的服务器上的部件和应用程序（类似于 Facebook 应用程序），该功能将会证明非常有用。
其他功能
HTML5 引入的其他新功能包括 MIME 类型和协议处理程序注册，从而 Web 应用程序可以注册为特定文件类型或协议的默认应用程序；浏览器历史记录管理，直到现在仍需要手动或使用外部 JavaScript 框架来实现该管理；其他许多新元素和属性，使 Web 开发人员工作更轻松。
CSS3 中的新功能
本部分向您介绍 CSS 级别 3 规范中的新功能 — 包括新 CSS 选择器，例如结构的、基于状态的以及否定伪类，以及其他新选择器类型。还将介绍 CSS3 提供的许多效果，这些效果以前需要使用单独的应用程序来创建图像并将其保存为 GIF、JPG 或 PNG。此类效果包括文本和框上的阴影、边框上的圆角以及使用不透明性来创建半透明外观。这些功能中的许多功能（例如不透明性和圆角）由于它们在旧 Web 浏览器中非常缓慢地降级，它们相对普遍地被使用。然后，您将学习可以使用 CSS3 创建的新多栏布局。这些布局回退到报纸布局，在这种布局中，文本将根据需要位于一组栏中或某个特定栏中。将要讨论的另一个功能是使用 @font-face 标记包括非标准 Web 字体的问题。最后，将介绍一些其他新 CSS3 功能，例如对 HSL（色调、饱和度和亮度）和 RGBA（红、绿、蓝和 Alpha）颜色模型的支持。
新选择器
CSS 选择器是指使用样式表设计 HTML 元素样式的方式。例如，要在所有 <div元素周围放置边框，将使用选择器 div：div { border: 1px solid #000; }。
要对具有类 highlight 的所有元素应用背景颜色，将使用选择器 .highlight：.highlight { background-color: yellow; }。
最后，要更改 ID 属性值为 myDiv 的元素的宽度，将使用：#myDiv { width: 250px; }。
当然，可以合并这些选择器，所以要选择具有类 highlight 的所有 <div元素，将使用 div.highlight，或者要选择具有 ID myDiv 的 <div元素，将使用 div#myDiv。
除了这些简单的选择器，CSS 还包括（并且自从以前的版本以来就已经这样）一系列更复杂的选择器。例如，可以使用选择器 input[type="text"] 来选择仅包含属性类型的值为 text 的 input 元素。或者可以使用伪类 :hover 设计鼠标置于元素之上时该元素的样式，例如：a:hover { color: red; }。
还有许多其他选择器，所有这些选择器都是提供用来使选择要设计样式的元素变得更容易。使用 CSS3，向该集合中添加了甚至更多新选择器，它们都使开发人员的工作更轻松并减少了他们需要编写的 HTML 和 JavaScript 数量。
属性选择器
E[foo^="bar"]
选择元素 E，其 foo 属性以字符串 bar 开头
E[foo$="bar"]
选择元素 E，其 foo 属性以字符串 bar 结尾
E[foo*="bar"]
选择元素 E，其 foo 属性包含字符串 bar
结构伪类
E:root
选择元素 E，文档的根（<html标记）
E:nth-child(n)
选择元素 E，其父元素的第 n 个子级
E:nth-last-child(n)
选择元素 E，其父元素的倒数第 n 个子级
E:nth-of-type(n)
选择元素 E，其类型的第 n 个同级
E:nth-last-of-type(n)
选择元素 E，其类型的倒数第 n 个同级
E:last-child
选择元素 E，其是其父元素的最后一个子级（请注意 E:first-child 是以前在 CSS2 中定义的）
E:first-of-type
选择元素 E，其类型的第一个同级
E:last-of-type
选择元素 E，其类型的最后一个同级
E:only-child
选择元素 E，其父元素的惟一子级
E:only-of-type
选择元素 E，其类型的惟一同级
E:empty
选择元素 E，其没有子级（包括文本节点）
target 伪类
E:target
选择元素 E，其实所指 URI 的目标
UI 元素状态伪类
E:enabled
选择用户界面元素 E，其为启用状态
E:disabled
选择用户界面元素 E，其为禁用状态
E:checked
选择用户界面元素 E（单选按钮或复选框），其为选中状态
Negation 伪类
E:not(s)
选择元素 E，其与简单的选择器 s 不匹配
常规同级配合器
E ~ F
选择元素 F，其前面是元素 E
浏览器对新的属性选择器和常规同级配合器的支持非常好，因为它们计划可以在所有现代 Web 浏览器中使用。大多数浏览器的最新版本中包括了对新的伪类的支持，但是对于较旧的浏览器（例如 Internet Explorer 6/7 和 Firefox 3.0），您可能需要包括后退的方法。
新效果
虽然新选择器可能可以最大程度地减少开发人员的问题，但是人们最想看到的增强功能是可用的引人注意的新效果。这些效果是通过许多新 CSS 属性促成的，包括
- background（现在支持多个背景）
- background-clip
- background-origin
- background-size
- border-radius（圆角）
- border-image
- border-color（斜边框）
- box-shadow（边框上的阴影，没有图像）
- box-sizing
- opacity
- outline-offset
- resize
- text-overflow
- text-shadow
- word-wrap
本教程结尾处创建的示例 HTML5/CSS3 Web 页面将显示这些新效果中一些效果的操作。
多栏布局
CSS3 多栏布局允许文本位于许多栏中，就像报纸上那样。可以以两种方式实现此布局，使用 column-width 属性，其中您需要定义每个栏应该的宽度（栏数由可用于该容器的空间决定），或者使用 column-count 属性，其中您需要定义应该使用的栏数。然后宽度将根据可用于每栏的空间而变化。
多栏布局的其他功能包括 column-gap 属性，其允许开发人员定义使用 column-width 时栏之间应具有的空间。另一种有用的增加项是 column-rule 属性，其允许在栏之间使用 border-style 规则。最后是 column-space-distribution 属性，其确定应如何在栏间分配剩余空间。
目前 Mozilla 和 WebKit 浏览器支持多栏布局。现在，分别通过前缀为 -moz 或 -webkit 的临时专有属性来实现该布局。当规范最终确定后，这些浏览器将最终使用 CSS 标准属性。
Web 字体
Web 字体实际上计划用于 CSS2，已经可用于 Microsoft Internet Explorer（自版本 5）。不幸的是，这需要使用专有.eot (Embedded Open Type) 字体格式，但是其他浏览器供应商都没有选择实现该字体。结果，Web 字体实际上在基于 CSS2 的 Web 站点中从来都没有使用过。
但是，使用 Firefox、Safari、Chrome 和 Opera 的最新版本，您现在可以使用 @font-face 规则在您的 Web 页面上使用任何授权的 .ttf (TrueType) 或 .otf (OpenType) 字体。@font-face 规则的示例如下所示：@font-face { font-family: Alexa; src: url(’Alexa.otf’); }。
现在您可以在自己的 CSS 规则中使用此字体，例如：article p { font-family: Alexa, Arial, Helvetica, sans-serif; }。
请记住字体与图像类似 — 如果它们不是您自己的，您可能需要得到许可才能在 Web 上使用它们。或者，您可以支付（或者免费下载）一些可以根据需要在您的 Web 页面上包括的免版权税的字体。
其他新功能
CSS3 还包括其他许多新功能，包括支持新的颜色值、特别是 HSL（色调、饱和度、亮度）和两种具有 alpha 属性的颜色值 — RGBA（红、绿、蓝、Alpha）和 HSLA（色调、饱和度、亮度、Alpha）。媒体查询将允许您根据设备的视口尺寸为不同的设备定义不同的样式。例如，可以为视口小于 500 像素的设备（例如智能手机、PDA 或其他移动设备）提供特定的样式。CSS3 的讲话模块允许您控制屏幕阅读器讲话的属性，包括音量、平衡、速度、重音等等。
欲查看全文，请点击 使用HTML5 和CSS3 创建现代 Web 站点
http://www.ibm.com/developerworks/cn/web/tutorials/wa-html5/index.html
扫一扫
3335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
