1.1　HTML5概述

从2010年开始，HTML5和CSS3就一直是网络世界倍受追捧的技术热点。以HTML5+CSS3为主的网络时代，使互联网进入了一个崭新的发展阶段。

1.1.1　HTML版本概览

HTML从诞生至今，经历了近30年的发展，其中经历的版本及发布日期如表1.1所示。

表1.1　HTML语言的发展过程

1.1.2　HTML5诞生记

在20世纪末期，W3C开始琢磨着改良HTML语言，当时的版本是HTML4.01。但是在后来的开发和维护过程中，出现了方向性分歧：是开发XHTML 1，再到XHTML 2，最后终极目标是XML；还是坚持实用主义原则，快速开发出改良的HTML5版本？

2004年W3C成员内部的一次研讨会上，当时Opera公司的代表伊恩·希克森（Ian Hickson）提出了一个扩展和改进HTML的建议。他建议新任务组可以跟XHTML 2并行，但是在已有HTML的基础上开展工作，目标是对HTML进行扩展。但是W3C投票表示反对，因为他们认为HTML已经毫无前景，XHTML 2才是未来的方向。

然后，Opera、Apple等浏览器厂商，以及部分成员忍受不了W3C的工作机制和拖沓的行事节奏，决定脱离W3C，他们成立了WHATWG（Web Hypertext Applications Technology Working Group, Web超文本应用技术工作组），这就为HTML5将来的命运埋下了伏笔。

WHATWG决定完全脱离W3C，在HTML的基础上开展工作，向其中添加一些新东西。这个工作组的成员里有浏览器厂商，因此他们可以保证实现各种新奇、实用的点子。结果，大家不断提出一些好点子，并且逐一整合到新版本浏览器中。

WHATWG的工作效率很高，不久就初见成效。在此期间，W3C的XHTML 2没有什么实质性的进展。在2006年，蒂姆·伯纳斯－李写了一篇博客反思HTML发展历史：“你们知道吗？我们错了。我们错在企图一夜之间就让Web跨入XML时代，我们的想法太不切实际了，是的，也许我们应该重新组建HTML工作组了。”

W3C在2007年组建了HTML5工作组。这个工作组面临的第一个问题是“我们是从头开始做起呢，还是在2004年成立的那个叫WHATWG的工作组既有成果的基础上开始工作呢？”

答案是显而易见的，他们当然希望从已经取得的成果着手，以此为基础开展工作。工作组投了一次票，同意在WHATWG工作成果的基础上继续开展工作。

第二个问题就是如何理顺两个工作组之间的关系。W3C这个工作组的编辑应该由谁担任？是不是还让WHATWG的编辑，也就是现在Google的伊恩·希克森来兼任？于是他们又投了一次票，赞成让伊恩·希克森担任W3C HTML5规范的编辑，同时兼任WHATWG的编辑，更有助于新工作组开展工作。

这就是他们投票的结果，也就是我们今天看到的局面：一种格式，两个版本。WHATWG网站上有这个规范，而W3C网站上同样也有一份。

如果不了解内情，你很可能会产生这样的疑问：“哪个版本才是真正的规范？”当然，这两个版本内容是一样的，基本上相同。实际上，这两个版本将来还会分道扬镳。现在已经有了分道扬镳的迹象。W3C最终要制定一个具体的规范，这个规范会成为一个工作草案，定格在某个历史时刻。

而WHATWG还在不断地迭代。即使目前的HTML5也不能完全涵盖WHATWG正在从事的工作。最准确的理解就是WHATWG正在开发一项简单的HTML或Web技术，因为这才是他们工作的核心目标。然而，同时存在两个这样的工作组，这两个工作组同时开发一个基本相同的规范，这无论如何也容易让人产生误解，误解就可能造成麻烦。

其实这两个工作组背后各自有各自的流程，因为它们的理念完全不同。在WHATWG内部，可以说是一种独裁的工作机制。伊恩·希克森是编辑。他会听取各方意见，在所有成员各抒己见，充分陈述自己的观点之后，他批准自己认为正确的意见。而W3C则截然相反，可以说是一种民主的工作机制。所有成员都可以发表意见，而且每个人都有投票表决的权利。这个流程的关键在于投票表决。从表面上看，WHATWG的工作机制让人难以接受，W3C的工作机制听起来让人很舒服，至少体现了人人平等的精神。但在实践中，WHATWG的工作机制运行得非常好。这主要归功于伊恩·希克森。他在听取各方意见时，始终可以做到丝毫不带个人感情色彩。

从原理上讲，W3C的工作机制很公平，而实际上却非常容易在某些流程或环节上卡壳，造成工作停滞不前，一件事情要达成决议往往需要花费很长时间。那到底哪种工作机制最好呢？个人认为，最好的工作机制是将二者结合起来。而事实也是两个规范制定主体在共同制定一份相同的规范，这倒是非常有利于两种工作机制相互取长补短。

两个工作组之所以能够同心同德，主要原因是HTML5的设计思想。因为从一开始就确定了设计HTML5所要坚持的原则。结果，我们不仅看到了一份规范，也就是W3C站点上公布的那份文档，即HTML5语言规范，还在W3C站点上看到了另一份文档，也就是HTML5设计原理。

1.1.3　HTML5组织

HTML5是W3C与WHATWG合作的结晶。HTML5开发主要由下面三个组织负责。

　WHATWG：由来自Apple、Mozilla、Google、Opera等浏览器厂商的专家组成，成立于2004年。WHATWG负责开发HTML和Web应用API。

　W3C：指World Wide Web Consortium，万维网联盟，负责发布HTML5规范。

