[TEAP] HTML5简史

什么是TEAP？TEAP，Turingbook Early Access Program，即图灵在译新书的试读样章。一本书的翻译周期约为3到6个月，在这么长时间内，译者与读者没有沟通和交流是一件不可想象的事儿。TEAP 模仿的是 Manning 的 MEAP，事先公开未经编辑的内容，读者可以提前阅读将来才能出版的内容，同时译者也能收获宝贵的反馈意见，以便改进翻译，提高质量。本文为《HTML5秘籍》第1章前两节。

如果说HTML是一部电影，那HTML5就是一次大转折。

HTML本来是不会活过21世纪的。官方Web标准组织W3C（万维网联盟World Wide Web Consortium的简写）1998年对HTML就已经撒手不管了。W3C把未来都寄托在XHTML，这个更具现代特色的后续标准身上。 是一群被剥夺了话语权的人，让HTML起死回生并为本书将要探讨的功能奠定了基础。

本章，你会了解到HTML死亡的原因，以及它又是怎样复活的；了解HTML5的设计原理与功能；还将认识到恼人的浏览器支持问题。在这一章，你将第一次看到和善的HTML5文档——既包括其最简单的形式，也包括一个更具实用性的模板。而在这个模板基础上，可以构建出任何网站来。

HTML5的故事

大家都知道，HTML是用来编写网页的语言。HTML的基本思想（使用元素为内容添加结构）从Web诞生以来就没有变过。事实上，即使是最陈旧的网页，在最新的浏览器（包括Firefox、Chrome等那时候还没有的浏览器）中仍然可以得到完美的呈现。

年长和成功也会带来相当大的风险，那就是所有人都想取代你！1998年，W3C停止了对HTML的维护，作为对它的改进，开始制定一个基于XML的后续版本——XHTML 1.0。

XHTML 1.0：更严格的标准

XHTML与HTML的语法绝大部分都是相同的，只不过要求更严格。很多以前粗心大意的HTML标记，在XHTML中都变成了不能接受的。

例如，假设你想把标题中的最后一个词标记为斜体，本来应该写：

<h1>The Life of a <i>Duck</i></h1>

但你一不小心放错了最后两个标签的位置：

<h1>The Life of a <i>Duck</h1></i>

浏览器在遇到这个稍微有点乱的标记之后，它知道你想干什么。于是，它就把那个词变成斜体，而且不会抱怨你。可是，标签不匹配违反了XHTML的规定。如果把页面复制到一个XHTML验证器中（或使用Dreamweaver之类的网页设计工具时），你就会看到一个警告，告诉你哪里有错误。从Web设计的角度看，这种提示很有用，因为你可以发现那些会导致在不同浏览器中显示不一致的微小错误，这些错误在编辑和增强页面时还可能导致更严重的问题。

最初，XHTML获得了成功。由于厌倦了浏览器的古怪行为和怎么写都可以通过的不正常状态，专业的Web开发人员对XHTML还是非常拥护的。后来，XHTML标准又强迫他们养成更好的习惯，同时放弃HTML中那些半生不熟的格式化功能。可是，与XML工具协同、降低自动化程序处理页面的难度、方便地移植到移动平台以及XHTML语言自身的可扩展性等这些预期的好处，从来没有在XHTML身上实现过。

即便如此，XHTML仍然成为最严肃的Web设计师所遵循的标准。尽管看起来所有人都挺满意的，但实际上却存在一个潜规则：浏览器虽然理解XHTML标记，但却不会严格地按照标准执行错误检查。这就意味着页面仍然可以不遵守XHTML规则，浏览器则视而不见（原文有误，前后矛盾。——译者注）。事实上，没有什么可以阻止Web开发人员把乱糟糟的标记和陈旧的HTML内容混在一起，然后还说这是XHTML页面。世界上根本就没有一个浏览器站出来反对这种行为。这种情况让那些负责XHTML标准的人深感不安。

XHTML 2：意想不到的失败

解决方案就是XHTML 2。这个新版本规定了严格的错误处理规则，强制要求浏览器拒绝无效的XHTML 2页面，同时也摒弃了很多从HTML沿习下来的怪异行为和编码惯例。比如说，以编号方式（<h1>、<h2>、<h2>等）区分标题的方法被一个<h>元素取代，这个元素的重要性取决于它在网页中的位置。类似地，由于允许Web开发人员将任何元素转换为链接，<a>元素的地位一落千丈。而<img>元素因为增加了一种提供替代内容的新方式，也丧失了原有的alt属性。

