HTML5+CSS3网页设计入门必读

978-7-115-34933-0
作者: 【英】Jeremy Keith 【美】Dan Cederholm
译者: 邢薇薇郭俊飞王雪
编辑: 赵轩

图书目录:

详情

本书针对最新的HTML5,介绍了标记语言的起源和发展简介;HTML5的设计方法;富媒体;Web Forms 2.0;HTML语义入门;向读者展示了如何将普通文字转换成效果惊人、细节丰富的网页,并且适用于任何浏览器。你可以掌握最新的尖端CSS的功能,如多栏式布局,边框和盒子的影响,以及新的颜色和不透明度设置,等等。

图书摘要

版权信息

书名:HTML5+CSS3网页设计入门必读

ISBN:978-7-115-34933-0

本书由人民邮电出版社发行数字版。版权所有,侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用,未经授权,不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟,与我们共同保护知识产权。

如果购买者有侵权行为,我们可能对该用户实施包括但不限于关闭该帐号等维权措施,并可能追究法律责任。


版权声明

HTML5 for Web

Copyright © 2010 Jeremy Keith

All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or

transmitted, in any form or by any means, electronic, mechanical, by photocopying, recording or

otherwise, without the prior permission in writing Publisher.

CHINESE SIMPLIFIED language edition published by POSTS & TELECOM PRESS Copyright

©2014.

本书中文简体版由A Book Apart 公司授权人民邮电出版社独家出版。

未经出版者书面许可,不得以任何方式复制或抄袭本书内容。

版权所有,侵权必究。


要构建一个优秀的现代化网页,HTML5 和CSS3 是每一位开发人员必须掌握的工具。本书结构清晰,内容精炼,以最轻松易懂的方式向读者介绍了与HTML5 相关的标记简史、HTML设计、富媒体、WebForms20、语义、HTML5 应用实践等内容;以及CSS 使用现状、CSS 过渡、鼠标悬浮效果的制作、CSS 施转、多重背景、表单设计等CSS3 中最为重要的特性应用方法。

本书适合刚刚接触网页设计的新手阅读。对于已经了解传统网页制作的读者来说,也能通过本书,快速了解现代网页,尤其是针对移动设备的网页制作。


前言

当我和Mandy Brown、Jason Santa Maria成立A Book Apart时,我们十分希望对一个主题内容进行整理并成书出版,而且我们觉得,只有一个作者适合这项工作。

网页设计是基于标准的。虽然“real fonts”或CSS3也对网页设计产生了深远的影响,但HTML的影响是其他方面所无法比拟的。HTML是开发人员对W3C步调和政策不满的结果,它是为网页应用程序(而不仅仅是文件)而设计的,因此,虽然这个新版本的网络语言令网页设计界为之兴奋,但也导致了同等程度的愤怒和困惑。

在编写了关于DOM和JavaScript的书籍之后,Jeremy Keith以一种独特的方式阐述了HTML5,并介绍了对于网页设计师来说最重要的内容。另外,他还在这一部分中使用了尽可能多的文字和图片以达到更好的效果。

除了这本书之外,还有其他一些关于HTML5的图书,而且以后还会越来越多。开发者的需求推动了HTML5的发展。未来将会出现为应用开发者编写的、长达500页的技术书籍,甚至还会有为浏览器厂商编写的、字数更多的精品图书。这些图书可以解决一些超出你我能力范围的技术难题。

但是,这是一本为创建网页内容、标记网页和语义、设计辅助接口和体验的开发人员所写的书。它可以被称为HTML5用户指南。本书清晰快速地阐明了每个棘手的主题,从而使读者可以尽快应用到工作中。

——Jeffrey Zeldman

A Book Apart创始人


HTML是万维网(World Wide Web)的统一语言。通过它所提供的标签,人类已经创建了各种各样令人惊奇的超链接文档网络。从Amazon、eBay和Wikipedia,到个人博客和猫咪主题网站,这些无一不是HTML的杰作。

