第 1 章 HTML5 简介

第 1 章 HTML5简介

如果说HTML是一部电影,那HTML5就是一次大转折。HTML本来是不会活过21世纪的。

官方Web标准组织W3C早在1998年就已经对HTML撒手不管了。W3C把未来都寄托在XHTML这个更具现代特色的后续标准身上,XHTML被视为HTML的严肃整洁版。但XHTML举步维艰,是一群被剥夺了话语权的人,让HTML起死回生并为本书将要探讨的功能奠定了基础。

在本章里,你会了解HTML死亡的原因,以及它又是怎样复活的;了解HTML5的设计原理与功能;还将见识恼人的浏览器支持问题。在这一章,你将第一次看到真正的HTML5文档。

1.1 HTML5 的故事

HTML的基本思想——使用元素为内容添加结构——从Web诞生以来就没有变过。事实上,即使是最陈旧的网页,在最新的浏览器中仍然可以得到完美的呈现。

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

1.1.1 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基于严格规则的这种提示很有用,因为你可以发现微小的错误,这些错误会导致在不同浏览器中显示结果不一致(这些错误在编辑和增强页面时还可能导致更严重的问题)。

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

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

1.1.2 XHTML 2:意想不到的失败

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

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

但最糟糕的,还是慢得要死的制定过程。XHTML 2的制定过程整整拖了5年才完成,开发人员的激情早已荡然无存了。

1.1.3 HTML5:起死回生

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

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

开发浏览器的人对这种情况特别关注。于是,来自Opera Software(开发Opera浏览器的公司)和Mozilla Foundation(开发Firefox浏览器的组织)的一些具有超前意识的人纷纷建言,希望XHTML能加入一些对开发人员更有用的功能。但他们的建议并没有被采纳,结果Opera、Mozilla和苹果公司自发地组建了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获得了全球Web开发人员空前的支持。痛定思痛之后,W3C宣布解散负责制定XHTML 2标准的工作组,并开始致力于将HTML5改造为正式的标准。就这样,最初的HTML5被分割成多个容易管理的模块,而本来统称为HTML5的很多功能分散到了几个独立的标准中(更多信息,请详见后面的附注栏)。

提示 W3C官方HTML5标准的网址是www.w3.org/TR/html5

 

HTML5包含哪些功能

HTML5包含多个标准,这些标准之间彼此关联。这种局面既好又不好。说好,是因为浏览器可以迅速实现HTML5中业已成熟的部分,而任由其他部分继续发展。说不好,则是因为编写网页的人必须检查浏览器是否支持自己想用的功能。本书将会介绍一些检测浏览器的技术,有的很麻烦,有的则没有那么麻烦。

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

  • HTML5核心。这一部分主要由W3C官方的规范组成,涉及新的语义元素(第2章和第3章)、新的增强的Web表单微件(第4章)、音频和视频支持(第5章)以及通过JavaScript绘图的Canvas(第8章和第9章)。

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

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

甚至连W3C都在有意无意地模糊“真正的”HTML5(已有标准)和“宣传用”版本(包括 HTML5 的所有新增部分和补充规范)之间的界限。举个例子,官方 W3C 标志网站(www.w3.org/html/logo)鼓励人们生成用于宣传CSS3和SVG的HTML5标志,而前两个标准在HTML5出现之前就已经在开发了。

1.1.4 HTML:活着的语言

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

因为HTML是一门活着的语言,所以HTML页面永远不会作废,也不会无法阅读。HTML页面永远不需要版本号(甚至连文档类型声明都不需要),Web开发人员也永远不需要为了让它能在新浏览器中运行,而把自己的标记从一个版本“升级”到另一个版本。同样,任何时候在HTML标准中都可能增添新功能。

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

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

提示 要了解当下正在发展中的HTML,包括被称为HTML5的部分和少量但始终在变化的、新的、还没有得到支持的功能,请访问http://whatwg.org/html

1.2 HTML5 的三个主要原理

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

1.2.1 不破坏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的制定者们在现代浏览器上进行了彻底的测试,以便发现还没有作出规定的错误处理行为。然后再把该行为加到标准中。

1.2.2 修补牛蹄子路

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

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

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

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

1.2.3 实用至上

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

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

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

注意 Flash等浏览器插件不会一夜之间就消失。尽管HTML5有很多创新,但通过它来构建复杂的图形界面应用,仍然不是件轻而易举的事。不过,HTML5的终极目标很清楚:让网站不依赖插件也能够提供视频、丰富的交互功能以及各种漂亮的效果。

1.3 HTML5 标记初体验

下面是一个最简单的HTML5文档。

<!DOCTYPE html>
<title>A Tiny HTML Document</title>
<p>Let's rock the browser, HTML5 style.</p>

开始是HTML5的文档类型声明(下一节会详细介绍),然后是页面标题和一些内容。在这里,内容是包含在一个段落中的文本。

想必读者已经知道它在浏览器中是个什么样子了,不过为了验证你的直觉,可以参考图1-1。

图1-1:只包含—行文本的超简单的HTML5文档

甚至还可以进一步给这个文档瘦身。比如,HTML5标准不要求必须有最后面那个</p>标签,因为浏览器知道在文档后面要关闭所有没有关闭的标签(HTML5标准规定浏览器必须这样处理)。可是,这种简单的写法会让标记显得很乱,甚至可能导致意料之外的错误。

如果有其他方式提供标题信息,HTML5标准也允许你省略<title>元素。比如,在通过电子邮件发送HTML文档时,可以把标题放在邮件的标题中,而把其他标记(文档类型声明以及内容)放在邮件的正文里。不过,这很明显是一种特例。

更常见的情况,则是充实这个已经瘦骨嶙峋的HTML5文档。大多数Web开发人员都认为使用<head><body>来分块可以避免导致混乱,因为可以把关于页面的信息(头部)与页面的实际内容(主体)分开。在为页面添加脚本、样式表和元数据的时候,这种结构特别实用:

<!DOCTYPE html>
<head>
  <title>A Tiny HTML Document</title>
</head>
<body>
  <p>Let's rock the browser, HTML5 style.</p>
</body>

当然,(第3行和第6行)代码中的缩进不是必需的。这里使用缩进就是为了让人一眼就能看清楚页面结构。

最后,还可以选择用<html>元素来封装整个文档(不包含文档类型声明那一行)。结果就成了这样:

<!DOCTYPE html>
<html>
<head>
  <title>A Tiny HTML Document</title>