这些变化是XHTML 2的典型特征。从理论上来看，这些改变更优美也更合理。而从实践角度说，这就要求每个人都必须改变以前编写网页的方式（已经存在网页必须更新），但付出这些代价却没有增加任何新功能，让这一切变得似乎没有了价值。与此同时，XHTML 2还宣布了几个众所周知的元素作废，比如<b>（用于加粗文本）、<i>（变斜体）和<iframe>（用于在网页中嵌入另一个网页），但这些元素在Web设计人员中仍然深得人心。

但最糟糕的，还是慢得要死的制定过程。XHTML 2的制定过程整整拖了5年才完成，开发人员的激情早都灰飞烟灭了。

HTML5：起死回生

几乎与此同时（从2004年开始），有一群人从另外一个角度展望Web的未来。他们想的不是从HTML中挑出各式各样的毛病（或者干脆说是主张“不纯粹的哲学观”），而是它还缺少什么Web开发人员编码时急需的功能。

归根结底，HTML最早是作为显示文档的手段出现的。辅之以JavaScript，它其实已经演变成了一个系统，可以开发搜索引擎、网上商店、在线地图、邮件阅读器以及其他各种能够想象得到的应用。虽然设计巧妙的Web应用可以实现很多令人赞叹的功能，但开发这样的应用远非易事。多数都得编写大量JavaScript代码，还要用到一或多个流行的JavaScript工具包，乃至在Web服务器上运行的服务器端Web应用。要让所有这些方面在不同的浏览器中都能紧密配合不出差错是一个挑战。即使是赢得了挑战，你还要记住把这些方面联系到一起的那些错综复杂的细节。

开发浏览器的人对这种情况特别关注。于是，来自Opera Software（开发Opera浏览器的公司）和Mozilla Foundation（开发Firefox浏览器的组织）的一些具有超前意识的人纷纷建言，希望XHTML能加入一些对开发人员更有用的功能。但他们的建议并没有被采纳，结果Opera、Mozilla和Apple自发地组建了WHATWG（Web Hypertext Application Technology Working Group，Web超文本应用技术工作组），致力于寻找新的解决方案。

WHATWG不想取代HTML，而是考虑以无障碍、向后兼容的方式去扩展它。这个组织最早的工作成果包含两个补充规范：Web Application 1.0和Web Forms 2.0。而HTML5正是在这两个标准的基础上发展起来的。

注意
HTML5中的数字5表示这个标准是HTML的后续版本（XHTML之前，HTML的版本号是4.01）。当然，这个解释也不完全正确，因为HTML5支持自HTML 4.01发布以来的10年间出现在网页中的所有新东西，包括严格的XHTML风格的语法（只要你愿意就可以用）和大量的JavaScript创新。但不管怎么说，这个名字仍然清楚地表明：HTML5虽然支持XHTML的规定，但它要求的则是HTML的规则。

2007年，WHATWG阵营获得了空前的支持。痛定思痛之后，W3C宣布解散负责制定XHTML 2标准的工作组，并开始致力于将HTML5改造为正式的标准。就这样，最初的HTML5被分割成多个容易管理的模块，而本来统称为HTML5的很多功能分散到了几个独立的标准中（详见后面的附注栏）。

HTML5包含哪些功能

如果有人说某某浏览器“支持”HTML5，其实根本没有这回事。实际上，任何浏览器支持的都是一个逐步扩展的HTML5相关功能的子集。这个结果既好又不好。说好，是因为浏览器可以迅速实现HTML5中业已成熟的部分，而任由其他部分继续发展。说不好，则是因为编写网页的人必须检查浏览器是否支持自己想用的功能。（本书将会介绍一些检测浏览器的技术，有的很麻烦，有的则没有那么麻烦。）

以下列出了HTML5涵盖的一些主要功能。

• HTML5核心。这一部分主要由W3C官方的规范组成，涉及新的语义元素（第2章和第3章）、新的增强的Web表单微件（第4章）、音频和视频支持（第5章）和通过JavaScript绘图的Canvas（第6章和第7章）。这一部分的功能大多数都得到了浏览器很好的支持。

• 曾经属于HTML5的功能。这一部分源自WHATWG最初制定的HTML5规范，其中大多数功能需要JavaScript且支持富Web应用开发。最重要的包括本地数据存储（第9章）、离线应用（第10章）和消息传递（第11章），但本书要介绍的内容还不止这些。

• 有时候会被称为HTML5的功能。这些通常是指下一代功能，虽然它们从未进入过HTML5标准，但人们还是经常会把它们与HTML5相提并论。这部分包括CSS3（第8章）和地理定位（第12章）。

