柠檬铺

HTML 5、CSS 3 及相关技术：新兴 web 标准的快速入门

—

由

柠檬铺
于

Web 标准发展和市场
现在是成为 Web 开发人员的绝佳机会。经过一段时间的休眠之后，标准机构和浏览器供应商在过去几年中显得异常繁忙，他们正忙于设计各种令人振奋的新兴技术。而开发人员则拼 命抓住这次机会，稳步推出各种演示程序和成熟的应用程序。受此趋势影响，一些公司如 Google 和 Apple 推出了符合标准的移动浏览器，而这些浏览器的畅销又推动这些公司采用新技术来推广其产品和服务。还有一些媒体也乘此机会对标准进行大肆炒作，使其超出了普 通 Web 开发人员和浏览器供应商的技术范畴。
当然，这样的争论也是有好处的。人们关注标准，这对业内每个人都有积极影响。从这个角度来看，持续使用统称，特别是  HTML5，作为 “新兴 Web 技术” 的简称就很有效。这能让不懂技术的人迅速了解（大致地）目前在标准方面开展的激动人心的工作。
有趣的是，甚至 W3C 也有所行动，使用 HTML5 及其标志（见 图 1）来宣传 “网络平台” 。            

图 1. HTML5 标志

而不利的一面是，目前对规范方面所做的工作，加上这种快速而宽松的标记方式，已经在开发人员社区之中造成对规范本身认识的混乱。除非您对这项工作很了解，否则就根本搞不懂这些新出现的缩略词代表什么。            
本文将为您澄清这些关于现存标准方面的混淆。本文概括了主要的标准，并提供了对技术本身的简易指南。
HTML5、“HTML5” 和 HTML：活的标准
关 于本规范最重要的一点，毫无疑问，就是对 HTML 的最新版本。无论是好是坏，“HTML5” 已经成了所有新兴技术的统称。JavaScript 开发人员 Peter Paul Koch 在 2010 年 1 月的博客中简要描述了这种现象。“只要是又新又酷的，都叫 “HTML5”。            
尽管这句话描述了很多人的想法，而且抓住了这几年以来发展的 HTML5 “品牌” 的本质，但对于构建网站的人来说，需要透过这个总称，深入挖掘炒作背后的实际技术规范。
这 里说明一下，Web Hypertext Application Technology Working Group (WHATWG)（目前推动 HTML 标准的工作小组 ）已经放弃了 W3C 长期实行的 “快照标准开发流程”。虽然该小组与 W3C 紧密合作创建 HTML5 快照规范，但他自身却主要关注将 HTML 简化为 “活的标准”。
先将语义命名在一边，我们深入看看 HTML5 快照规范中的实际技术。对于此规范，由于最近 WHATWG 发布了 Web 开发者专门版本；由此删除了上百页仅供浏览器供应商参考的信息，这使得理解本文档变得更加容易。            
HTML5 快照（snapshot）规范中的技术
在深入了解这些内容之前，要知道 WHATWG 将其称为活的标准并非玩笑之言。这是不断变化的目标。有一些技术，如 Canvas 2D API，已经包含在核心规范中，后来又形成自己的文档。            
新的语义元素
在此规范的所有新内容中，最快得到采用的大多是新的语义元素，如 Header、Footer、Section 以及 Aside。其中很多是根据一名编辑 Ian Hickson 的网络调查中的通用模式设计出的。这在 Header 和 Footer 中可以清楚看到，它们对应于网络中常见的 id="header" 和 id="footer" 模式。还有另外一些，像 hgroup、aside 和 figure，是现有  HTML 元素的逻辑附注和增强。            
尽 管具体浏览器对新元素的支持有限（例如，浏览器不会对 header 进行特殊处理），新语义元素的使用正变得越来越普遍。开发人员正在研究使用新元素的最佳实践和通用模式。例如，有些老版本的 Windows® Internet Explorer® 处理未知元素时会有问题，而一些库，如 Modernizr 或 HTML5Shiv 代码就能实现新元素跨浏览器使用。            
新的大纲算法
在了解新语义元素之前，先介绍一个新的大纲算法，它能生成更加灵活的文档大纲。除了标准的从 H1 到 H6 的 header 元素，HTML5 还引入了几个新的分段元素，有 section、article、aside、footer、header 和 nav。这些元素将文档大纲分成新的段落。除了熟悉的 header 元素和在页面上添加多个 H1 元素的能力，现在有了更多的选择可以创建语义丰富的结构化文档。            
在开发过程中使用如 HTML5 outliner（h5o）书签的工具对于处理新算法会很有帮助。这些新的功能可以让习惯查看大纲的人在整个开发过程中看到大纲形式的文档，从而使问题变得更加清晰。
视频和音频
在浏览器中播放音频和视频非常普通，很容易被人遗忘，在 Web 发展历史中，却没有原生方法来完成这项功能。这时新的 HTML5 音频和视频元素出现了。
从规范角度看，用浏览器本身的 API 来播放音频和视频比较直接，又符合设计。所有熟悉替代元素，如 IMG 的工作方式的人都会知道如何嵌入视频和音频。相应的 API 也很简单，如 清单 1 所示：

清单 1. 一个简单的视频样例

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<-- the HTML -->  

<figure>  

<video src="_assets/video/sample.webm" controls autoplay  

    width="400"

    height="300"

    id="video-sample"

    data-description="sample web video">  

    your browser does not support the video tag </video>  

<legend>This is a nice, sample web video</legend>  

</figure>  

//the JavaScript  

var video = document.getElementById("video-sample"),  

    toggle = document.getElementById("video-toggle");  

toggle.onclick = function() {  

    if (video.paused) {  

        video.play();  

        toggle.className="playing"  

    } else {  

        video.pause();  

        toggle.className="paused"  

    }  

};

 

不 幸的是，使用以上代码在所有主要浏览器中播放同一段视频目前还很困难。浏览器供应商面对的是两方不同的代码，实际情况就变得复杂很多。目前的情况是 Apple 和 Microsoft 坚定支持有专利担保的 h.264，而 Google、Opera 和 Mozilla 则拥护免费开放无版税的视频格式，如 WebM，网络上的视频格式比过去只有 Adobe® Flash® 一家的时代复杂多了。
表单元素和输入类型
HTML5 提供了几个新的 form 元素来更好地支持常见的输入任务。像 Email 和 URL 这样的格式能够在浏览器中正常使用。全新的表单输入元素有 range（用于滑块）、date （用于日期选取器）和 color （用于颜色选取器）。            
不幸的是，根据 Peter Paul Koch 的调查报告显示，除了 Opera 和 Research in Motion，其他浏览器供应商采用这些技术的行动缓慢。这很遗憾！
尽管有些元素，如画布，很华丽而且很 “酷”，但很多网站利润还是来自表单。对他们而言，好的表单代表好的网站。对用户见到的内容进行增强，会获得实际收益。
离线 Web 应用程序