HTML5是这门通用语言的最新版。自诞生之日起,这门语言一直在不停地发展。虽然这次升级的变化之大史无前例,但HTML已经不是第一次进行更新换代了。

在发明Web的同时,蒂莫西·约翰-伯纳斯—李爵士创建了HTML(Hyper Text Markup Language,超文本标记语言)。1991年,他撰写了一篇名为“HTML Tags”的文档,在该文档中,他推荐了将近20个用来编写网页的元素。

使用尖括号包围文本这种形式的标签并不是蒂姆先生的首创。在此之前,SGML(Standard Generalized Markup Language,标准通用标记语言)就已经开始使用这种标签了。蒂姆先生并没有发明新的语言,而是利用已经存在的技术—在HTML5的发展过程也体现了这种倾向。

实际上,根本不存在HTML 1。最早的HTML官方规范是由IETF(Internet Engineering Task Force,因特网工程任务组)发布的HTML 2.0。这一规范中的许多特性都是在已有实现的基础上归纳总结出来的。例如,1994年居于市场领导地位的Mosaic浏览器提供了<img>标签,开发人员可以通过该标签在自己的文档中嵌入图像。后来,img元素就出现在了HTML 2.0中。

继IETF之后,W3C(World Wide Web Consortium,万维网联盟)成为了HTML后续标准的制定者,其官方网站为http://www.w3.org。20世纪90年代中期以后,W3C对HTML进行了几次升级,直至1999年发布的HTML 4.01。

此时,HTML的发展走到了一个十字路口。

HTML 4.01之后的修订版为XHTML 1.0。其中,X表示“eXtreme(极端)”。当时的网页开发人员在提到这个字母的时候,必须双臂交叉,作出一个X的形状来。

这只是个玩笑。实际上,X表示的是“eXtensible(可扩展)”。另外,也没有必要在提到它时交叉双臂。

XHTML 1.0规范的内容与HTML 4.01完全相同。没有添加任何新元素或新属性。这两个规范唯一的差别就是对HTML语法作出了不同的规定。HTML为开发人员提供了很大的自由度,他们可以按照自己的意愿去编写元素和属性,但XHTML却要求开发人员遵从XML规则。XML是W3C大多数技术规范的基础,也是一种更为严格的标记语言。

更加严格的语法规则并没有什么坏处,反而可以促使开发人员按照统一的样式来编写标签。此前的标签和属性可以是大写、小写,或者任意大小写字母的组合,而XHTML 1.0文档则要求所有标签和属性都必须为小写。

XHTML 1.0发布的时候恰逢浏览器普遍开始支持CSS。开发人员意识到了网页标准的出现,特别是在Web标准项目(The Web Standards Project)的倡导下,XHTML规定的这种更为严格的语法被看成是编写标记的“最佳实践”。

在此之后,W3C发布了XHTML 1.1。

如果说XHTML 1.0只不过是用XML重新表示的HTML,那么XHTML 1.1才是真正且纯粹的XML。也就是说,不能将text/html的MIME类型提供给XHTML 1.1文档。但是,如果开发人员以XML的MIMI类型来发布文档,那么当时世界上最流行的Web浏览器——Internet Explorer——就无法呈现该文档。

W3C似乎已经开始与日常的网页发布脱节了。

如果Dustin Hoffman在电影《The Graduate》(毕业生)中的角色是一名网页设计师,那么W3C只会对他说一个词:XML。

W3C在接管HTML的时候,HTML已经发展到了第4版(version4)。然后他们又着手开发XHTML 2,其目的是将Web建立在XML之上。

虽然XHTML 2的名字听起来与XHTML 1非常类似,但它们的差别却非常之大。与XHTML 1不同,XHTML 2与已有的网页内容都不兼容,甚至与以前版本的HTML也不兼容。XHTML 2的目的就是成为一门纯粹的语言,也就是不与以前的规范建立任何关系。