　IETF（因特网工程任务组）：负责Internet协议开发。HTML5定义的WebSocket API依赖于新的WebSocket协议，IETF工作组负责开发这个协议。

1.1.4　HTML5开发规则

为了避免HTML5开发过程中出现的各种分歧和偏差，HTML5开发工作组在共识基础上建立了一套行事规则：

　新特性应该基于HTML、CSS、DOM以及JavaScript。

　减少对外部插件的依赖，如Flash。

　更优秀的错误处理。

　更多取代脚本的标记。

　HTML5应该独立于设备。

　开发进程应即时、透明，倾听技术社区的声音，吸纳社区内优秀的Web应用。

　允许试错，允许纠偏，从实践中来，服务于实践，快速迭代。

1.1.5　HTML5特性

下面简单介绍HTML5特性和优势，以便增强读者自学HTML5的动力和明确目标。

1．兼容性

考虑到互联网上HTML文档已经存在20多年了，因此支持所有现存HTML文档是非常重要的。HTML5不是颠覆性的革新，它的核心理念就是要保持与过去技术的兼容和过渡。一旦浏览器不支持HTML5的某项功能，针对该功能的备选行为就会悄悄运行。

2．实用性

HTML5新增加的元素都是对现有网页和用户习惯进行跟踪、分析和概括而推出的。例如，Google分析了上百万的页面，从中分析出了DIV标签的通用ID名称，并且发现其重复量很大，如很多开发人员使用<div id="header">来标记页眉区域，为了解决实际问题，HTML5就直接添加一个<header>标签。也就是说，HTML5新增的很多元素、属性或者功能都是根据现实互联网中已经存在的各种应用进行归纳和提炼，而不是在实验室中进行理想化的虚构新功能。

3．效率

HTML5规范是基于用户优先的原则编写的，其宗旨是用户即上帝，这意味着在遇到无法解决的冲突时，规范会把用户放到第一位，其次是页面制作者，再次是浏览器解析标准，接着是规范制定者（如W3C、WHATWG），最后才考虑理论的纯粹性。因此，HTML5的绝大部分是实用的，只是有些情况下还不够完美。例如，下面的几种代码写法在HTML5中都能被识别。

    id="prohtml5"
    id=prohtml5
    ID="prohtml5"

当然，上面几种写法比较混乱，不够严谨，但是从用户开发角度考虑，用户不在乎代码怎么写，根据个人书写习惯反而提高了代码编写效率。

4．安全性

为保证足够安全，HTML5引入了一种新的基于来源的安全模型，该模型不仅易用，而且对各种不同的API都通用。这个安全模型可以不需要借助于任何所谓聪明、有创意却不安全的hack就能跨域进行安全对话。

5．分离

在清晰分离表现与内容方面，HTML5迈出了很大的步伐。HTML5在所有可能的地方都努力进行了分离，包括HTML和CSS。实际上，HTML5规范已经不支持老版本HTML的大部分表现功能了。

6．简化

HTML5要的就是简单、避免不必要的复杂性。HTML5的口号是：简单至上，尽可能简化。因此，HTML5做了以下改进：

　以浏览器原生能力替代复杂的JavaScript代码。

　简化的DOCTYPE。

　简化的字符集声明。

　简单而强大的HTML5 API。

7．通用性

通用访问的原则可以分成三个概念：

　可访问性：出于对残障用户的考虑，HTML5与WAI（Web可访问性倡议）和ARIA（可访问的富Internet应用）做到了紧密结合，WAI-ARIA中以屏幕阅读器为基础的元素已经被添加到HTML中。

　媒体中立：如果可能的话，HTML5的功能在所有不同的设备和平台上应该都能正常运行。

　支持所有语种：如新的<ruby>元素支持在东亚页面排版中会用到的Ruby注释。

8．无插件

在传统Web应用中，很多功能只能通过插件或者复杂的hack来实现，但在HTML5中提供了对这些功能的原生支持。插件的方式存在很多问题：

　插件安装可能失败。

　插件可以被禁用或屏蔽，如Flash插件。

　插件自身会成为被攻击的对象。

　因为插件边界、剪裁和透明度问题，插件不容易与HTML文档的其他部分集成。

以HTML5中的canvas元素为例，有很多非常底层的事情以前是没办法做到的，如在HTML4的页面中就难画出对角线，而有了canvas就可以很轻易地实现了。基于HTML5的各类API的优秀设计，可以轻松地对它们进行组合应用。例如，从video元素中抓取的帧可以显示在canvas里面，用户单击canvas即可播放这帧对应的视频文件。

最后，用万维网联盟创始人蒂姆·伯纳斯－李的评论来小结，“今天，我们想做的事情已经不再是通过浏览器观看视频或收听音频，或者在一部手机上运行浏览器。我们希望通过不同的设备，在任何地方，都能够共享照片、网上购物、阅读新闻以及查找信息。虽然大多数用户对HTML5和开放Web平台（Open Web Platform, OWP）并不熟悉，但是它们正在不断改进用户体验”。

1.1.6　浏览器检测

HTML5发展的速度非常快，因此不用担心浏览器的支持问题。用户可以访问www.caniuse.com，该网站按照浏览器的版本提供了详尽的HTML5功能支持情况。

如果通过浏览器访问www.html5test.com，该网站会直接显示用户浏览器对HTML5规范的支持情况。另外，还可以使用Modernizr（JavaScript库）进行特性检测，它提供了非常先进的HTML5和CSS3检测功能。建议使用Modernizr检测当前浏览器是否支持某些特性。