</head>
<body>
  <p>Let's rock the browser, HTML5 style.</p>
</body>
</html>

在HTML5以前,所有版本的HTML官方规范都要求使用元素,而实际上用不用它对浏览器来说是无所谓的。HTML5则规定可用可不用。

注意 使不使用<html><head><body>元素只代表一种风格。即便是在HTML5诞生之前就已经存在的浏览器中,不用这些元素,页面照样可以完美呈现。事实上,浏览器会自动假设页面中已经包含了这些元素。因此,如果用JavaScript来查询DOM(表示页面中元素的一组对象,可以通过编程方式访问),仍然能够找到<html><head><body>元素,无论你实际上加了还是没加。

现在,这个示例比最简单的HTML5文档复杂一些,但比真正实用的HTML5网页又简单一些。接下来的几节,我们会陆续向其中加入新内容,同时也对标记进行简单介绍。

1.3.1 HTML5 文档类型

每个HTML5文档的第一行都必须是一个特定的文档类型声明。这个文档类型声明用于宣告后面的文档标记遵循哪个标准。以下文档声明表示文档标记遵循HTML5标准:

<!DOCTYPE html>

HTML5的文档类型声明给人的第一印象就是极其简单。特别是与冗长的XHTML 1.0严格型的文档类型声明相比,这一点更明显:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

面对如此复杂的XHTML文档类型声明,就连专业的Web开发人员也不得不采用复制粘贴的方法。相比之下,HTML5的文档类型声明简约至上,手工输入也不麻烦。

另外,HTML5的文档声明还有一点值得注意,那就是它不包含官方规范的版本号(即HTML5中的5)。事实上,这个声明仅仅表明当前页面是HTML页面。这与HTML5作为一门活着的语言(见1.1.4节)的远见是分不开的。换句话说,只要有新功能添加到HTML语言中,你在页面中就可以使用它们,而不必为此修改文档类型声明。

由此,不少读者可能都会提出一个问题:既然HTML5是一门活语言,那为什么还要求网页中有这个所谓的文档类型声明呢?

要求保留文档类型声明,主要是由于历史原因。如果没有文档类型声明,那大多数浏览器(包括Internet Explorer和Firefox)将转换到一种混杂模式(quirk mode)1。在这种模式下,浏览器会尝试根据有点不那么正常的规则呈现网页(那些规则是在浏览器的老版本中使用的)。而问题是,不同浏览器的混杂模式也不一样,因此为一种浏览器设计的页面到了另一个浏览器中,不是字体大小不一样,就是布局上有瑕疵,或者出现其他不一致的问题。

1IE5.5引入了文档模式(document mode)的概念,这个概念是通过切换文档类型声明实现的。最初的两种文档模式是:混杂模式和标准模式。混杂模式会让IE的行为与(包含非标准特性的)IE5相同,而标准模式则让IE的行为更接近标准行为。虽然这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行。摘自《JavaScript高级程序设计(第3版)》P16 ~ P17,[美]Nicholas C. Zakas著,李松峰、曹力译,人民邮电出版社2012年版。(译者注)

而在添加了文档类型声明后,浏览器就知道你想要使用更严格的标准模式(standard mode),在这种模式下,所有现代浏览器都会以一致的格式和布局来显示网页。浏览器不关心你使用的是哪种文档类型(个别情况下还有些例外),只要它检查到你有某种文档类型声明就好。HTML5的文档类型声明是最短的有效文档类型声明,因此它总是能触发标准模式。

提示 HTML5的文档类型声明可以触发所有具备标准模式的浏览器的标准模式,包括那些对HTML5一无所知的浏览器。为此,从现在开始,你可以在任何网页中都使用HTML5文档类型声明,即便使用很少得到支持的HTML5功能也没问题。

虽然文档类型声明主要的目的是告诉浏览器去做什么,但其他代理也可以检测该声明,比如,HTML5验证器、搜索引擎、设计工具,还有人——在想知道你当初在页面中想写什么样的标记时。

1.3.2 字符编码

字符编码是一种标准,计算机根据它把文本转换成保存在文档中的字节序列(或者在打开文件时再将字节序列转换成文本形式)。由于历史原因,现有的编码标准有很多种。但实际上,所有英文网站今天都在使用一种叫UTF-8的编码,这种编码简洁、转换速度快,而且支持任何你想要的非英文字符。

一般来说,经过配置的Web服务器会告诉浏览器它提供的网页采用了什么编码。但除非是你自己配置的Web服务器,否则这一步始终是不确定的。由于浏览器在猜测网页编码的时候可能会引发一些说不清的安全问题,因此最好在自己的标记中也加上编码信息。

在HTML5文档中添加字符编码信息也很简单。只要像下面这样在<head>区块的最开始处(如果没有添加<head>元素,则是紧跟在文档类型声明之后)添加相应的<meta>元素即可:

<head>
  <meta charset="utf-8">
  <title>A Tiny HTML Document</title>
</head>

Dreamweaver等设计工具在创建新网页时会自动添加这个元信息,它们也会确保将文件保存为UTF编码格式。不过,如果你使用的是简单的文本编辑器,那就还要自己选择将文件保存为正确的格式。比如,使用Windows中的记事本程序编写HTML页面后,必须在“保存为”对话框下方的“编码”列表中选择“UTF-8”。而在使用Mac OS中的TextEdit时,首先需要选择“格式” > “生成纯文本”,以确保程序将页面保存为纯文本,然后必须再从“保存为”对话框的“纯文本编码”弹出菜单中选择“Unicode(UTF-8)”。

1.3.3 页面语言

指明网页中使用的自然语言是一种好习惯。这个信息有时候对其他人有用,比如搜索引擎可以通过它来筛选搜索结果,确保只向搜索者返回页面语言与他使用的语言相同的页面。

为给内容指定语言,可以在任何元素上使用lang属性,并为该属性指定相应的语言代码(比如,en表示英语)。各国的语言代码可以在这里查到:http://people.w3.org/rishida/utils/subtags/

为整个页面添加语言说明的最简单方式,就是为<html>元素指定lang属性:

<html lang="en">

如果页面中包含多种语言的文本,那么这个细节信息对屏幕阅读器也是很有用的。在这种情况下,可以为文本中的不同区块指定lang属性,指明该区块中文本的语言(例如,可以给包含不同语言文本的<div>元素指定不同的lang属性)。这样,屏幕阅读器就可以选择朗读适当的文本了。