但这却是一场灾难。

一股反抗势力在W3C内部逐步壮大。W3C热衷于从理论角度构建单纯的标准,却无视网页设计人员的需求。来自Opera、Apple和Mozilla的代表对这种倾向非常反感,他们希望那些支持创建Web应用的特性能够得到更多的关注。

2004年的一次工作组会议成为了矛盾激化的导火索。伊恩·希克森(当时仍效力于Opera Software)建议,应以支持创建Web应用为目标来扩展HTML,但这个提议被驳回了。

于是,心怀不满的反抗者们建立了自己的组织:Web Hypertext Application Technology Working Group(Web超文本应用技术工作组),简称WHATWG。

从一开始,WHATWG的工作方式就与W3C截然不同。W3C采取基于表决的工作方式:提出议题、讨论议题、投票表决。WHATWG同样会提出和讨论议题,但哪些特性可以被写入规范最终由编辑决定。而这个编辑就是伊恩• 希克森。

表面上看,W3C的流程更民主,也更公平。但实际上,政治博弈和内部争论经常会导致流程停滞不前。而在WHATWG中,任何人都可以自由地发表意见,但负责最后决议的则只有编辑一个人,因此其工作效率明显高很多。其实编辑也并非拥有绝对的权力:一个仅由受邀人员组成的指导委员会可以质疑编辑的偏执做法。

最初,WHATWG的大部分工作被分为两个规范:Web Form 2.0和Web Apps 1.0。这两个规范都是在HTML的基础上扩展而来的。后来,这两个规范又被合并到一起,同时被简单地称为HTML5。

在WHATWG开发HTML5期间,W3C继续制定了XHTML 2规范。如果说XHTML2规范的制定速度很快,那是不准确的。实际上,这个过程是十分缓慢的。

2006年10月,蒂姆先生发表了一篇博文,承认将Web从HTML迁移到XML是行不通的。几个月后,W3C签发了新委任状,成立了一个HTML工作组。这个工作组并没有采取一切从头开始的方式,而是明智地决定:应该在WHATWG工作成果的基础上开发未来版本的HTML。

这样,时断时续的做法反而使情况变得令人困惑。W3C同时有两个工作组,分别负责制定不同的、互不兼容的标记语言:XHTML2和HTML 5(注意数字5前面有一个空格)。与此同时,还有一个独立的组织,即WHATWG,正在开发HTML5(没有空格)规范,而该规范将作为上述W3C中一个规范的基础。

网页设计师们会发现,搞清楚上述状况比理解电影《记忆碎片》、《雷管》、甚至导演大卫• 林奇的所有作品都要困难。

种种迷团终于在2009年烟消云散。W3C宣布不再续颁XHTML 2工作组的委任状。实际上,这种格式已经被废弃好几年了。这次的宣布差不多可以看成是为它补发了一张死亡证明。

奇怪的是,XHTML 2并没有平静地逝去,不少兴灾乐祸的人跳出来大放厥词。XML的反对者趁机奚落使用XHTML 1的开发人员—甚至忽略了XHTML 1和XHTML 2几乎没有任何共同点这一事实。

这时候,那些遵照XHTML 1严格规则的开发人员又担心起来,生怕HTML5又重新开始支持过去的标记。

其实,这样担心是多余的。虽然HTML5允许相对随意的标记,但它也支持严格的标记,到底选择哪种风格行事完全取决于使用人员。

切记,HTML5并不是一门凭空造出来的新语言。其标记的变化都是革新性的而非革命性的。无论开发人员正在使用哪个版本的HTML创建网站,他都可以说自己已经在使用HTML5了。


法国大革命是极端的政治和社会变革时期。这种革命热情也被倾注于对计时系统的改革中。在一段时期内,法兰西共和国引入了十进制计时制,即1天分为10小时,且1小时分为100分钟。该计时制的逻辑性和清晰性明显优于六十进制的计时制。