令人不解的是，导致标准这么令人困惑的不仅仅是那些不懂技术的管理者和技术作者，甚至连W3C都在有意无意地模糊“真正的”HTML5（已有标准）和“宣传用”版本（包括所有新冒头的技术和其他乱七八糟的东西）之间的界限。举个例子，官方W3C标志网站（www.w3.org/html/logo）鼓励人们生成用于宣传CSS3和SVG的HTML5标志，而前两个标准在HTML5出现之前就已经在开发了。

HTML：活着的语言

从W3C到WHATWG，然后再回到W3C，这个过程导致了相当罕见的转换与磨合。从技术上说，什么是或什么不是HTML5由W3C说了算。但与此同时，WHATWG一直在设计未来的HTML功能。直到最近，他们才不再把自己的工作成果称为HTML5，而是简单地称为HTML，表明HTML还会继续活下去。

因为HTML是一门活着的语言，所以任何时候HTML标准中都可能增添新功能（和新元素）。是否使用这些功能取决编写网页的人，而是否支持这些功能则取决开发浏览器的人。但所有功能都不再与特定的版本号紧密相关。

Web开发人员听到这么一说，第一反应通常是大惑不解。毕竟，谁希望浏览器对标准的支持各不相同，而谁又愿意在选择功能时只凭它们将来会得到支持这个可能性呢？然而，冷静下来想一想，大多数Web开发人员还是不情愿地接受了这个现实：不管是好是坏，这不正是今天浏览器的现状嘛，而且从Web诞生的那一天起始终都是这样的。

前面我们解释过，今天的浏览器乐于接受支持一大堆乱七八糟的功能这个现实。你可以在激进的XHTML页面中加上像<marquee>元素（用于创建滚动文本，已废弃）这样被认为是倒行逆施的东西，任何浏览器都不会反对。类似地，即便是在对最老的标准的支持方面，有些浏览器也仍然存在一些广为人知遗漏。比如，有些浏览器开发商在完整地支持CSS2之前就开始实现CSS3，结果很多CSS2特性后来都没有实现。唯一的区别就是HTML5现在把“活着的语言”变成了常规状态。同样，就像我们正在用新的、创新性的一章来介绍HTML一样，它经过了一番轮回终于又恢复了它的本来面貌，这不也正是一个天大的讽刺吗？

提示
  要了解当下正在发展中的HTML，包括我们称为HTML5的部分和少量但始终在变化的新的还没有得到支持的功能，请访问http://whatwg.org/html。要跟踪有关HTML但不那么官方的新闻，可以访问WHATWG的博客http://blog.whatwg.org。

HTML5的三个主要原理

此时此刻，有的读者可能已经按捺不住了，迫不急待地想知道真正的HTML5页面到底是什么样子的。不过在此之前，有必要先了解一下制定HTML5规范的那些人当时是怎么想的。只有理解了这门语言背后的设计思想，才能真正明白本书将要介绍的那些古怪的行为、复杂的现象和偶尔会让人抓耳挠腮问题。

不破坏Web

“不破坏Web”的意思是标准不应该引入会导致已有的网页无法工作的改变。这种事儿极少发生。

“不破坏Web”还意味着标准不应该出人意料地更改规则，不能认定今天还完美无缺的网页到了明天就要作废（即使可以使用也要作废）。比如，XHTML 2破坏了Web，因为它要求马上就显著改变以前编写网页的方式。没错，原来的网页还能用，但那都是浏览器支持向后兼容的功劳。如果你为将来打算，想按照最新标准重写网页，就得浪费数不清的时间去纠正XHTML 2已经明令禁止的“错误”。

HTML5的立场不一样。HTML5之前可以接受的，在HTML5之后照样可以接受。事实也是，符合HTML 4.01标准的网页在HTML5中仍然是有效的。

注意
  与以往的标准不同，HTML5不仅向浏览器开发商明示该支持什么，还说明并规范化了它们原来的处理方式。由于HTML5标准描述的都是事实，而不是抛出一堆理想的规则了事，因此它有望成为有史以来受支持程度最高的Web标准。

HTML5怎么处理废弃元素

因为HTML5支持所有HTML，所以它支持很多被认为是废弃的功能。其中包括像<font>这样的格式化元素，被人厌恶的<blink>和<marquee>等特效元素，以及难对付的HTML框架体系。

这种无所不包的开放性是令很多HTML5新手感到困惑的一个原因。一方面，HTML5无论如何还是应该禁止使用这些过时元素的，因为它们已经很多年没有出现在官方规范里了。另一方面，现代浏览器依然悄无声息地支持着这些元素，而HTML5就是要体现浏览器真实的处理方式。那么这个标准到底要怎么做呢？

为解决这个问题，HTML5规范包含两个独立的部分。第一部分（也是本书将要介绍的）面向Web开发人员，要求摒弃过去的那些坏习惯和被废弃的元素。通过使用HTML5验证器可以确保遵循HTML5标准的这一部分。

