图灵程序设计丛书:HTML5权威指南

编辑推荐

作为下一代Web标准，HTML5致力于为互联网开发者搭建更加便捷、开放的沟通平台。业界普遍认为，在未来几年内，HTML5无疑将成为移动互联网领域的主宰者。

《HTML5权威指南》是系统学习网页设计和移动设计的权威参考图书。它涵盖创建标准兼容、语义化的新一代HTML5网站的所有基础知识，并囊括实现HTML5核心语言的HTML5生态系统和相关API。全书精彩呈现500多个实战代码示例及主流浏览器实现效果图，贴心汇聚HTML5和CSS3中所有属性、元素和函数的简明参考表。

作者简介

Adam Freeman ，曾在多家名企担任高级职务，现为畅销技术图书作家，著有多部C#、.NET和Java方面的大部头作品。其中《ASP.NET 4高级程序设计（第4版）》、《精通ASP.NET MVC 3框架（第3版）》销量均在同品种中名列前茅，备受读者推崇。《HTML5权威指南》是Freeman专门为网页开发新手和网页设计师打造的经典参考书，这本书秉承作者的一贯风格，幽默风趣、简约凝练、逻辑性强，是广大Web开发人员的必读经典。

读者推荐

在这个浏览器时代你不学点儿网页构建知识还真是有些跟不上时代步伐了。这本书全面覆盖HTML5、CSS3和JavaScript，囊括了构建网页所需的基本知识以及一些中高级内容，新手选这本书绝对不会错，中级开发人员将它作为参考书也相当方便！

——亚马逊读者
 

这本书对于学习HTML5来说真是不可多得的好书，作者既熟知技术趋势，又深谙写作技巧，看看书中那些代码示例、实现效果图、简明参考表，无一不正中读者下怀，难怪许多Web开发人员都极力推荐这本书！

——goodreads读者

序  言

第一章：HTML5背景知识

HTML（Hypertext Markup Language，超文本标记语言）诞生于20世纪90年代初。我与它的初次邂逅大约是在1993年或1994年，当时我还在伦敦附近一个大学的研究实验室工作。那时浏览器只有NCSA Mosaic这一种，Web服务器的种类也屈指可数。 

回想那段日子我们对HTML和万维网的着迷，仍不免有些惊讶。那时我们还得不厌其烦地把“World Wide Web”（万维网）这三个单词全写出来，因为它的知名度还没有那么高，远没有今天这么受人瞩目，还不能只简称其为“Web”。

那时一切都还很简陋。我还记得当时盯着一些慢腾腾加载的宝石图片看的情景。这都是宽带革命之前的事，整个大学享有的带宽大致与如今的一部移动电话相当。不过我们还是很激动。为迎接新时代的到来，大家都在忙着修改课题经费申请。尽管我们上网能做的只是看看另一所大学的咖啡壶图片（这所大学也在伦敦附近，但过去喝杯咖啡却并不近），我们还是有一种强烈的感觉：技术世界已经分为Web诞生前和诞生后两个时代了。

光阴荏苒，在许多用户眼中，Web跟因特网变成了一回事儿，而我们也远远超越了为几张宝石图片就雀跃不已的层次。在此过程中，HTML有过扩充，有过增强，有过扭曲，有过煎熬，见过争斗，见过官司，受过忽视，受过追捧，曾被贬为雕虫小技，也曾被誉为未来之星。待尘埃落定，它已然成为亿万人日常生活不可或缺的一部分。 

本书讲述的是HTML5。这是HTML标准的最新版本，意在为这项重要技术带来秩序、条理和改进。曾经的青涩少年终于成熟了。 

1.1　HTML的历史

讲HTML的书都有“HTML的历史”这样一节，其中大都会提供HTML标准从诞生至今的详细年表。需要这类信息的读者可以去查查维基百科，不过这些信息读起来可能比较枯燥乏味，用处也不大。本书只关心其中几个重要转折点和一个长期存在的发展态势，旨在让读者明白HTML是如何成型的，明白为什么最终走到了HTML5。 

1.1.1　JavaScript出场

JavaScript语言（虽然取了这么一个名字，但是它跟Java程序设计语言基本上没有什么关系）出自一家名为网景的公司。它的出现标志着内嵌在Web浏览器中的客户端脚本程序控制功能的发端。原本是一种静态内容载体的HTML因此变得有点丰富起来。之所以说“有点丰富”，是因为现在我们在浏览器中见到的这种复杂交互方式是经过一段时间的发展之后才形成的。 