但十进制的计时制失败了。没有人使用这种计时制度。而XHTML 2的命运与之相似。 W3C再次证明了法国大革命的教训:改变现有的行为习惯是非常非常困难的。

为了避免过去所犯的错误,WHATWG起草了一系列设计原则以指导HTML5的开发。 其中一项主要原则是“支持已有内容”。这意味着对于HTML5来说,并不存在创立的起始时间。

XHTML 2试图废弃之前的一切。而与之不同的是,HTML5建立在现有规范和实现的基础之上。HTML 4.01的大部分内容在HTML5中都得到了 保留。

一些其他的设计原则,例如“不要做重复的工作”和“沿着足迹铺路”的意思是,对于网页设计师来说,如果存在一种普遍的方法来完成某项任务,那么即使它不是最好的方法,也应该被编入HTML5中,也就是说“别去修理没坏的东西”。

涉足过微格式(http://microformats.org)的网页设计师应该十分熟悉这些设计原则。HTML5社区具有同样的务实方针以实现标准格式的统一,所以无需担心理论问题。

这种态度体现在“最终用户优先”的设计原则中,该原则规定:在发生冲突时,最终用户优先,其次是作者、实现者、标准制定者,最后才是理论上的完满。

伊恩• 希克森已经多次表示,浏览器厂商才是HTML5真正的仲裁者。如果浏览器供应商拒绝支持某项协议,那么在规范中添加该协议就变得没有任何意义,因为这会使规范不够切合实际。根据最终用户优先的原则,网页设计师的意见更具有意义。如果网页设计师拒绝使用规范的某些内容,那么规范同样不够切合实际。

持续的内部张力推动了HTML5的创立。一方面,规范需要足够强大,从而有能力支持创建网页应用程序,另一方面,虽然大多数现有内容都处于完全混乱的状态,但是HTML5仍需要支持已有的内容。如果 HTML5的规范在某一个方向上偏离得太远,那么它将重蹈XHTML 2的覆辙。但是,如果它在另一个相反的方向上偏离得太远,那么它就会认为<font>标签和表单是万能的,因为这两者是大量网页建立的基础。

这是一种微妙的平衡,保持这种平衡需要务实且冷静的方法。

HTML5不仅声明了浏览器应该如何处理规范格式的标记,还首次规范了浏览器该如何处理格式不规范的文件。

浏览器厂商曾不得不独自研究如何处理错误。无论最流行的浏览器做出怎样的尝试,该过程通常都会涉及逆向工程,这会耗费浏览器厂商的时间。与其浪费时间模仿竞争对手处理有缺陷的标记,倒不如尝试实现新功能。

在HTML5中定义错误处理恐怕难以实现。虽然HTML5具有与HTML 4.01完全相同的元素和属性,并且完全没有添加新特性,但在2012年年底之前完成错误处理的定义仍然是徒劳的。

网页设计人员可能对错误处理不大感兴趣,特别是在他们一开始就会编写有效并且格式规范的文件的情况下,但错误处理对于浏览器厂商来说却非常重要。以往的标记规范都是为创作者编写的,而HTML5却是为创作者和实施者编写的。网页设计人员在细读规范时应牢记这一点。这就解释了为什么HTML5规范的内容如此之多,同时也解释了为什么该规范含有一些通常为专家所保留的细节。

文档类型声明(Document Type Declaration)简称为doctype,一直用于指定文档所编写的标记类型。

HTML 4.01的 doctype如下所示(»为自动换行标记):

<!DOCTYPE HTML PUBLIC »
"-//W3C//DTD HTML 4.01//EN" »
"http://www.w3.org/TR/html4/strict.dtd"> 

XHTML 1.0 的doctype如下所示:

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

这些doctype看起来并不易读,但它们以其独特的方式简单地说明了:“该文档用HTML 4.01编写”或“该文档用XHTML 1.0编写”。

如果doctype声称“该文档用HTML5编写”,那么按道理其中应该会出现数字5。但事实并非如此。HTML5的doctype如下所示:

<!DOCTYPE html> 

该doctype是如此之短,甚至可以让人将其背诵下来。

这实在是太不可思议了!如果 doctype中不含有版本号,那么该如何指定其他版本的HTML呢?

第一次看到HTML5的doctype的时候,我认为这是高度傲慢的结果。心想:“难道他们真相信这就是标记规范的最终版了吗?”

然而事实上,HTML5的doctype是非常务实的。由于HTML5需要支持现有内容,所以其doctype可以应用于现有的HTML 4.01文档和XHTML 1.0文档。任何未来版本的HTML也需要支持HTML5中的现有内容,因此应用版本号来标记文档的观念是有缺陷的。

事实上,doctype并不那么重要。假设需要为一个文档提供HTML 4.01的doctype。如果该文档中包含来自另一个规范的元素,如HTML 3.2或HTML5,那么浏览器将仍然呈现该文档的这一部分。这是因为浏览器支持的是特性,而非doctype。

起初,文档类型声明(Document Type Declaration)是为验证器而非为浏览器而设计的。浏览器仅在“doctype转换”的情况下才会关注doctype——“doctype转换”(doctypy switching)是一个聪明的小黑客,它根据是否存在合适的doctype来转换显示模式,即怪异模式(quirks mode)或标准模式(standard mode)。

为了确保浏览器以标准模式显示,至少需要HTML5的doctype。事实上,这是包含doctype的唯一原因。不用HTML5的doctype编写的HTML文档仍然是有效的HTML5。

HTML5中简化的不仅仅是doctype。

如果想要指定一个标记文档的字符编码,那么最好的方法就是确保服务器发送了正确的Content-Type文件头(header)。如果想要双倍保险,那么也可以使用<meta>标签来指定字符集。<meta>是一个用 HTML 4.01 编写的文件声明:

<meta http-equiv="Content-Type" content="text/html; »
charset=UTF-8"> 

下面的示例实现了与前一示例在HTML5中所实现的相同功能,但其实现方式更加令人印象深刻:

<meta charset="UTF-8"> 

这种简化了字符编码的doctype包含了需要浏览器编译的最少字符数。

另一处可以缩减字符数量的地方是<script>标签。常见的做法是为script元素添加type属性,属性值为“text / javascript”:

<script type="text/javascript" src="file.js"><script>

浏览器并不需要该属性。它们假定该脚本已用JavaScript编写。JavaScript是最流行的网页脚本语言(实际上,JavaScript也是唯一的一种网络脚本语言):

<script src="file.js"><script>

同样,不需要在每次链接到CSS文件时都指定一个值为 “text/ CSS” 的type属性:

<link rel="stylesheet" type="text/css" href="file.css">

只需简单地写为:

<link rel="stylesheet" href="file.css">

一些编程语言,如Python,以其特殊的方式编写说明。使用空格来缩进代码是强制性的,空格很重要。而其他编程语言,如JavaScript,却不在格式方面作任何要求,每一行开头是否空格并不那么重要。

如果与一些程序员同处一室并说出“重要的空格”之类的话,那么就会导致一整晚不断升温的激烈辩论。

关于空格重要性的辩论核心存在一个基本的哲学问题:汇编语言应该保持特定的汇编风格,还是编写者可以按自己喜欢的风格编写?

标记并不需要空格。如果想要在每次嵌套元素时都添加新的一行和缩进,则需要添加空格,但浏览器和校验器并不需要空格。这并不意味着标记对所有情况都适用。有些种类的标记遵循更为严格的编写风格。

在XHTML 1.0之前,使用大写还是小写来编写标签并不重要。是否引用属性也同样不那么重要。甚至对于某些元素来说,是否包含结束标记都不会造成任何影响。

XHTML 1.0强制执行XML的语法:所有标签都必须为小写,所有属性都必须加引号,所有元素都必须包含有结束标记。对于独立元素的特殊情况,例如br,以标记结束替换为以斜线<br />结束。

如果使用HTML5,那么任何格式的命令都可以,无论是大写、小写、带引号的、不带引号的、带有结束符号的和不带有结束符号的,使用哪种格式完全取决于程序员。

多年来,我一直在使用XHTML 1.0的doctype。这是因为我喜欢按照一种特定的样式编写程序,从而也比较喜欢W3C验证对固定样式的强制要求。现在,我正在使用的是HTML5,所以执行哪种编写样式可以由自己决定。

我可以理解为什么有些人不喜欢HTML5语法的随意性,因为这似乎是从最佳范例向后的退步。有些人甚至会说,HTML5对语法的宽松限制会导致不良标记。虽然我并不这样认为,但可以理解为什么这会成为一个备受关注的问题。因为这就好像是一种强制使用空格的汇编语言突然在编程原则上变得宽容起来。

就个人而言,我可以接受HTML5语法的随意性。但与此同时,我也强迫自己使用个人青睐的编写风格。不过,我更希望见到更多的、可以以一种特定风格测试标记的工具。在编程界,这些工具被称为lint工具,即标记可疑编码范例的程序。验证器检查的是doctype,而用于标记的lint工具却与之不同;这两者若可以结合为一种精益且介于两者之间的lint验证设备,那将会更好。

完成这样设备的网页设计师将会获得来自世界各地的人们永久的尊重和敬佩。

对于旧版本的HTML,从规范中移除先前存在的元素或属性的过程被称为废弃。网页设计师不应该使用、回顾甚至提及已废弃的元素。

HTML5中不含有被废弃的元素或属性,但却有大量过时的元素和属性。

“过时”与“废弃”在含义上有着微妙的区别。

由于HTML5的目的是向后兼容已有内容,因此其规范必须承认先前存在的元素,即使这些元素已不包含在HTML5中。这将使情况变得略显混乱,因为其规范还声称“编写人员请不要使用该元素”以及“浏览器应该以此方式呈现该元素”。如果一个元素被废弃,那么它不应在规范中被提到;但是由于该元素是过时的,为了照顾浏览器,它也被包含进来了。

除非正在开发一款浏览器,否则可以用对待废弃元素和属性的方式来对待过时的元素和属性,即不要在网页中使用它们。

如果坚持使用过时的元素或属性,那么文件将变得“不符合要求”。浏览器将执行一切行得通的程序,但其他网站可能会对此表示不满。

frameframesetnoframes元素都已经过时了。没有人会怀念它们。

acronym元素也已经过时了,因此导致了多年的讨论,这些时间本可以被用在更有意义的事情上。不要为acronym元素感到惋惜,使用abbr元素来代替它就可以了。首字母缩写(acronym)和缩写(abbreviation)的确有所不同—首字母缩写作为一个词发音,例如NATO和SCUBA,但请记住,所有的首字母缩写都属于缩写,但并不是所有的缩写都是首字母缩写。

HTML5中的显示元素,如fontbigcenterstrike都已经过时了。实际上,它们在多年前就已经过时了。而使用CSS属性,如font-sizetext-align,则更容易获得相同的显示效果。同样,显示元素的属性,如bgcolorcellspacingcellpaddingvalign也都已经过时了,使用CSS来代替这些属性就可以了。

并非所有的显示元素都已经过时,它们中的一些元素经过修改,已经被重新利用起来。

元素big已经过时了,但元素small却还没有。通过重新定义small的含义,这种显著的矛盾已经得到解决。small的含义不再是其字面意义,即“在小号字体下进行显示”。相反,其语义值变为法律术语、条款或附属细则以小号字体显示。

当然,十有八九,开发人员会以小号字体显示附属细则,但重点是该元素的字面意义已被取代。

元素b曾表示“用粗体显示”。现在,它被用来将一些文本“偏离正常的样式而不具有任何额外的重要性”。如果文本具有额外的重要性,那么使用该元素则更为合适。

元素i也不再意味着“倾斜”。它表示文本中“另一种的语气或情绪”。同样,该元素也不表达任何重要性或重点。如果需要强调,则要使用em元素。

这些变化听起来可能像是文字游戏。它们的确是文字游戏,但它们也有利于增强HTML5的设备独立性。如果仔细考虑“加粗”和“倾斜”,那么它们仅在视觉媒介(如屏幕或页面)中才能解释得通。通过消除这些元素定义中的视觉偏差,HTML5的规范可与非可视化用户代理(如屏幕阅读器)保持相关。这样做可以避免设计师的思维被禁锢在视觉显示环境之内。

HTML5对cite元素进行了重新定义。cite元素原来表示的是“对其他参考资料的引用”,但它现在的意思是“一部作品的标题”。通常,被引用的参考为作品的标题,例如一本书或一部电影,但其根源很可能是一个人。在HTML5之前,可以使用cite来标记这个人的名字。但现在,这种做法被明令禁止——关于向后兼容性仅仅讨论这么多。

对于这种修正的理由是:浏览器将<cite>标签之间的文本格式更改为斜体;作品的标题通常是斜体的;人名通常不是斜体。因此,cite元素不应该被用于标记人名。

但这是完全错误的。我赞成HTML5向浏览器学习,但这种情况属于主次颠倒。

幸运的是,验证器无法分辨起始<cite>标签和结束</cite>标签之间的文本是否是指向人的,所以没有什么能阻止网页设计师用一种合理的、向下兼容的方式来使用cite元素。

先前已有元素的变化仅仅是创造性的文字游戏,但HTML5对一个元素进行了更为有效的改造。

毫无疑问,a元素是HTML中最重要的元素。该元素将文本转换成超文本,相当于万维网的结缔组织。

a元素是一个内嵌元素。如果想要将一个标题或一个段落转化为超链接,则需使用多个a元素:

<h2><a href="/about">About me</a></h2><h2><a href="/about">About me</a></h2>
<p><a href="/about">Find out what makes me tick.</a><p>

在HTML5中,可以将多个元素封装在一个a元素中:

<a href="/about">
<h2>About me</h2>
<p>Find out what makes me tick.</p> 
</a>

唯一需要注意的是,不可以将一个a元素嵌套在另一个a元素中。

将多个元素包装在一个元素中,这看起来似乎是一个巨大的变化。而且,要想支持这种新的链接模式,大多数浏览器并不需要做很多工作。虽然这种标记直到现在才成为合法的,但大多数浏览器已经支持了这种新的模式。

这似乎有些违背常理:浏览器应该理所当然地执行已有的规范吗?事实上正相反,是最新的规范正在记录浏览器所执行的操作。

如果想要获取关于CSS的文档,需要查阅CSS 规范。如果寻找的是有关标记的文档,需要查阅HTML规范。但是,哪里可以查阅JavaScript API的文档,例如document.writeinnerHTMLwindow.hitory?JavaScript规范所涉及的全部是编程语言,因此无法获得任何与浏览器API有关的内容。

到现在为止,浏览器一直独立创建和执行JavaScript API并相互借鉴。HTML5对这些API的记录是一劳永逸的,因为这可以确保较好的兼容性。

在标记规范中包含JavaScript规范听起来可能有些奇怪,但要记住,HTML5是由Web Apps 1.0发展而来的。JavaScript是制作Web应用过程中不可缺少的一部分。

HTML5规范中的所有章节都致力于创建Web应用的新API,其中包含一个Undo-Manager——它使得浏览器能够跟踪文档变更。该规范中有一节介绍了如何使用缓存清单来创建离线Web应用。另外,该规范对拖放功能也进行了详细描述。

与往常一样,如果存在已有的实现,那么规范将在其基础上建立,而非将一切推倒重来。微软的IE浏览器在很多年前就已经包含了拖放API,这也是HTML5拖放的基础。遗憾的是,微软的API是有问题的。如果以前的基础并不适用,那么重新开始也不见得是坏主意。

HTML5中的API十分强大。它们完全超出了我的能力范畴,所以我将这些内容留给更优秀的开发人员来编写。这些API值得用一本单独的书来介绍。

与此同时,对于网页设计师来说,HTML5中仍存在许多新鲜事物。这些内容将在下一章进行说明。


Jeremy Keith是英国网页开发人员,目前居住于英国布莱顿,并在那里与网络顾问公司Clearleft合作。他曾写过两本书,即《DOM Scripting》和《Bulletproof Ajax》。Jeremy Keith的网上家园的网址为adactio.com,且其最新的项目为Huffduffer,即创建播客的一种服务。在工作之余,他还在Salter Cane乐队中演奏布祖基琴。他对此有极高的热情。


下文中所指的网页并非静态的图片网页。Photoshop和其他软件里的设计转化为标记和CSS时,编码器必须对设计师的目的进行猜测和设想。这个诠释过程是无误的——除非使用Dan Cederholm编辑器。Dan在为他人的设计进行编码时,会将所有的编码甚至设计师编辑错误的编码进行正确的编写。例如,Dan会无一例外的将设计师固有的Photoshop维度转化为灵活的、可编辑的且防弹的代码(事实上,“防弹网页设计”是Dan在教学时杜撰的一个词语)。

在Dan看来,灵活并不意味着马虎。细节决定一切。Dan不仅是一个才华横溢的前端开发工程师和用户倡导者,更是一个有自我理念的设计师。设计是他的梦想,他呕心沥血,甚至在dribble.com上发布了一种新的分享设计的方法。Dan生来就是做老师的料,也是个有趣的家伙。Dan说,为了帮助设计师提升设计水平,他会竭尽全力地帮助他们。

朋友们,这就是请Dan做我们(和你们)CSS3的学习向导的原因。他是聪颖、有经验、重视设计的向导,也是高级的网页标准极客。希望大家能乐在其中!

——Jeffrey Zeldman

A Book Apart创始人


Dan Cederholm是一位网页设计师、作家、丈夫和父亲,居住在马萨诸塞州的萨勒姆。他是设计工作室SimpleBits的创始人。作为标准网页设计领域公认的专家,Dan与MTV、Google、Yahoo、ESPN、 Fast Company、Blogger以及其他网站都进行过合作。

Dan是Dribbble的联合创始人兼设计师,Dribbble是一个设计师之间实时分享工作情况的社区。以前,他还联合创建了第一个葡萄酒爱好者的社交网络:Cork’d。

Dan编写过三本畅销书《Handcrafted CSS》(New Riders),《Bulletproof Web Design,Second Edition》(New Riders)和《Web Standards Solutions,Special Edition》(Friends of ED)。

他也会弹奏尤克里里琴,还是一名太空旅游的粉丝。


相关图书

HTML+CSS+JavaScript完全自学教程
HTML+CSS+JavaScript完全自学教程
零基础入门学习Web开发(HTML5 & CSS3)
零基础入门学习Web开发(HTML5 & CSS3)
HTML+CSS+JavaScript网页制作 从入门到精通
HTML+CSS+JavaScript网页制作 从入门到精通
HTML CSS JavaScript入门经典 第3版
HTML CSS JavaScript入门经典 第3版
从0到1:HTML5 Canvas动画开发
从0到1:HTML5 Canvas动画开发
从零开始:HTML5+CSS3快速入门教程
从零开始:HTML5+CSS3快速入门教程

相关文章

相关课程