第二部分，也是HTML5规范中篇幅更长的部分，针对的是浏览器开发商。它们需要支持HTML中存在的一切，以做到向后兼容。理想情况下，HTML5标准中应该包含足够的信息，让人能够据以从头开发一个新浏览器，而且无论是处理新的还是旧的标记，该浏览器都应该能够与今天的现代浏览器完全兼容。这一部分就是告诉浏览器如何处理那些官方不鼓励使用但仍然必须支持的废弃元素。

有时候，HTML5规范也会对如何处理各种错误（如漏写或错配了标签）作出正式规定。这一点其实很重要，因为它可以确保有缺陷的页面在不同浏览器中都能够得到同样的处理，甚至都规定了将页面映射为DOM（Document  Object  Model，文档对象模型，即内存中表现页面元素的对象树，供JavaScript使用）这么细节的问题。为了写出标准的这个冗长又乏味的部分，HTML5的制定者们在现代浏览器上进行了彻底的测试，以便发现还没有作出规定的错误处理行为。然后再把该行为加到标准中。

修补牛蹄子路

牛蹄子路（cowpath）指的是高低不平但使用频率很高的路，通过它可以从一个地方到达另一个地方。之所以存在牛蹄子路，就是因为有人走。也许这条路走起来不是最舒服的，但某种程度上却是最实际的解决之道。

HTML5把标准化这些非官方（但广泛应用）的技术作为一个目标。或许与新修的高速公路相比，牛蹄子路没有那么平坦宽阔，但它赢得胜利的机会更大。因为对于一般的网站设计人员来说，切换到新技术可能会起出他们的能力，或者他们根本就没有兴趣。更大问题在于，使用旧浏览器的访客无法因为新技术而受益。XHTML 2企图把人们赶出牛蹄子路，结果败得非常惨。

注意
  修补牛蹄子路有一个明显的好处：它使用已经得到浏览器某种程度支持的既定的技术。假设有一种只适合70%浏览器的漂亮的新技术和一种任何情况都能工作但不那么雅观的hack，Web开发人员始终都会选择不那么雅观的hack，因为它适合更多的用户。

“修补牛蹄子路”的方法也需要折中。有时候，这意味着要包容那些得到广泛支持但设计却很拙劣的功能。一个例子就是HTML5的拖放（参见9.3.6节），这个功能完全以微软为IE5设计的拖放机制为基础。尽管这个拖放功能目前得到了所有浏览器的支持，但由于使用起来不灵活而且过度复杂，因此几乎没有人不反感它。为此，不少Web设计人员也抱怨“HTML5不仅鼓励不良行为，而且还给它们正名。”

实用至上

这个原理很简单：改变应该以实用为目的。改变得越多，代价也就越大。Web开发人员可能更希望标准是精心设计、始终如一，而且没有怪异行为的。但这个理由还不足以改变一门已经用来创建了数十亿网页的语言。当然，到底需要不需要改变还是要由某个人根据利害来评判。而现有网页都是怎么做的或者说试图怎么去做，可以作为很好的判断依据。

例如，（在本书写作时）YouTube是世界上第三受欢迎的网站，但由于HTML5之前的HTML不真正支持视频，YouTube一直都得依赖Flash插件。使用Flash插件没什么问题，因为只要是能上网的电脑，基本上都会安装这个插件。不过也有例外，比如某些公司会锁定它们的计算机，不允许安装Flash，另外苹果的设备（如iPhone和iPad）也不支持Flash。不管有多少电脑安装了Flash，扩展HTML标准，使其直接支持人们今天使用Web的一种最基本方式——看视频，毋庸置疑是有必要的。

而HTML5中添加了更多交互功能的背后也有着同样的动机。像拖放、可编辑的HTML内容、在Canvas中绘制二维图形，都是同样的情况。这些功能在我们身边的网页中并不鲜见，只不过有的通过Adobe Flash或微软Silverlight等插件实现，而有的则是利用JavaScript库或（更艰苦地）完全通过手工编写JavaScript代码来实现。因此，为什么不在HTML标准中加入官方的支持，让这些功能在所有浏览器中都能一致地工作呢？

注意
Flash等浏览器插件不会一夜之间就消失（甚至随后几年都不会）。尽管HTML5有很多创新，但通过它来构建复杂的图形界面应用仍然不是件轻而易举的事儿（建议读者到www.flasharcade.com中那些基于浏览器的游戏）。不过，HTML5的终极目标很清楚：让网站不依赖插件也能够提供视频、丰富的交互功能以及各种漂亮的效果。（完）