1.3.4 添加样式表

只要是经过特意设计的专业网站,就一定会使用样式表。指定想要使用的CSS样式表时,需要在HTML5文档的<head>区块中添加<link>元素,例如:

<head>
  <meta charset="utf-8">
  <title>A Tiny HTML Document</title>
  <link href="styles.css" rel="stylesheet">
</head>

这跟向传统的HTML文档中添加样式表大同小异,但稍微简单一点。

注意 因为CSS是网页中唯一可用的样式表语言,所以网页中过去要求的type="text/css"属性就没有什么必要了。

1.3.5 添加JavaScript

JavaScript最早是为了给网页添加一些闪光点和吸引力才出现的,不过编写起来比较费时间。今天,JavaScript的主要用途不再是装饰用户界面,而是开发新奇的Web应用,包括在浏览器中运行的极其先进的电子邮件客户端、文字处理程序,以及地图引擎。

在HTML5页面中添加JavaScript与在传统页面中添加差不多,下面就是一个引用外部JavaScript代码文件的示例:

<head>
  <meta charset="utf-8">
  <title>A Tiny HTML Document</title>
  <script src="scripts.js"></script>
</head>

没有必要加上language="JavaScript"属性。浏览器会假定你想要使用JavaScript,除非你想使用其他脚本语言,因为JavaScript是唯一被浏览器广泛支持的HTML脚本编写语言,所以你不会指定其他语言。不过,即使是引用外部JavaScript文件,也不能忘了后面的</script>标签。假如你不写这个标签,或者使用空元素语法想缩短标记,页面将不会执行加载脚本。

如果你在Internet Explorer中要花大量时间测试包含JavaScript的页面,还应该在<head>区块中包含一行特殊的注释,叫做Web标志(mark of the Web)2;这行注释要放在指定字符编码的元数据标签后面,如下所示:

2参见“Mark of the Web”:http://msdn.microsoft.com/zh-cn/library/ms537628(v=vs.85).aspx。(译者注)

<head>
  <meta charset="utf-8">
  <!-- saved from url=(0014)about:internet -->
  <title>A Tiny HTML Document</title>
  <script src="scripts.js"></script>
</head>

这条注释告诉Internet Explorer将页面视为从远程网站上下载下来的。否则,IE会切换到一种特殊的锁定模式,弹出一条安全警告,在你点了“允许阻止的内容”按钮之后才会执行JavaScript代码。

其他所有浏览器都会忽略这个“Web标志”注释,对远程站点和本地文件使用相同的安全设置。

1.3.6 最终结果

如果你按照上面这些步骤做了,那就有了一个如下所示的HTML5文档:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>A Tiny HTML Document</title>
  <link href="styles.css" rel="stylesheet">
  <script src="scripts.js"></script>
</head>

<body>
  <p>Let's rock the browser, HTML5 style.</p>
</body>
</html>

虽然这不再是一个最短的HTML5文档,但以它为基础可以构建出任何网页。这个例子本身没什么可圈可点之处,不过在下一章创建真实网页的过程中,我们会为内容精心设计布局并通过CSS应用样式。

注意 本节介绍的所有HTML5语法——新的文档类型声明、声明字符编码的元数据元素、语言信息属性和引用样式表及JavaScript标签,同时适用于新旧浏览器。因为这些语法依赖于所有浏览器的默认行为和内置的纠错机制。

1.4 HTML5 语法

如前所述,HTML5放松了某些规则。这是因为HTML5的制定者想让这门语言更紧密地反映浏览器的现实。换句话说,他们想缩小“可以工作的网页”与“根据标准是有效的网页”之间的差距。接下来,我们就介绍一下HTML5改变的语法规则。

注意 没错,还有很多浏览器支持的老式做法被HTML5标准严格排除在外。要想在自己的见面中及时改正这些老毛病,需要用到1.4.2节介绍的HTML5验证器。

1.4.1 放松的规则

在初次体验HTML5文档之后,我们知道HTML5并不要求网页中必须包含<html><head><body>元素(尽管它们的存在有时候非常有用)。但HTML5的轻松态度还不止于此。

HTML5不区分大小写,因此类似下面这样的标记是没有问题的:

<P>Capital and lowercase letters <EM>don't matter</eM> in tag names.</p>.

HTML5还允许省略关闭空元素(void element)的斜杠;所谓空元素,就是不会嵌套内容的元素,如<img>(图像)、<br>(换行)或<hr>(水平线)。以下是三种添加换行的等价方式:

I cannot<br />
move backward<br>
or forward.<br/>
I am caught

HTML5也修改属性的语法规则。属性值中只要不包含受限的字符(比如>、=或空格),就可以不加引号。下面这个<img>元素就利用了这一点:

<img alt="Horsehead Nebula" src=Horsehead01.jpg>

只有属性名没有属性值也可以。虽然XHTML要求必须采用如下冗余的语法将复选框设置为选中状态:

<input type="checkbox" checked="checked" />

但现在可以只包含属性名,回到HTML 4.01时代的传统短语法形式:

<input type="checkbox" checked>

对某些人来说,HTML5最令人担心的还不是这些。他们担心那些经常改变风格的开发人员会在严格的和松散的语法之间摇摆不定,特别是在一个文档内部也经常转换风格。可是,这种情况在XHTML时代同样存在。无论是严格还是松散,良好的风格都取决于Web设计师,而浏览器则会无条件地接受你扔给它的任何东西。

如果能做到如下几点(也是本书后续示例遵循的约定——尽管不是必须遵循的),基本上就可以算作良好的HTML5风格了。

  • 包含可选的<html><body><head>元素。要给页面定义自然语言(见1.3.3节),<html>是最理想的地方;而<body><head>有助于将页面内容与其他页面信息分离。

  • 标签全部小写(如用<p>而非<P>)。虽然不是必须这么做,但这种形式很常见,输入起来要轻松容易得多(因为不需要按Shift键),而且不会让人触目惊心。

  • 为属性值加引号。加引号是有理由的——防止你在不经意间犯错。要知道,没有引号的话,一个无效字符就可能破坏整个页面。

不过,还有一些老的约定这里并没有列出来(你也可以忽略)。本书的示例不会关闭空元素,因为在基于HTML5编写代码时,大多数人都不屑于添加额外的斜杠(/)。类似地,在属性名与属性值相同的情况下,还一味地留恋长属性的形式也没有什么道理。