JavaScript并非HTML规范核心的组成部分，然而Web浏览器、HTML和JavaScript之间的关系是如此紧密，以至于根本无法将它们分开讨论。HTML5规范假定可以使用JavaScript，而且要想使用HTML5中新增的一些最为引人注目的特性也需要用到JavaScript。 

1.1.2　浏览器战争的结束 

浏览器市场也有过激烈的竞争。主要的角逐者是微软和网景，它们都把在自己的浏览器中添加一些独有的特性当做竞争手段。其如意算盘是这样打的：诱人的专有特性会诱使开发人员制作出只能在特定浏览器上使用的内容，而诱人的内容又会诱使用户对能提供这种内容的浏览器青睐有加，由此市场霸业可成。 

可惜人算不如天算。这样做的结果是Web开发人员要么只使用那些所有浏览器都有的特性，要么煞费苦心地想些变通办法来使用各款浏览器中勉强相当的那些特性。这不啻为一种煎熬，而且其后遗症直到现在仍然在影响Web开发。 

微软用免费提供IE来与网景收费的Navigator抢生意，这一招儿后来被认定违反垄断法。很多人指责微软是网景垮台的罪魁祸首。这一指控或许不无道理，不过在我这个曾在那段时期为网景做过大约18个月顾问的人看来，我从没见过像它那样一根筋地自残的公司。有些公司注定要成为别人的前车之鉴，网景就是其中之一。 

浏览器战争以网景倒台及微软受到惩处结束，为基于标准的网络浏览奠定了基础。HTML规范有了改进，遵从这个规范成了准则。现在的浏览器需要凭遵守标准的程度来竞争。这是一次天翻地覆的转折，开发人员和用户均受益于此。 

1.1.3　插件称雄 

插件是Web世界的“益虫”。它们可以提供一些单用HTML很难实现的高级特性和丰富内容。有些插件特性如此丰富、部署如此普遍，以至于不少网站只提供用于这种插件的内容。Adobe公司的Flash正是这样一个典型。我经常见到完全用Flash实现的网站。按说这也没什么不妥，不过这就意味着浏览器和HTML除了Flash容器一职外再无他用。 

浏览器开发商看插件不顺眼，因为它把控制权转移到了插件开发商手中。HTML5的一大改进就是着力于让浏览器直接处理那些原来要使用Flash的富内容（rich content）。苹果和微软是疏远Flash的两个急先锋。前者的iOS不支持Flash，后者则在Windows 8附带的Metro风格的IE中禁用了Flash。 

1.1.4　语义HTML浮出水面 

HTML标准的早期版本不太关心将内容的意义与其呈现方式分开。想表示一段文字的重要性，使用一个让文字显示为粗体的HTML元素就是了。把粗体内容与重要内容关联起来是用户的事。这对人类用户来说很容易，却会让自动化工具犯难。自HTML初次亮相以来，对内容进行自动处理日趋重要，人们也越来越致力于分开HTML元素的意义与内容在浏览器中的呈现方式。 

1.1.5　发展态势：HTML标准滞后于其使用 

制定标准一般都是一个长期过程，像HTML这种应用广泛的技术更是如此。参与方众多，每家都想把新标准往符合自己利益或观点的方向引。而标准并不是法律，标准制定机构害怕分裂甚于一切。因此对于未来的特性和改进该当如何，各方经常陷入旷日持久的讨价还价。 

负责制定HTML标准的是W3C（World Wide Web Consortium，万维网联盟）。这是一项棘手的任务。一条提案要花不少时间才能成为标准。而对HTML核心规范的修改则需经过很长时间才会得到批准。 

冗长的标准制定过程带来的结果就是W3C总是要多绕一些路，总是在将已经被大家接受的实际做法追认为标准。HTML规范反映的只是几年前关于Web内容的前沿思考。这削弱了HTML标准的重要性，因为真正的革新并非来自W3C，而是来自浏览器和插件。

1.2　HTML5简介 

HTML5不仅仅是HTML规范的最新版本，它还是一系列用来制作现代富Web内容的相关技术的总称。后面各章将会介绍这些技术，其中最重要的三项技术是HTML5核心规范、CSS（Cascading Style Sheets，层叠样式表）和JavaScript。 

