作者：（美）Adam Freeman 著
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5权威指南试读：
致谢
感谢Apress出版社的全体工作人员，他们为本书出版付出了艰辛的劳动。尤其感谢负责本书流程的Jennifer Blackwell（她还包容了我拒绝使用SharePoint）、策划本书的Ewan Buckingham，以及编辑本书的Ben Renow-Clarke。此外，感谢Kevin、Andy、Roger、Vanessa、Lori、Ralph、Kim和Marilyn，感谢他们审阅本书并对文字进行润色。第一部分开篇开始探索HTML5之前，需要一番准备。下面五章将要介绍本书的结构，说明如何着手HTML5开发，并且简要介绍HTML、CSS和JavaScript的新进展。第1章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-1 W3C的正式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（http://www.modernizr.com）之类的JavaScript库检查特性是可行的。使用Modernizr，可以用编程的方式判断用户使用的浏览器是否支持关键的HTML特性，籍此可以决定在文档中应该使用哪些特性。
习惯未雨绸缪的读者可以参考一下When Can I Use?网站（http://caniuse.com）。上面提供了浏览器的支持情况和采用率方面的详细信息，并且勤于修订。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的网站（http://w3c.org）。读者可以在此细读相关标准，并能明白浏览器应该如何处理。那些标准可能不太好读（甚至有自我参照倾向），但能提供一些有用的深层信息。
还有一个资料来源是Mozilla开发者网络（http://developer.mozilla.org）。它更具亲和力，不过权威性略有不如。上面有大量关于各种HTML特性的有用信息，包括一些HTML5方面的很不错的内容。1.6 小结
本章为讲解HTML5提供了一些背景知识，罗列了HTML发展史上的一些关键转折点，并说明了HTML5的应对方式。下一章将告诉读者如何为使用本书中的大量例子做好准备。在此之后，我们就将从HTML元素本身入手开始HTML5的探索之旅。第2章准备工作
磨刀不误砍柴工。任何Web开发工作都需要一些基本工具。要想自己重做一遍本书后面的一些高级范例，也需要用到本章介绍的一种软件。
说到Web开发工具，大家都乐意看到有大把免费和开源的软件可用。编写本书示例时用到的所有工具均可免费获取。选好喜欢的装备，HTML5之旅即可启程。2.1 挑选浏览器
学习本书所需的工具中，最重要的是浏览器。书中所用浏览器只限于主流产品。此处所谓主流产品，指的是下列几种浏览器的桌面版本：● Google Chrome；● Mozilla Firefox；● Opera；● Apple Safari；● Internet Explorer。
这些浏览器用户最多。与手机版本相比，其桌面版本更新更频繁，特性也更丰富。读者可能会发现这里没有提到你喜欢的浏览器，这并不代表你的浏览器不支持书中介绍的特性。不过我建议还是使用这里列出的浏览器为好。
我最喜欢的浏览器是谷歌的Chrome。我喜欢它的简洁，还有它附带的一些称手的开发工具。出于这个原因，书中插图多为显示HTML5文档的谷歌Chrome的屏幕截图。不好Chrome这一口的读者可以使用Firefox或Opera，这两种浏览器对HTML5的支持不逊于Chrome。相比之下，Safari和Internet Explorer略显落后。
Internet Explorer目前的情况有些意思。本书写作之时，Internet Explorer 9已经发布，它对一些基本的HTML5特性支持得不错。目前Internet Explorer 10已有预览版，它的改进不小，然而仍然缺乏对一些关键特性的支持。不过事情已经很清楚，微软在Windows 8的规划中包括了基于HTML5和JavaScript的应用程序开发。这意味着在Windows 8发布的时候Internet Explorer引擎可望出色地支持HTML5。注意 请不要来信告诉我你中意的浏览器如何如何比我的好。我知道你的浏览器很可人，知道你很有眼光。我也祝愿你欢欢喜喜一用许多年。要是你实在不想就这么凑合，我可以卖套补救工具给你（收费只有区区50美元）——其中包括一扎纸、一把剪刀和少许胶水。书中凡有插图的地方，你都可以打印一张自己浏览器的图，剪下来粘上去，蒙住原来的Chrome的图。为了内心安宁，这点代价是微不足道的。我猜你也一定同意这一点。2.2 挑选HTML编辑器
编写HTML文档需要编辑器。任何文本编辑器都可以，不过我建议找款对HTML（最好是HTML5）有专门支持的。这种编辑器通常会对标记进行语法检查，具备能减轻用户打字工作量的自动补全功能，还有可以用来同步显示代码变化所产生的效果的预览面板。
本书用的是出自ActiveState的Komodo Edit（可从activestate.com获取）。这是一款免费、开源的编辑器。它对HTML的支持有其独到之处，而且比较接近我心中理想编辑器的样子。我跟ActiveState没有来往，无意为Komodo Edit做广告，这里提到它只不过是因为我觉得它对这本书和其他一些项目很有用。2.3 挑选Web服务器
Web服务器对于学习本书而言并非不可或缺，不过如果HTML文档是从磁盘（而非Web服务器）加载的话，有些特性的表现会有所不同。本书的例子用什么Web服务器都行，免费的开源Web服务器有的是。我用的是IIS 7.5——出自微软的Web和应用程序服务器。这个不是免费产品。不过我有一台运行Windows Server 2008 R2的开发用服务器，所以需要的特性基本上都齐全了。2.4 获取Node.js
在本书一些章节中，我需要编写运行在后端服务器上的代码。为此我使用了近来迅速走红的Node.js。其简洁的事件驱动型I/O很适合处理容量大但数据传输率不高的Web请求。
不熟悉Node.js不要紧。之所以选择它是因为我要用JavaScript编写服务器脚本，这样本书就不必再引进另一门编程语言。我不打算解释Node.js的工作方式，甚至也不打算详细解释书中的服务器脚本。不过，有JavaScript功底的读者应该能推测出它们的功能。
Node.js可以从http://nodejs.org下载。本书使用的是0.4.11版。由于Node.js升级很快，读者读到本书的时候可能会发现它已经发布了更新的版本。获取multipart模块
并非所有要用到的功能都能在Node.js核心程序包中找到。读者还需要用到multipart模块，它可以从这个地址下载：https://github.com/isaacs/multipart-js，下载后根据说明安装即可。第32章和第33章介绍Ajax技术时要用到这个模块。2.5 获取示例代码
本书所有示例HTML文档均可从apress.com免费获得。它们按章组织，还附带有支持资源（第34章所用的视频和音频内容除外，因为清理媒体内容很麻烦）。2.6 小结
本章概述了准备学习后续章节所需的基本工具。Web开发只需要一些简单工具（其中最重要的是浏览器），它们都可以免费获得。下面三章将要介绍HTML、CSS和JavaScript方面的基础知识。第3章初探HTML
开发人员多少都知道一点HTML。近年来它的身影随处可见，即便是那些从不需要写HTML代码的人，也很可能见过一些。为了让读者打好基础，本章将回头介绍HTML的基本知识——就从HTML的目标及其工作原理讲起吧。我会解释一些HTML中的基本术语，并且介绍一些几乎所有网页都要用到的核心元素。
顾名思义，HTML是一种标记语言。其标记以应用于文档内容（例如文本）的元素为其存在形式。在后面的各节中，我会解释各种HTML元素的区别，以及使用各种属性配置这些元素的方法，并且介绍一组可用于所有HTML元素的全局属性。表3-1概括了本章内容。表3-1 本章内容概要问题解决方案代码清单3-1标记文档内容使用HTML元素～3-53-6细调浏览器处理HTML元素的把一个或多个属性应用到～方式元素上3-103-1声明文档包含的是HTML内容使用DOCTYPE和html元素1使用head元素，其中包含3-1描述文档一个或多个元数据元素2（其说明见第7章）使用body元素，其中包含3-1在HTML文档中添加内容文本内容和其他HTML元素33-1定义用于选择某个元素的快捷使用全局属性accesskey键43-1对元素进行分类，以便统一其5～使用全局属性class样式或用程序查找该元素3-173-1使用全局属性使元素的内容可被编辑8contenteditable使用全局属性—为元素添加快捷菜单contextmenu（目前尚无支持这个属性的浏览器）3-1指定元素内容的布局方向使用全局属性dir9使用全局属性—声明元素可拖动draggable（HTML5中的拖放功能详见第37章）使用全局属性声明可将其他元素拖放到某个—dropzone（HTML5中的拖元素上放功能详见第37章）表示某个元素及其内容毋需关3-2使用全局属性hidden0注为元素分配一个独一无二的标3-2识符，以便对其应用样式或用使用全局属性id1程序选择该元素3-2声明元素内容所用语言使用全局属性lang2声明是否应检查元素内容的拼3-2使用全局属性spellcheck写错误33-2直接定义元素的样式使用全局属性style4指定HTML文档中元素的Tab键3-2使用全局属性tabindex5次序为元素提供额外信息（通常显3-2使用全局属性title示为工具提示）63.1 使用元素
代码清单3-1是一个应用于文本内容的HTML元素的简例。代码清单3-1 HTML元素示例I like apples and oranges.
这里用粗体标明元素。该元素分为三部分。其中有两部分称为标签（tag）：开始标签和结束标签。夹在两个标签之间的是元素的内容（本例中为单词apples）。两个标签连同它们之间的内容构成code元素。其结构剖析见图3-1。3-1 HTML元素剖析
元素是一种用来向浏览器说明文档内容的工具。其效果体现在内容之上。不同的元素有不同的确切含义。例如，前述code元素代表的是计算机代码片段。提示 元素名不区分大小写。、甚至都会被浏览器视为code元素的开始标签。一般来说，应该认定某种大小写格式并且贯彻始终。近年来更常见的风格是全部使用小写。本书采用的就是这种格式。
HTML定义了各种各样的元素，它们在HTML文档中起着各不相同的作用。code元素是语义元素的一个例子。语义元素可以用来说明内容的含义以及内容的不同部分之间的关系。第8章还会对此做进一步说明。下面的图3-2显示了code元素的效果。3-2 code元素在浏览器中的显示效果
注意，浏览器不会显示元素的标签，它的任务是解读HTML文档，然后向用户呈现一个体现了HTML元素作用的视图。将内容与呈现分开有些HTML元素会对呈现形式产生影响。浏览器遇到这种元素时，会改变向用户呈现文档内容的方式。code元素就是一例。浏览器遇到该元素时，会用等宽字体显示元素的内容，这可以从图3-2中看出来。用HTML元素控制内容呈现形式的做法如今受到强烈反对。现在的观点是应该用HTML元素说明文档内容的结构和含义，用CSS（第4章将会介绍）控制内容呈现给用户的形式。会影响呈现形式的那些元素通常产生于HTML的早期版本，当时将内容与其呈现形式分开这个理念尚未像如今一样得以严格实施。这些元素在浏览器中呈现时有默认的呈现样式（例如code元素通常使用等宽字体），不过可以用CSS改变其默认样式。第4章会谈到这个问题。3.1.1 了解本章用到的元素
为了让读者对HTML有个初步的认识，我需要用到一些后面各章中才会讲到的元素。表3-2列出了这些元素及其简要说明，还有其全面说明所在的章编号。表3-2 元素摘要元素说明所在章a8生成超链接body表示HTML文档的内容7button生成用以提交表单的按钮12code8表示计算机代码片段DOCTY7表示HTML文档的开始PEhead表示HTML文档的头部区域7hr表示主题的改变9html表示文档的HTML部分7input8表示用户输入的数据1label12生成另一元素的说明标签p表示段落9style7定义CSS样式table表示用表格组织的数据11td表示表格单元格11textare生成用于获取用户输入数据的多行文本框14ath生成表头单元格11title7表示HTML文档的标题tr表示表格行11
label和tag都是标签的意思。为示区别，本书在提到label时，一1律译为“说明标签”。——译者注3.1.2 使用空元素
元素的开始和结束标签之间并非一定要有内容。没有内容的元素称为空元素。代码清单3-2所示就是一例。代码清单3-2 空HTML元素I like apples and oranges.
有些元素为空时没有意义（code就是其中之一），即便如此，它也是有效的HTML代码。3.1.3 使用自闭合标签
空元素可以更简洁地只用一个标签表示。如代码清单3-3所示。代码清单3-3 只用一个标签表示空元素I like apples and oranges.
此例将开始标签和结束标签合二为一。通常用来表示结束标签开始的斜杠符号（/）在此被放到标签的末尾。代码清单3-2和代码清单3-3中的元素等价，但只用一个标签的表示法更为简洁。3.1.4 使用虚元素
有些元素只能使用一个标签表示，在其中放置任何内容都不符合HTML规范。这类元素称为虚元素（void element），hr就是这样一个元素。它是一种组织性元素（第9章将介绍一些其他的这类元素），用来表示内容中段落级别的终止。虚元素有两种表示法。第一种只使用开始标签，如代码清单3-4所示。代码清单3-4 用单个开始标签表示虚元素I like apples and oranges.
Today was warm and sunny.
浏览器知道hr是虚元素，所以不会等待其结束标签出现。第二种表示法在此基础上加了一个斜杠符号，其形式与空元素一致，如代码清单3-5所示。代码清单3-5 用空元素结构表示虚元素I like apples and oranges.
Today was warm and sunny.
我更喜欢这种表示法，并且会在本书中采用。顺便提一句，hr元素也是一个具有呈现形式含义的元素，它会显示为一条横线（这也是其名称的由来）。在图3-3中可以看到hr元素的默认表现形式。3-3 hr元素的默认表现形式用不用非强制使用的开始和结束标签许多HTML5元素在某些条件下可以省略其中一个标签。例如，html元素（第7章将会讲到）的结束标签在此情况下就可以省略：“该元素后面没有紧跟着一条注释，且该元素包含着一个非空或者其开始标签未曾省略的body元素”。这段引文出自一份正式的HTML5规范文档。你不妨读读这些规范（可从w3c.org获得），但是要注意：它们都是以这样一种“活泼”的风格写就。标记语言能有这种灵活性挺棒，不过这也会把人弄糊涂，而且会给维护工作带来麻烦。HTML文档并非只由浏览器处理，你的同事和未来的你（在以后回头修整和升级自己的应用程序时）也会阅读它们。浏览器也许能明白某个标签为什么会被省略，但你的同事未必能轻松看出来，就算你自己以后回头修改代码也是如此。出于这个原因，本书不会详述前面所说的那些特殊规定，除非有必要破例（届时会有解释），否则书中的元素都会有开始和结束标签。3.2 使用元素属性
元素可以用属性（attribute）进行配置。代码清单3-6所示为应用到a元素上的一个属性。这个元素用来生成超链接。点击超链接就会加载另一个HTML文档。代码清单3-6 使用元素属性I like apples and oranges.
属性只能用在开始标签或单个标签上，不能用于结束标签。如图3-4所示，属性具有名称和值两部分。3-4 为HTML元素添加属性
有一些全局属性可用于所有HTML元素，本章稍后将有介绍。除了这些全局属性，元素还有用来提供其特有配置信息的专有属性。href属性就限于a元素，它配置的是超链接的目的URL。a元素定义了一批专有属性，它们会在第8章中得到说明。提示 上面的示例中使用双引号界定属性值（形如"属性值"），不过也可以用单引号（形如'属性值'）。如果属性值本身含有引号，那么两种引号都要用到（形如"'含引号的'属性值"，或'"含引号的"属性值'）。3.2.1 一个元素应用多个属性
一个元素可以应用多个属性，这些属性间以一个或几个空格分隔即可。代码清单3-7即为一例。代码清单3-7 为一个元素设置多个属性I like apples and oranges.
这些属性的顺序未作要求，全局属性和元素专有属性可随意交错。上面的代码清单就是这样做的，其中class和id是全局属性（本章稍后会讲到这些属性）。3.2.2 使用布尔属性
有些属性属于布尔属性，这种属性不需要设定一个值，只需将属性名添加到元素中即可，如代码清单3-8所示。代码清单3-8 布尔属性Enter your name:
此例中的布尔属性是disabled，元素中只添加了该属性的名称。input元素为用户在HTML表单（在第12章中讲述）中输入数据提供了一种手段。添加disabled属性可以阻止用户输入数据。布尔属性有一点小古怪，它以本来存在而不是用户为其设定的值对元素进行配置。上例中并未这样设置disabled="true"，仅仅是添加了disabled这个词而已。为布尔属性指定一个空字符串（""）或属性名称字符串作为其值也有同样的效果，如代码清单3-9所示。代码清单3-9 为布尔属性指定空字符串值Enter your name: Enter your name: 3.2.3 使用自定义属性
用户可自定义属性，这种属性必须以data-开头。代码清单3-10演示了这种属性的用法。代码清单3-10 对元素应用自定义属性Enter your name:
这种属性的恰当名称是作者定义属性，有时也称扩展属性。不过我更喜欢使用自定义属性这个常见得多的名称。
自定义属性是对HTML4中“浏览器应当忽略不认识的属性”这种广泛应用的技巧的正式规定。在这类属性名称之前添加前缀data-是为了避免与HTML的未来版本中可能增加的属性名冲突。自定义属性与CSS（在第4章介绍）和JavaScript（在第5章介绍）结合起来很有用。3.3 创建HTML文档
元素和属性不会孤立存在，它们是用来标记HTML文档内容的。要创建一个HTML文档，最简单的方法是创建一个文本文件，并将其文件扩展名设置成为这类文件规定的.html。这个文件可以直接从磁盘载入浏览器，也可以从Web服务器载入（在本书中，我一般都要使用Web服务器。我的Web服务器名为titan，这个名字经常出现在书中屏幕截图的浏览器窗口中）。浏览器和用户代理在本章（及本书大部分章节）中，HTML文档都是针对浏览器创建的。这样看待HTML文档较为省事，而且HTML文档最常见的使用方式也是用浏览器查看。但是还有其他情况需要考虑。用于处理HTML文档的各种软件有一个共同的名称叫做用户代理（user agent）。浏览器是最流行的用户代理，但不是唯一的一种。非浏览器类用户代理现在还很少，以后可能会多起来。在HTML5中更加强调将内容与呈现形式分开，正是因为认识到HTML内容并不总是会被显示给用户看。本书尽管说的还是浏览器（因为这是最重要、最强势的一类用户代理），但是最好还是记住：你的HTML文档有可能会给别的一些软件处理。
HTML文档具有特定的结构，最起码要有一些关键性的元素。本书绝大多数示例均为完整的HTML文档，这样读者很快就能轻松看出元素的应用方式和效果。为了给你一个初步印象，在此我要先带你看一个基本的HTML文档。代码清单中所有的HTML元素都会在后面各章得到详细讲解，本章提供了它们的相关参照信息。HTML与XHTML的对比尽管本书讲的是HTML，但我要是不提一下XHTML（在HTML前面加了一个X）的话，那就太不负责了。符合HTML语法的文档不一定符合XML语法，因此用标准的XML解析程序处理HTML文档可能会遇到麻烦。为了解决这个问题，可以使用XHTML，它是HTML的XML序列化形式（这就是说，以符合XML规范的方式来表达文档的内容以及HTML元素和属性，以便XML解析程序处理）。此外，也可以创建既是有效HTML文档也是有效XML文档的多语文档（polyglot document），不过这要求使用HTML语法的一个子集。本书不讲XHTML，想了解更多XHTML方面的信息的读者可以参阅这个网址：http://wiki.whatwg.org/wiki/HTML_vs._XHTML。3.3.1 外层结构
HTML文档的外层结构由两个元素确定：DOCTYPE和html，如代码清单3-11所示。代码清单3-11 HTML文档的外层结构
上例中的DOCTYPE元素让浏览器明白其处理的是HTML文档。这是用布尔属性HTML表达的：
紧跟着DOCTYPE元素的是html元素的开始标签。它告诉浏览器：自此直到html结束标签，所有元素内容都应作为HTML处理。用了DOCTYPE元素之后又接着使用html元素看起来可能有点奇怪，其实早在HTML标准小荷才露尖尖角的时候，具有同等地位的还有一些别的标记语言，文档中可能会混合使用多种标记语言。
如今HTML已成为占绝对优势的标记语言，即使在文档中省略DOCTYPE和html元素，绝大多数浏览器仍会假定自己处理的是HTML文档。不过这并不意味着不必再用这两个元素。这是因为它们有着重要的用途，而且依赖浏览器的默认行为模式就像轻信陌生人一样不靠谱——多数情况下事情很顺利，可是冷不防就会出大漏子。关于DOCTYPE和html元素详见第7章。3.3.2 元数据
HTML文档的元数据部分可以用来向浏览器提供文档的一些信息。元数据包含在head元素内部，如代码清单3-12所示。代码清单3-12 在HTML文档中添加head元素
这个清单中的元数据少到不能再少，只有title元素一项。按说HTML文档中都应该包含title元素，但是没有的话浏览器通常也不会在意。大多数浏览器把title元素的内容显示在其窗口的标题栏上或用2来显示文档的标签页的标签位置上。第7章会详细说明head元素和title元素，以及可以放在head元素中的所有其他元数据元素。
IE中称为选项卡。——译者注2提示 代码清单3-12也演示了HTML文档中注释的写法。注释以标签结尾。浏览器会忽略这两个标签之间的一切内容。
除了可包含用于说明HTML文档的元素，head元素还能用来规定文档与外部资源（如CSS样式表）的关系，定义内嵌CSS样式，放置和载入脚本程序。第7章将会示范所有这些用途。3.3.3 内容
文档的第三部分是文档内容，这也是最后一个部分，放在body元素之中，如代码清单3-13所示。代码清单3-13 在HTML文档中添加body元素
apples and oranges. body元素告诉浏览器该向用户显示文档的哪个部分。自然，本书大部分篇幅都花在那些需要放在body元素之中的东西上面。把body元素加进来后，HTML文档的基本框架业已成型，本书大部分例子都要用到这个框架。3.3.4 父元素、子元素、后代元素和兄弟元素
HTML文档中元素之间有明确的关系。包含另一个元素的元素是被包含元素的父元素。在代码清单3-13中，body元素是code元素的父元素，这是因为code元素位于body元素的开始标签和结束标签之间。反过来说，code元素是body元素的子元素。一个元素可以拥有多个子元素，但只能有一个父元素。
包含在其他元素中的元素也可以包含别的元素。从代码清单3-13中也可以看到：html元素包含着body元素，而后者又包含着code元素。body元素和code元素都是html元素的后代元素，但是二者中只有body元素才是html元素的子元素。子元素是关系最近的后代元素。具有同一个父元素的几个元素互为兄弟元素。在代码清单3-13中，head元素和body元素就是兄弟，这是因为它们都是html元素的子元素。
元素间关系的重要性在HTML中随处可见。一个元素能以什么样的元素为父元素或子元素是有限制的，这些限制通过元素类型表现出来（下一节将讨论这个问题）。即将在第4章讲述的CSS中元素间的关系也很重要，圈定应用样式的元素的方法之一就要借助元素的父子关系。最后，本书第四部分中介绍的文档对象模型（DOM）也会涉及通过搜索文档树查找文档中某个元素，而文档树正是元素之间关系的一种表述。在HTML世界里，从后代中辨认兄弟是一种重要能力。3.3.5 了解元素类型
HTML5规范将元素分为三大类：元数据元素（metadata element）、流元素（flow element）和短语元素（phrasing element）。
元数据元素用来构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示。其说明见第7章。
另外两种元素略有不同，它们的用途是确定一个元素合法的父元素和子元素范围。短语元素是HTML的基本成分。第8章会介绍最常用的短语元素。流元素是短语元素的超集。这就是说，所有短语元素都是流元素，但并非所有流元素都是短语元素。
有些元素无法归入上述三种类型，这些元素要么没有什么特别的含义，要么只能用在一些非常有限的情况下。li元素就是受限元素的一个例子。它表示列表项，只能有三种父元素：ol（表示有序列表）、ul（表示无序列表）和menu（表示菜单）。该元素详见第9章。从第6章开始的所有元素说明都包含了元素所属类型的信息。3.4 使用HTML实体
从本章的例子中可以看到，HTML文档中有些字符具有特殊含义——最明显的是<和>这两个字符。有时需要在文档内容中用到这些字符，但不想让它们被当做HTML处理。为此应该使用HTML实体（entity）。实体是浏览器用来替代特殊字符的一种代码。表3-3列出了一些常用实体。表3-3 常用HTML实体字符实体名称实体编号<<<>>>&&&€€€££￡§§§©©©®®®™™™
每个特殊字符都有一个实体编号，可以用来在文档内容中代表该字符。例如，字符“&”的实体编号是&。特别常用的特殊字符还有对应的实体名称。例如，对于浏览器来说，&和&是一回事。3.5 HTML5全局属性
本章前面讲过如何用属性配置元素。每种元素都能规定自己的属性，这种属性称为局部属性（local attribute）。第6章在开始详细介绍各种元素的时候，将会列出它们具有的所有局部属性并且示范用法。每一个局部属性都可以用来控制元素独有行为的某个方面。
属性还有另一种类型：全局属性（global attribute）。它们用来配置所有元素共有的行为。全局属性可以用在任何一个元素身上，不过这不一定会带来有意义或有用的行为改变。下面将会介绍所有全局属性并示范其用法。有些全局属性涉及本书后面才会详细讲到的更宏大的HTML特性。对于它们这里会提供相关章节的参照信息。3.5.1 accesskey属性
使用accesskey属性可以设定一个或几个用来选择页面上的元素的快捷键。代码清单3-14是一个在简单表单中使用这个属性的例子。表单是第12章到第14章的主题，可以在读过那几章之后再来看看这个例子。代码清单3-14 使用accesskey属性
此例为三个input元素添加了accesskey属性（input元素的说明见第12章和第13章）。其目的是让网页或网站的熟客可以使用快捷键访问经常用到的元素。用来触发accesskey机制的按键组合因平台而异，在Windows系统上是同时按下Alt键和accesskey属性值对应的键。图3-5展示了accesskey属性的效果。用户可以按Alt+n将键盘焦点转移到第一个input元素，在此输入姓名。接下来按Alt+p将焦点转到第二个input元素，在此输入密码。然后按Alt+s，这等于按下Log In按钮以提交表单。3-5 accesskey属性的效果3.5.2 class属性
class属性用来将元素归类。这样做通常是为了能够找出文档中的某一类元素或为某一类元素应用CSS样式。代码清单3-15示范了如何使用class属性。代码清单3-15 使用class属性
一个元素可以被归入多个类别，为此在class属性值中提供多个用空格分隔的类名即可。类名可以随便取，不过最好取点具有实际含义的，文档中拥有许多元素类别时尤其如此。class属性本身没有任何作用。图3-6是上面的示例在浏览器中的显示结果，从中看到的只是几个超链接。3-6 两个应用了class属性的元素
class属性的一种利用方式是设计CSS样式时以所定义的一个或多个类作为应用目标。代码清单3-16即是一例。代码清单3-16 定义依靠类起作用的样式
此例用style元素定义了两条样式，第一条用于属于class2类的元素，第二条用于属于class1类的元素。
style元素的说明见第7章。第4章会介绍样式以及将其应用到元素上的各种方式。
将这个HTML文档载入浏览器，所定义的样式会被应用到相关元素上，其效果如图3-7所示。用类来确定样式应用对象的好处在于不用对涉及的元素一一重复同样的样式设置。3-7 借助class属性应用样式
脚本程序也可以利用class属性。代码清单3-17就是这样一个例子。代码清单3-17 在脚本中使用class属性
此例中的脚本程序找出所有属于otherclass类的元素并对其设置了一些样式。script元素在第7章介绍。第19章到第24章介绍各种样式属性。第26章介绍如何查找文档中的元素。前述脚本的效果见图3-8。3-8 在脚本中使用class属性3.5.3 contenteditable属性
contenteditable是HTML5中新增加的属性，其用途是让用户能够修改页面上的内容。代码清单3-18是一个简单的例子。代码清单3-18 使用contenteditable属性
It is raining right now
此例把contenteditable属性用在一个p元素（在第9章介绍）身上。该属性值设置为true时用户可以编辑元素内容，设置为false时则禁止编辑。如果未设定其值，那么元素会从父元素处继承该属性的值。这个属性的效果如图3-9所示。用户单击那段文字后即可开始编辑其内容。
试读结束[说明：试读内容隐藏了图片]