1.4.2 HTML5 验证

没准儿新的松散的HTML5语法让你觉得很舒服。没准儿,一想到欢快的浏览器背后可能隐藏着不一致的、到处都是错误的标记,你简直夜不能寐。如果你不幸是后一种情况,那么一定会高兴听到这个消息:有验证工具可以帮你抓住那些与HTML5推荐标准不相符的标记,甚至都不会惊扰浏览器。

以下就是HTML5验证器会关注的一些可能的问题:

  • 缺少必需的元素(例如<title>元素);

  • 有开始标签但没有结束标签;

  • 标签嵌套错误;

  • 不包含必要属性的标签(例如没有src属性的<img>元素);

  • 元素或内容放错了地方(例如把文本直接放在了<head>区块中)。

Dreamweaver等Web设计工具都有它们自带的验证器。如果你嫌麻烦,也可以使用在线验证工具,下面我们展示如何使用W3C标准组织提供的流行的验证器。

1. 在浏览器中,打开http://validator.w3.org(图1-2)。

图 1-2:W3C 的验证器站点 http://validator.w3.org 提供了三个验证HTML的选项,可以填写网页的地址、上传网页或直接输入标记(如图所示就是直接输入标记)

2. 单击相应的选项卡,提供HTML内容。

  • “Validate by URI”可以验证已经存在的网页。只要在Address(地址)框中输入页面的URL即可(例如http://www.mysloppysite.com/FlawedPage.html)。

  • “Validate by File Upload”可以验证你电脑硬盘上的页面。首先,单击Browse(浏览)按钮(在Chrome中单击Choose File<选择文件>)。在“打开”对话框中,选择HTML文件并单击Open(打开)。

  • “Validate by Direct Input”可以验证任何标记——只要在大文本框里输入即可。从文本编辑器中直接把标记复制粘贴到W3C验证页面的文本框里是最简单的方式。

在继续之前,可以单击More Options(更多选项)修改设置,不过一般不用。最好是让验证器自动检测文档类型,因为这样验证器会使用你在网页中指定的文档类型。类似地,除非你的页面中使用了不同的语言,而验证器无法确定正确的字符集,否则就用自动检测好了。

3. 单击Check(检测)按钮。

这样就会把HTML页面发送到W3C验证器。稍微等一会儿,就会看到报告。你会看到自己的文档是否通过了验证,而如果失败的话,则会看到验证器检测到的错误(见图1-3)。

图1-3:验证器发现了由两个过失衍生出来的四个差错。首先,页面中没有必需的<title>元素;其次,<p>元素在嵌套的<strong>结束之前先结束。(要解决这些问题,把</p></strong>替换成</strong></p>即可。)顺便说一句,这个文档中的问题并不影响所有浏览器正确地显示它

注意 即便是验证之后没有发现一点问题的文档,验证器也会给出一些警告,包括字符编码是自动检测到的,HTML5验证服务还处于试验阶段、还不完善,等等。

1.4.3 XHTML的回归

如前所述,HTML5宣布了上一个Web王朝——XHTML时代的终结。但是,现实可没有那么简单,XHTML的拥趸也不必放弃上一代标记语言中自己最热爱的东西。

首先,别忘了XHTML语法还在呢。XHTML强制要求的规则要么仍具有指导意义(例如,元素要正确嵌套),要么仍然是一种得到支持的可选约定(例如,空元素可以包含结束的斜杠)。

要是想强制使用XHTML语法呢?也许你担心自己(或者自己的同事)在不经意间“堕落”到使用过去HTML的松散语法。不要紧,可以使用XHTML5;这个标准还没有多少人知道,其本质是给HTML5加上了XML的限制。

如果想把一个HTML5文档转换成XHTML5文档,必须在<html>元素中明确添加XHTML命名空间、关闭每一个元素、所有标签都要小写……下面就是一个XHTML5文档的示例:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8"/>
  <title>A Tiny HTML Document</title>
  <link href="styles.css" rel="stylesheet"/>
  <script src="scripts.js"></script>
</head>

<body>
  <p>Let's rock the browser, XHTML5 style.</p>
</body>
</html>

这样,就可以使用XHTML5验证器基于早先的XHTML规则对其进行更严格的错误检测了。标准的W3C的验证器不行,但可以使用http://validator.w3.org/nu,这个验证器在Preset(预设)下拉列表中提供了XHTML5选项。如果你不是直接输入页面的标记,或者不是把标记粘贴到文本框中,那还需要选上“Be lax about content-type”(不严格要求content-type)。

按照上述步骤,你可以创建并验证一个XHTML文档。可是,浏览器仍然只会将你的页面当成HTML5文档来解释,只不过这个文档有意要向XML靠拢罢了。除此之外,浏览器不会应用任何规则。

如果你想系统地支持XHTML5,还必须配置Web服务器,以application/xhtml+xml或application/xml的MIME类型来提供网页(不能再使用text/html;有关MIME类型请参见5.3.1节)。不过,在致电主机托管公司之前,务必清醒地认识到:这一修改会导致IE9之前所有版本的Internet Explorer均无法显示你的页面。换句话说,真正的XHTML5有浏览器兼容性问题。

有时候,即便支持XHTML5的浏览器在处理XHTML5文档时也会与处理普通的HTML5文档有所区别。这些浏览器将它作为XML文档处理,如果处理失败(比如因为你有个地方没写对),浏览器就不会再解释文档的其他部分了。

到底什么时候使用XHTML5?对于绝大多数Web开发人员,无论是一般人还是HTML5的铁杆粉丝,都没有必要使用XHTML5,以免招惹麻烦。唯一的例外,就是那些以XML作为开发目标的程序员。例如,想要使用XQuery和XPath等XML相关的标准来操作页面内容的开发人员。

提示 对于好奇的读者,我可以告诉你一个技巧,能让浏览器切换到XHTML模式——只要把文件的扩展名改为.xhtml或.xht即可。然后在硬盘中打开这个文件,多数浏览器(包括Firefox、Chrome和IE9+)都会认为该页面是从Web服务器下载下来的,而且MIME类型为XML。如果页面中有什么错误,浏览器窗口会显示只处理了一部分的页面(IE)、XML错误消息(Firefox)或二者的组合(Chrome)。

1.5 HTML5 元素家族

到目前为止,本章集中讨论了HTML5语法的变化,但更重要的则是新增、减少及改变了HTML哪些支持的元素。接下来的几节将分别讨论这些方面的变化。

1.5.1 新增的元素

在接下来的几章,我们将主要把时间放在学习新元素上,这些元素在此之前从来没有在网页中出现过。表1-1列表出这些新元素(以及哪一章包含对相应元素的详细介绍)。

表1-1 HTML5新增的元素

类别

元素

哪部分详细介绍

用于构建页面的语义元素

<article><aside><figcaption><figure><footer><header><nav><section><details><summary>

第2章

用于标识文本的语义元素

<mark><time><wbr>
(以前就支持,但现在已经正式列入规范)

第3章

Web表单及交互

<input>(不是新元素,但增加了很多了类型)、<datalist><keygen><meter><progress><command><menu><output>

第4章

音频、视频及插件

<audio><video><source><embed>
(以前就支持,但现在已经正式列入规范)

第5章

Canvas

<canvas>

第8章

非英语支持

<bdo><rp><rt><ruby>

HTML5 规范http://dev.w3.org/html5/markup

1.5.2 删除的元素

HTML5一方面添加了新元素,另一方面也从官方标准中剔除了少量元素。这些元素仍然可以得到浏览器支持,但任何遵循规范的HTML5验证器都会敏感地查出它们的藏身之所,并给出错误提示。

最明显的一点是,HTML5沿袭了不欢迎表现性元素的思想(最初萌发于XHTML)。所谓表现性元素,指的是那些仅仅是为网页添加样式的元素,而连最菜的Web设计人员也知道那是样式表该干的事儿。被剔除的元素都是专业开发人员很多年没有用过的元素(如<big><center><font><tt><strike>)。HTML的表现性属性也与之“同归于尽”了,没有什么必要在这里列出来了。

此外,HTML5进一步埋葬了Web开发人员原来已经摒弃的HTML框架。最初,HTML框架似乎是在浏览器窗口中显示多个网页的不错方式,但如今,框架往往意味着严重的可访问性问题,因为它们难以适应搜索引擎、辅助软件和移动设备。而有意思的是,<iframe>元素(通过它可以将一个网页放在另一个网页中)倒是侥幸得以保留。究其原因,主要是Web应用经常要利用<iframe>实现一些集成任务,比如在网页中包含YouTube窗口、广告和谷歌搜索框等。

还有另外一些元素,由于冗余或容易导致误会等原因也被剔除了,比如<acronym>(代之以<abbr>)和<applet>(因为<object>更好)。但元素家族的绝大部分成员照旧还生活在HTML5时代。

注意 HTML5元素家族中保留的元素超过100个。除此之外,差不多有30个新元素,还有大约10个有显著改变。要了解完整的元素列表(以及哪些是新元素、哪些改变了),请参考 http://dev.w3.org/html5/markup/

1.5.3 改变的元素

HTML5还有另一个奇怪的做法:有时候会将一个旧元素用于新的目的。例如,<small>元素的用途不再是减少文本字体的大小(这本来应该是样式表的任务)。HTML5虽然删除了<big>元素,但却保留了<small>元素,不过含义变了。现在,<small>元素表示“附属细则”(small print),比如页面底部没人想让你看到那些法律条款:

<small>The creators of this site will not be held liable for any injuries that may result from unsupervised unicycle racing.</small>

放在<small>元素中的文本仍然照常显示,只不过字体稍小一点,除非你可使用样式表重写它的样式。

注意 人们对<small>元素有两种看法。一种看法认为它做到了最大限度的向后兼容,因为老浏览器都支持<small>元素,而HTML5页面中还将继续支持它。另一种看法认为它会导致旧网页中相应元素的语义变化,过去是用<small>元素来减少文本大小,但其中的文本不一定就是“附属细则”之类的。

另一个改变的元素是<hr>(horizontal rule,水平线),用于在两个区块间画一条线。在HTML5中,<hr>表示主题的转换,即从一个主题变为另一个主题。默认的格式还在,只不过又赋予了新的含义。

类似地,<s>(struck text,删除的文本)也不仅仅是给文本加一条删除线那么简单了,它现在表示不再准确或不再相关的内容。<hr>元素与<s>元素的变化都不及<small>元素那么大,至少还与它们传统HTML中的用法有联系。

粗体和斜体

要说最重要的变化,非粗体和斜体这两个格式化元素莫属。XHTML 1.0诞生后,HTML中最常用的两个表示粗体和斜体的元素<b><i>部分被<strong><em>元素取代。其背后的思想是停止从格式(粗体和斜体)的角度来看问题,而是要换成使用具有真实逻辑含义(重要或重音)的元素。这种思想当然很有意义,但<b><i>这两个标签仍然作为XHTML新引入的两个标签的简写形式存在着,因为大家对它们更熟悉。

HTML5尝试解决这个问题。它没有强迫开发人员放弃<b><i>,而是为这两个元素赋予了新的含义。背后的思想就是允许上述4个元素在有效的HTML5文档中共存,但结果多少让人有点迷惑,下面分别说明。

  • 使用<strong>表示重要的文本内容,也就是那些需要在周围文本中突出出来的文本。

  • 使用<b>表示应该用粗体表示的文本,但该文本并不比其他文本更重要。比如,关键字、产品名称等所有需要用粗体表示的文本都可以用这个标签。

  • 使用<em>表示重读的文本,也就是在朗读的时候要大声读出来。

  • 使用<i>表示应该用斜体表示的文本,但该文本并不比其他文本更重要。比如,外文单词、

技术术语等所有需要使用斜体表示的文本都可以用这个标签。

以下这段代码以适当的方式使用了上述全部4个标签:

<strong>Breaking news!</strong> There's a sale on <i>leche quemada</i> candy at the <b>El Azul</b> restaurant. Don't delay, because when the last candy is gone, it's <em>gone</em>.

在浏览器中,会看到如下结果:

Breaking news! There's a sale on leche quemada candy at the El Azul restaurant. Don't delay, because when the last candy is gone, it's gone.

对Web开发人员来说,他们有的会遵循HTML5这个善意的规则,有的还是继续使用自己最熟悉的元素去标粗体和斜体格式。

1.5.4 调整的元素

HTML5也调整了一些元素的使用规则。要说啊,这些调整只有那些死钻HTML的家伙才会注意到,但偶尔也会产生比较大的影响。举一个例子,不太常用的<address>元素并不适合标注邮政地址(尽管address是“地址”的意思)。实际上,这个元素只有一个目的,即提供HTML文档作者的联系信息,比如电子邮件地址或网站链接:

Our website is managed by:
<address>
<a href="mailto:jsolo@mysite.com">John Solo</a>,
<a href="mailto:lcheng@mysite.com">Lisa Cheng<a>, and
<a href="mailto:rpavane@mysite.com">Ryan Pavane</a>.
</address>

再比如,<cite>元素的含义也不一样了。当然,像下面这样引用某些作品(如新闻、文章、电视节目)还是可以的:

<p>Charles Dickens wrote <cite>A Tale of Two Cities</cite>.</p>

可是,现在用<cite>去标注人名已经不对了。这个变化最终导致了令人意想不到的争议,因为以前是可以这么用的。一些“骨灰”级的Web开发人员公开发表言论,鼓动人们不用遵守<cite>的新使用规则。这可真让人有点匪夷所思,毕竟你一辈子能在编辑网页的时候看见几回<cite>元素啊?

对用于创建链接的<a>元素的调整幅度相对更大一些。HTML以前的版本允许用<a>元素来标注可以单击的文本或图像。而在HTML5中,可以在<a>元素中放置任何东西;就是说,你在里面放上一大段文字、一个列表、几幅图像……都没有问题。(如果你真这么做,那就会发现里面的所有文本都会变成蓝色并带有下划线,而图像则会产生蓝色的边框。)Web浏览器支持这种做法已经有很多年了,HTML5只不过是把这种行为写进了规范,即便这种用法没什么大用处,但毕竟已经列入了标准。

还有一些调整在目前所有浏览器中都还未得到支持。例如,<ol>元素(有序列表)现在有了一个reversed属性,用于反转序号(直到1或其他通过start属性设置的正序时的起始值)。不过,这个属性目前只有Chrome和Safari支持。

在学习本书的过程中,我们还会陆续介绍其他一些被调整了使用规则的元素。

1.5.5 标准化的元素

HTML5还把一些浏览器实际支持,但并没有得到之前的HTML或XHTML规范承认的元素加入了标准。其中最广为人知的一个元素就是<embed>,这个元素在目前的网页中得到了普遍使用,成为了一种向页面中加入插件的通用方法。

另一个新元素是<wbr>,表示可以在某处断行。换句话说,如果某个词太长了,一行放不下,那浏览器就会在<wbr>标注的地方断开:

<p>Many linguists remain unconvinced that
<b>supercali<wbr>fragilistic<wbr>expialidocious</b> is indeed a word.</p>

如果需要在小空间(如表格单元或小方块)里放长名字(比如编程语言中的变量名),可以用<wbr>来标注可以在名字的什么地方断行。不过,即使浏览器支持<wbr>,它也只会在相应空间盛不下长名字时才会断行。对于前面的标记,在浏览器中有可能看到以下三种情况:

说到<wbr>,难免会让人想起类似的<nobr>元素,后者用于阻止文本换行,可用空间再小也不行。但HTML5认为<nobr>已经不合时宜,建议所有自重的Web开发人员不要再使用它了。要想达到同样的效果,可以在CSS中使用white-space属性,将它的值设定为nowrap

1.6 今天开始用 HTML5

在使用HTML5之前,必须知道你的用户浏览器对它的支持情况。毕竟,我们希望得到的是一个耀眼的新页面,而非一堆混乱的标记和遇上过时浏览器就错误百出的脚本。

稍后,我们会介绍怎么知道HTML5的哪个具体功能得到了哪些浏览器的支持,以及你的用户中有多大比例在使用这些浏览器。不过,在此之前,我们先概括一下HTML5当前受支持的情况。

  • 如果你的用户使用流行的Chrome或Firefox,总体来说问题不大。这两款浏览器不仅已经支持HTML5很多年了,而且都能够自动升级。换句话说,不大可能有这两款浏览器的老版本存在。

  • 如果你的用户使用Safari或Opera,那也还好。这两款浏览器同样支持HTML5很多年了,同样也没有多少老版本用户。

  • 如果你的用户使用平板电脑或智能手机,那可能某些功能会有一些限制,本书后面还会介绍到。不过,所有今天的移动浏览器在设计时都会考虑支持HTML5,因此你的网页偶尔可能出现点问题,但总体还可以接受。

  • 如果你的用户使用旧版本的IE,也就是IE10之前的任何版本,那大多数HTML5功能都将无法使用。问题在哪儿呢?因为如今很多旧版本Windows仍然常见,这些操作系统都预装了旧版本IE。更糟糕的是,很多旧版本Windows会阻止用户升级到现代的支持HTML5的IE。比如Windows Vista只允许用户使用IE9,而在令人谈之色变的Windows XP上则只能用IE8。

并非微软想要阻挠Web的发展,而是新版本IE都是针对新硬件设计的。换句话说,新软件放到旧硬件上就是不能运行。然而,使用旧版Windows的用户还可以选择Firefox替代IE,只不过有人不知道怎么安装Firefox,或者不被允许这么干罢了。

注意 尽管IE6和IE7已经基本退出了历史舞台,但(写作本书时)IE8和IE9的流量仍然有百分之十以上。我们当然不能忽视百分之十的用户,因此必须想办法为大多数HTML5功能寻找替换手段,至少在不远的将来还是需要这样做。

 

对付旧版本的浏览器

接下来的几年,一些用户的浏览器可能仍然不会支持你要使用的全部HTML5功能。这是我们要面对的现实。不过,只要你不介意麻烦点儿,那也不是问题。这时候有两种处理方式。

  • 平稳退化。有时候,如果某个功能不被浏览器支持,也不是什么大问题。例如,<video>元素提供了一种后备机制,可以为老的浏览器提供替代内容(比如使用Flash插件的视频播放器)。只显示一条错误消息就很不礼貌了,不能成为平稳退化的模范!还有一些表单功能(例如占位符文本),以及像圆角和投影之类的CSS3属性,较老的浏览器完全可以忽略它们。当然,可以写一些JavaScript代码来检测浏览器是否支持你想使用的功能(可以使用Modernizr)。如果不支持,则显示较少内容或使用不那么花哨的方式。

  • 借助JavaScript。HTML5的很多新功能都源自Web开发人员费尽心机做出来的东西。因此,HTML5中的某些功能完全可以使用优秀的JavaScript库来实现(最差的情况,完全通过手工编写JavaScript代码也可以写出来),这一点也不奇怪。通过JavaScript来实现这些功能很费事儿,不过网上已经有很多写得很好(或不那么好)的解决方案了,你可以直接拿来使用。其中一些比较成熟的则称为“腻子脚本”(参见1.6.4节)。

1.6.1 了解浏览器支持情况

到底能使用哪些HTML5的功能,最终还是由浏览器开发商说了算。如果它们不支持某个功能,无论标准里怎么说,最终还是不能用。今天,主流的浏览器差不多有四五个(不包括智能手机、平板电脑等能上网的设备中的移动浏览器)。作为个体,没有几个Web开发人员能自己完全测试每个浏览器的每一项功能,更不用说检测那些还被很多人使用的老浏览器的支持情况了。

好在,有一个Can I use网站可以帮我们。这个网站可以详细地列出每一款主流浏览器对HTML5的支持情况。更重要的是,它还能让你针对实际需要的功能查询浏览器。下面是这个网站的使用指南。

1. 在浏览器中打开http://caniuse.com

可以看到,主页面中有很多分了组的链接,如CSS、HTML5,等等。

2. 选择你想了解的功能。

找到功能的最简单方法,就是在顶部的搜索框里输入并搜索。

或者,也可以通过点击首页中的链接来查询某一功能。比如,HTML5链接组是HTML5标准中规定的功能;JS API组是那些依赖JavaScript的功能,这些功能一开始属于HTML5,但后来又被剥离了出来;而CSS组是属于CSS3的功能。

提示 点击每个组的链接,比如HTML5或JS API,可以一次性查看所有功能的受支持情况。

3. 查看结果(图1-4)。

图1-4:搜索audio得到两个表格。第一个表格展示的是浏览器对<audio>元素的支持情况(图中所示)

绿色单元格中显示的是完全支持音频功能的浏览器版本号,红色单元格显示的是不支持音频功能的浏览器版本号

在每个功能的表格中,都会包含一组不同的浏览器版本。表格中用单元格的颜色表示对功能的支持情况:红色表示不支持,浅绿色表示支持,橄榄绿色表示部分支持,灰色表示不确定(一般是因为浏览器的当前版本还在开发过程中,相应功能还没有加入)。

4. 查看更多浏览器细节。

起初,这个支持表格只包含流行浏览器的最新版本。而通过调整,也可以让它包含其他浏览器的支持情况,比如IE7或Android版移动Firefox浏览器。

要选择表格中包含哪个浏览器,首先单击表格上方的Show options链接。然后会出现一组浏览器复选框,选中复选框,可以添加浏览器。拖动Version shown中的滑块则可以设定阈值,根据需要排除不常用的浏览器版本。

另外,单击表格左上角的Show all version链接,则可以显示Can I use数据库里收集到的所有浏览器兼容信息。不过,这时候的表格会非常大,而显示的浏览器甚至包含古老的Firefox 2 和IE5.5。

1.6.2 浏览器装机情况统计

怎么知道应该关注哪个浏览器版本呢?浏览器采用情况统计可以告诉你,有多少用户的浏览器支持你想使用的功能。为此,可以查看流行的流量跟踪站点GlobalStats,用法如下。

1. 在浏览器中打开http://gs.statcounter.com

打开网站后,可以看到一个折线图,显示着最近几年常用的浏览器。但此时的图表不包含版本信息,从中也看不出来有多少人还在使用IE的那些问题版本(IE10之前的版本)。要看到这些信息,还要调整设置。

2. 找到Stat链接(图表左下方),点击打开设置项,选择Brower Version(Combine Chrome& Firefox)。

这样,不仅可以看到目前正在使用的浏览器,也能看到使用的是它们的哪个版本。组合Chorme和Firefox,是因为这两款浏览器更新太快,这样可以减少十几条折线,让图形简单直观(图1-5)。

图1-5:如图所示,尽管Chrome如日中天,但IE8和IE9等问题浏览器仍然有一定的市场

3. 在Region中选择地理区域。

默认设置是全球(Worldwide),即全世界的使用统计信息。可以在这里选择具体的国家(如Bolivia)或地区(如North America)。

4. 在Period中选择日期范围。

一般来说,我们会关注一整年的浏览器使用率变化情况。但如有必要,也可以选择更短的时间范围,比如过去的三个月。

5. 使用图表右侧的选项按钮切换图表类型。

选择Line,就是以折线图显示浏览器使用率随时间推移的变化情况。选择Bar,就是以柱形图显示当前浏览器使用率。选择Map,则以彩色地图显示某地区使用率最高的浏览器。

GlobalStats每天都通过它遍布数百万网站的跟踪代码来生成统计信息。虽然涉及的页面量巨大,数据量也非常大,但总归还是整个Web的一小部分。换句话说,你不能假定自己的网站访客都使用相同的浏览器。

更进一步,浏览器装机份额还会随用户所在国家和网站类型而变化。比如,德国40%以上的用户使用Firefox,位居第一。在访问TechCrunch网站(计算机极客最喜欢的新闻网站)的用户中,使用旧版本Internet Explorer的非常少。所以说,要想设计符合自己用户需求的网站,就必须以你自己的页面生成的统计信息作为依据。(如果你还没有在自己的站点中使用网页跟踪服务,我推荐你使用最好用而且免费的Google Analytics:www.google.com/analytics。)

1.6.3 通过Modernizr检测功能

检测功能是应对浏览器支持差异的一个重要策略。典型的模式是:加载页面,通过JavaScript脚本检测某个具体的功能是否可用。然后,可以对用户给出提示(最衰的做法)、平稳退化到没那么花哨的版本(稍好一些),或者采用其他方法实现浏览器本该支持的HTML5功能(最佳)。

遗憾的是,由于HTML5本质上是一个松散的相关标准的集合,因此不可能通过一次测试就能验证所有功能。相反,为了检测不同的功能,必须分别运行各种不同的测试——甚至,有时候还会测试浏览器是否支持某项功能的某个部分,而测试速度会非常快。

检测支持通常需要检查某个可编程对象的属性,或者创建一个对象并以特定的方式使用它。不过,在按照这种思路编写测试代码之前,一定要三思而行;因为弄不好,可能会非常麻烦。比如,由于种种原因,你的测试代码在某些浏览器上总是失败,或者过不了多久,又要重写测试代码。所以,我建议你使用Modernizr(www.modernizr.com),它是一个小巧的、持续更新的工具,专门用于测试浏览器对很多HTML5及相关功能的支持情况。如果你想使用新的CSS3功能,本书6.1.3节还将介绍一个实现后备支持的绝妙技巧。

在页面上使用Modernizr的方法如下。

1. 在浏览器中打开http://modernizr.com/download

找到Development version链接,这个链接指向最新的完整版Moderniznr。

2. 右键单击Development version链接,选择“链接另存为”或“目标另存为”。

命令名不一样,但功能一样,具体名称取决于浏览器。

3. 选择保存文件的目录,单击“保存”。

保存的JavaScript文件名为moderniznr-latest.js。

4. 把下载到的文件放在你的网页所在的文件夹中。

或者,放在一个子文件夹中也可以,然后修改引用该JavaScript文件的路径。

5. 在页面的<head>区块中添加对这个JavaScript文件的引用。

假定moderniznr-latest.js文件与你的网页放在同一文件夹中,下面就是代码片段的示例:

<head>
  <meta charset="utf-8">
  <title>HTML5 Feature Detection</title>
  <script src="modernizr-latest.js"></script>
  ...
</head>

这样,当页面加载后,Modernizr脚本就可以运行了。它能够在短短的数毫秒时间内检测很多新功能,然后创建一个名叫Modernizr的新JavaScript对象,检测结果就保存在这个对象里。通过检测这个对象的属性,就可以知道浏览器具体支持什么功能。

提示 要了解Modernizr能够检测的所有功能,以及需要检测的JavaScript对象的所有属性,请参考相关文档,地址为www.modernizr.com/docs

6. 编写脚本检测你想使用的功能,然后执行相应的操作。

例如,要检测浏览器是否支持HTML5的拖放功能,并将检测结果显示在页面上,可以使用以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML5 Feature Detection</title>
  <script src="modernizr-latest.js"></script>
</head>

<body>
  <p>The verdict is... <span id="result"></span></p>

  <script>
// 找到页面中用以显示结果的元素(id为result)
var result = document.getElementById("result");
if (Modernizr.draganddrop) {
    result.innerHTML = "Rejoice! Your browser supports drag-and-drop.";
}
else {
    result.innerHTML = "Your feeble browser doesn't support drag-and-drop.";
}
  </script>
</body>

</html>

图1-6显示了结果。

图1-6:虽然这个例子展示了检测功能的正确方法,但使用功能的方式不怎么理想。与其直接告诉你的访客他们的浏览器不支持这个功能,远远不如实现一个后备方案(即使结果不如使用HTML5功能那么好),甚至不如简单地忽略这个问题(如果相应的功能只是为了实现某个装饰性的效果,有没有它还不是无所谓)

提示 这个例子中使用了一种久负盛名的基本JavaScript技术——根据ID查找元素并修改其内容。如果你觉得这个例子不好理解,建议你先看一看附录B中关于JavaScript的入门知识。

完整的Modernizr脚本体量有点大,对于测试页面是没有问题的。但在完成开发后,应该创建一个只包含待检测功能的简化版Modernizr。为此,再次打开http://modernizr.com/download页面,但不是点击Development version链接,而是要选择复选框。把你想检测的功能依次选中后,点击GENERATE!按钮,就可以生成定制的Modernizr。再点击DOWNLOAD按钮把文件保存到本地硬盘即可(图1-7)。

图1-7:假设你需要一个检测HTML5画布、画布文本及HTML5视频功能的版本,那么检测其他功能的代码就不会出现在生成的Modernizr文件中

1.6.4 使用“腻子脚本”填补功能缺陷

Modernizr可以帮你找出浏览器支持上的缺陷。它会在某个功能不可用时提醒你,但除此之外不会帮你弥补这些缺陷。而这正是我们要介绍的腻子脚本(polyfill)的用途所在。从根本上说,腻子脚本就是一大堆五花八门的技术,目的就是填平旧浏览器对HTML5支持上的缺陷。英文单词polyfill源自英国的一种腻子粉,而腻子粉就是在刷墙漆之前用来填补墙面裂缝和漏洞的(腻子粉在美国叫spackling paste)。在HTML5中,理想的腻子脚本可以直接放到页面中使用,不必多做额外的工作。然后,这些脚本就能无缝地保持向后兼容,而且一点都不唐突,让你在其他人苦思冥想变通方案时就能用上纯粹的HTML5。

不过,腻子脚本并不完美。有些腻子脚本依赖的技术同样得不到普遍支持。例如,有一个“腻子脚本”可以通过Silverlight插件在老版本的Internet Explorer中模拟HTML5的画布。而假如访客不愿意安装Silverlight,那你还得考虑一种后备方案。还有一些腻子脚本实现的功能比HTML5规定的功能少一些,或者性能上要差一点。

有时候,本书会告诉你某个腻子脚本可以考虑。假如你想了解更多的信息,可以在GitHub上找到最相关的信息,乃至各种HTML5腻子脚本的完整集合,页面地址为: http://tinyurl.com/polyfill。不过我还要提醒一句:这些腻子脚本在品质、性能和支持等方面有着非常大的差异。

提示 光知道针对HTML5的某项功能有一个腻子脚本还不够。在自己的网站中实际地使用它们之前,必须先在各种老浏览器上测试,事先掌握它们的实际运行效果。

浏览器装机统计信息、功能检测再加上腻子脚本,在这些方面做足了功课之后,就可以考虑怎么应用HTML5功能了。下一章,我们将迈出第一步,介绍一些在新、旧浏览器中都能使用的HTML5元素。

目录

  • 版权声明
  • O'Reilly Media, Inc.介绍
  • 前言
  • 第一部分 现代标记
  • 第 1 章 HTML5 简介
  • 第 2 章 用语义元素构造网页
  • 第 3 章 编写更有意义的标记
  • 第 4 章 构建更好的 Web 表单
  • 第二部分 视频、图形和特效
  • 第 5 章 音频与视频
  • 第 6 章 美妙的 CSS3 字体和特效
  • 第 7 章 CSS3 与响应式 Web 设计
  • 第 8 章 基本 Canvas 绘图
  • 第 9 章 高级 Canvas 技术:交互性和动画
  • 第三部分 构建 Web 应用
  • 第 10 章 数据存储
  • 第 11 章 离线应用
  • 第 12 章 与 Web 服务器通信
  • 第 13 章 地理定位、Web Worker 和历史管理
  • 第四部分 附录
  • 附录 A CSS 基础
  • 附录 B JavaScript:页面的大脑