HTML5核心规范定义用以标记内容的元素，并明确其含义。CSS可用于控制标记过的内容呈现在用户面前的外貌。JavaScript则可以用来操纵HTML文档的内容以及响应用户的操作，此外要想使用HTML5新增元素的一些为编程目的设计的特性也需要用到JavaScript。 

提示 看不懂上面说的这些东西不要紧。我会分别在第3章、第4章和第5章专门介绍HTML元素、CSS和JavaScript。

有些人（那些挑剔、执拗、爱钻牛角尖的人）会说HTML5所指的只是HTML元素。别管他们。这些人看不出Web内容的本质所发生的根本性变化。用于网页的各种技术之间的关联已经变得如此紧密，以致于需要通晓这些技术才能制作Web内容。如果只使用HTML元素，不用CSS，这样制作出来的内容会让用户觉得不便阅读。如果用了HTML和CSS，但不用JavaScript，那就无法为用户的操作提供即时反馈，也无法使用HTML5中的一些高级特性。 

1.2.1　新标准 

为了应对漫长的标准化过程以及标准落后于常见用法的情况，HTM5及其相关技术是作为一系列小型标准而制定的。其中有些标准只有区区几页，涉及的只是某项特性中一个高度细化的方面。当然，其他一些标准仍然有密密麻麻的几百页，涵盖了相关功能的所有方面。 

这样做的目的是让较小的团体可以合作设计和将对他们较为重要的特性标准化，争议较少的特性可以先标准化，不必受围绕其他特性发生的争论的拖累。 

这个办法有利也有弊。好处是可以加快标准制定步伐。主要的弊端在于难以全面掌握制定中的各个标准的情况以及这些标准之间的关系。技术规范的质量也有所下降。有些标准中存在着一些歧义，致使浏览器中的实现出现了不一致的情况。 

最大的不足之处大概要算没有一条可用来评估HTML5达标情况的基准线。我们现在还处于初始阶段，但是不能指望用户可能用到的所有浏览器都实现了要用的特性。因此采用HTML5中的特性是件复杂的事情，需要仔细评估相关标准得到支持的情况。W3C公布过一个正式的HTML5徽标（如图1-1所示），但是它并不代表对HTML5标准及相关技术的全面支持。 

1.2.2　引入原生多媒体支持

HTML5的一大改进就是支持在浏览器中直接播放视频和音频文件（也就是说不借助于插件）。这是W3C对插件风靡现象的一种反应。原生（native）多媒体支持再结合其他HTML特性可望大有作为。这些特性将在第34章介绍。 

1.2.3　引入可编程内容 

HTML5最大的变化之一是添加了canvas元素（第34章和第35章会有介绍）。这个元素是对插件现象的另一反应，它提供了一个通用的绘图平面，开发人员可以用它完成一些通常用Adobe Flash来完成的任务。 

这个特性之所以重要，部分原因在于要使用canvas元素就必须用到JavaScript。编程从而成了HTML文档中第一层次的事情，这是一个重大转变。 

1.2.4　引入语义Web

HTML5引入了一些用来分开元素的含义和内容呈现方式的特性和规则。这是HTML5中的一个重要概念，详见第6章。这个主题在本书中将多次论及，它标志着HTML在走向成熟的道路上又迈上了一个新台阶，反映出制作和使用HTML内容的方式的多样性。这个变化（它逐步体现在之前的HTML版本中）稍稍增加了Web开发者的负担，这是因为开发者需要先标记内容然后再定义其呈现方式。不过有些实用的新改进可以减轻这种负担。

1.3　HTML5现况

HTML5的核心标准目前仍在制定过程中，一时完成不了。这意味着本书介绍的特性与最终标准中的可能略有出入。不过，标准正式出炉还得等上好些年，而最终版本与目前版本可能出入不大。 

1.3.1　浏览器对HTML5的支持情况

最流行的那些浏览器都已经实现了许多HTML特性。本书演示示例的显示效果时，用来浏览HTML5文档的是谷歌的Chrome或Mozilla的Firefox。然而，不是每款浏览器都支持所有的特性。在把某个特性用到实际项目之前，应该先核查一下浏览器是否支持这个特性。有些浏览器（例如Chrome和Firefox）的升级近乎持续不断。撰写本书时我已经记不清所使用的浏览器到底更新过多少次了。鉴于每次升级都会加入些新特性或修补点纰漏，这意味着我无法就某种特性得到哪些浏览器的支持提供确切的信息。不过考虑到HTML标准的分散本性，使用Modernizr之类的JavaScript库检查特性是可行的。使用Modernizr，可以用编程的方式判断用户使用的浏览器是否支持关键的HTML特性，籍此可以决定在文档中应该使用哪些特性。 

习惯未雨绸缪的读者可以参考一下When Can I Use?网站。上面提供了浏览器的支持情况和采用率方面的详细信息，并且勤于修订。 

1.3.2　网站对HTML5的支持情况 

用到HTML5特性的网站日益增多。其中有些属于示范性网站，是用来演示HTML特性的。但是能利用浏览器对HTML5的支持的实用型网站也越来越多。YouTube就是一个典型，它现在已经提供让浏览器直接播放的视频——当然，它还为较老的浏览器提供Flash视频。

1.4　本书结构 

本书分为五部分。本章所属的第一部分除了介绍使用本书所需要的预备知识外，还会介绍HTML、CSS和JavaScript最新进展的基本情况。对于近期未做过Web开发工作的读者，这此内容可以助其跟上形势。 

第二部分讨论的是HTML元素，包括那些HTML5中新增或有所改动的元素。每个元素都有说明和演示。读者还可以了解到元素默认的呈现方式。 

第三部分讨论的是CSS（Cascading Style Sheet，层叠样式表）。其中各章介绍了用来控制内容样式的所有CSS选择器和属性，还提供了大量例子和图示来帮助读者掌握其用法。这部分讨论的是CSS的最新版本（CSS3），不过也会说明一下哪些特性是CSS1和CSS2中引入的。 

第四部分介绍的是DOM（Document Object Model，文档对象模型）。通过DOM，即可用JavaScript探索和操纵HTML内容。DOM包含着对于制作富Web内容至关重要的一套特性。 

第五部分讲的是Ajax、多媒体和canvas元素等HTML5高级特性。这些特性需要更高的编程技术，但也能显著提升Web内容的品质。使用HTML5时这些特性并非非用不可，不过对于复杂项目来说它们值得一试。 

注意 本书没有涉及的一种HTML5相关技术是SVG（Scalable Vector Graph，可缩放矢量图形）。使用SVG技术，可以用标记或JavaScript生成二维矢量图形。这不是一个简单的话题。对SVG感兴趣的读者可参阅Kurt Cagle所著的SVG Programming一书，该书由Apress出版。

1.5　HTML5的更多信息

虽然本书力求做到全面详尽，但是有些事情还是难以避免。读者可能会遇到我未曾提及的情况，也可能会有问题但在书中找不到答案。在此情况下，首选的参考资料是W3C的网站。读者可以在此细读相关标准，并能明白浏览器应该如何处理。那些标准可能不太好读（甚至有自我参照倾向），但能提供一些有用的深层信息。 

还有一个资料来源是Mozilla开发者网络。它更具亲和力，不过权威性略有不如。上面有大量关于各种HTML特性的有用信息，包括一些HTML5方面的很不错的内容。

1.6　小结 

本章为讲解HTML5提供了一些背景知识，罗列了HTML发展史上的一些关键转折点，并说明了HTML5的应对方式。下一章将告诉读者如何为使用本书中的大量例子做好准备。在此之后，我们就将从HTML元素本身入手开始HTML5的探索之旅。

精彩文摘

代码清单4-5文件styles.css 

a{

   background-color：grey;

   color：white;

} 

span{ 

   border：thin black solid;

   padding：10px;

}

样式表中用不着style元素，需要什么样式，只需要为其设计好选择器，后面再跟上一套样式声明即可。然后HTML文档就可以用link元素将这些样式导入其中（link元素将在第7章详细介绍）。
如代码清单4-6所示。 

文档想要链接多少样式表都行，为每个样式表使用一个link元素即可。如果不同样式表中的样式使用了相同的选择器，那么这些样式表的导入顺序很重要，在此情况下得以应用的是后导入的样式。 

1.从其他样式表中导入样式 

可以用@import语句将样式从一个样式表导入另一个样式表。代码清单4-7所示的样式表combined.css示范了这种用法。 

代码清单4-7文件combined.CSS 

8import"styles·css";

span{ 

border：medium black dashed;

padding：10px;

}
一个样式表中想要导入多少别的样式表都行，为每个样式表使用一条@import语句即可。@import语句必须位于样式表顶端，样式表自已的样式定义不能出现在它之前。在combined.css这个样式表中，先导入了styles.css，然后再定义了一条针对span元素的新样式。代码清单4-8显示了HTML文档链接combined.CSS样式表的情形。