深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）

深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）

【美】布拉德福(Bradford,A.)【美】海涅(Haine,P.)著

高京译

ISBN 978-7-121-20552-1

2013年6月出版

定价：59.00元

280页

16开

编辑推荐

本书讲解循序渐进，包括详细的基础概念和最佳实践。然后覆盖了核心HTML5技术，带你学习多媒体、交互性和改进的语义。每一章都以简单的内容开始，之后进入逐步复杂的示例。

在本书中，你会学习到：

•用新的语义标签改善代码

•不用插件在页面使用多媒体和交互性

•用HTML5元素和客户端校验创建出色的表单

•探索强大的配套API

内容提要

HTML5并不一定适用于所有网站，而是面向未来的网站！本书面向的读者是致力于创建有更好的多媒体、交互性和语义的网站的开发者和设计师。

本书介绍了HTML5里的新元素和它们的用法，包括不太常用的元素。书中也包含了巧妙的样式和脚本技巧，可以运用于你的网站。本书完全遵循技术标准和最新网站设计技术。

目录

关于作者xiv

关于技术审阅人xv

关于封面设计者xvi

致谢xvii

引言xix

第1章　起步：HTML5的演变1

1.1　HTML5 = HTML•HTML51

1.1.1　HTML5出现之前1

1.1.2　为什么XHTML 2.0消失了，而HTML5流行了2

1.1.3　WHATWG的理念2

1.1.4　HTML5的现状3

1.2　剖析HTML5文档4

1.3　HTML术语和概念5

1.3.1　元素6

1.3.2　属性6

1.3.3　文档模型7

1.4　HTML5的新特性9

1.4.1　向后兼容9

1.4.2　错误处理9

1.4.3　简化的doctype10

1.4.4　简化的字符编码11

1.4.5　新的内容模型类别12

1.4.6　新元素13

1.4.7　微数据13

1.4.8　内嵌MathML和SVG13

1.4.9　API14

1.4.10不再遵循SGML（又一次！）14

1.4.11废弃的特性14

1.5　XHTML消失了吗17

1.5.1　MIME类型的问题18

1.6　在HTML和XHTML之间选择18

1.7　浏览器支持情况19

1.8　浏览器开发工具20

小结21

 

第2章　各司其职的标签22

2.1　全局属性23

2.1.1　可访问性24

2.1.2　元数据（metadata）25

2.1.3　唯一标识26

2.1.4　可编辑性28

2.1.5　拼写检查28

2.1.6　隐藏元素28

2.1.7　拖曳29

2.1.8　样式29

2.1.9　文字方向29

2.1.10自定义数据30

2.2　内容模型类别30

2.3　根元素31

2.3.1　html元素的属性33

2.4　文档元数据和脚本元素33

2.4.1　网页信息：title和meta34

2.4.2　链接、样式和资源：base、link和style36

2.4.3　增加行为和后备内容：script.和noscript38

2.5　文档区块元素40

2.5.1　语义区块元素40

2.6　内容分组元素41

2.6.1　无法避免的段落：p42

2.6.2　打断内容：hr43

2.6.3　保持格式：pre43

2.6.4　引用文字：blockquote43

2.6.5　列表43

2.6.6　图表、照片、图示：figure和figcaption47

2.6.7　创建分块：div47

2.7　文本级语义元素48

2.8　表格数据元素49

2.8.1　表格基础50

2.8.2　添加表头51

2.8.3　增加说明：caption52

2.8.4　增加结构：thead、tfoot和tbody52

2.8.5　添加更多结构：colgroup和col54

2.9　表单元素56

2.10内嵌内容元素57

2.11交互元素59

2.11.1　显示更多：summary和details60

2.11.2　工具条：menu和command62

小结62

 

第3章　认识语义63

3.1　什么是语义，跟我有什么关系63

3.2　用大纲思考64

3.3　HTML5大纲算法65

3.4　用标题内容隐性地创建大纲66

3.5　用区块内容创建大纲67

3.5.1　提高大纲的语义68

3.6　头和尾70

3.6.1　使用hgroup71

3.6.2　格式化有地址的尾部71

3.6.3　确定头尾内容72

3.7　查看HTML5大纲73

3.8　div和span过时了吗74

3.9　案例学习：《城市新闻报》74

3.9.1　添加文本级语义76

3.10其他文本级元素84

3.10.1　作品标题：cite85

3.10.2　格式化计算机输入/输出：code、var、samp、kbd85

3.10.3　标记文本编辑：ins和del85

3.10.4　处理外来脚本85

小结87

 

第4章　精通表单88

4.1　表单元素复习88

4.1.1　分析表单元素89

4.1.2　表单元素属性90

4.2　获取输入91

4.2.1　最初的输入类型93

4.2.2　新输入类型98

4.3　校验和提交表单102

4.3.1　输入字段必填103

4.3.2　用按钮和图片提交表单103

4.4　其他常用input元素属性105

4.4.1　提供占位符文字105

4.4.2　字段只读106

4.4.3　autocomplete和autofocus106

4.4.4　使用数据列表107

4.5　其他表单控件108

4.5.1　菜单108

4.5.2　文本块111

4.5.3　显示进度112

4.5.4　显示度量112

4.5.5　显示计算的输出114

4.5.6　密钥生成器115

4.6　用fieldset和label添加结构115

4.7　完整的表单117

4.7.1　第一页：收集用户详情117

4.7.2　第二页：收集评论121

4.7.3　第三页：确认信息123

4.8　表单可用性124

4.8.1　各司其职的输入类型124

4.8.2　保持简洁124

4.8.3　别让我思考、别让我费力、别骗我125

4.8.4　记住互联网是全球的125

4.8.5　需要时提供后备方案125

小结126

 

第5章　多媒体：视频、音频和内嵌媒体127

5.1　一切的开始：img127

5.2　图像映射130

5.3　嵌入其他媒体132

5.3.1　embed元素132

5.3.2　object元素133

5.4　嵌入的HTML：iframe135

5.4.1　处理iframe元素里的内容136

5.4.2　新的iframe元素属性137

5.4.3　指向iframe138

5.5　视频139

5.5.1　视频格式139

5.5.2　版权问题140

5.5.3　处理视频源140

5.5.4　视频属性144

5.6　音频146

5.6.1　音频格式147

5.7　文字轨148

5.8　编码音频和视频149

5.9　最后一个重要元素150

小结150

 

第6章　CSS3151

6.1　当前状态：CSS2.1151

6.2　CSS3模块152

6.3　使用CSS153

6.3.1　附上样式表153

6.3.2　CSS样式规则155

6.3.3　基本的CSS选择器语法157

6.3.4　高级选择器161

6.3.5　高效使用选择器175

6.3.6　CSS盒模型176

6.4　背景和边框180

6.4.1　基本背景色和图片180

6.4.2　多重背景184

6.4.3　圆角185

6.4.4　阴影185

6.5　颜色186

6.5.1　屏幕上的颜色186

6.5.2　功能符语法188

6.5.3　色调、饱和度、亮度188

6.5.4　不透明度189

6.6　网页字体的编排设计190

6.6.1　网页字体190

6.6.2　多列192

6.6.3　文字特效192

6.6.4　字体的规则193

小结194

 

第7章　用户交互和HTML5 API195

7.1　使用本章的JavaScript195

7.1.1　操作DOM属性和方法196

7.1.2　控制台日志197

7.1.3　事件199

7.2　历史API200

7.2.1　非常简单的Ajax201

7.2.2　基于历史的Ajax203

7.3　构建自定义视频控制器205

7.4　2D Canvas API编程208

7.4.1　画布绘图211

7.4.2　画布状态215

7.4.3　画布的交互216

7.4.4　画布动画217

7.5　拖曳操作219

7.5.1　用拖曳排序列表225

小结227

 

第8章　前方的路228

8.1　移动互联网的挑战228

8.2　响应式设计229

8.2.1　viewport229

8.2.2　媒体查询231

8.3　离线应用缓存233

8.4　其他HTML5技术234

8.4.1　微数据234

8.4.2　撤销管理器API236

8.4.3　即将到来的CSS技术236

小结237

 

附录A　相关技术239

索引251

精彩节摘

译者序

互联网从诞生到繁荣的每个阶段，HTML这个简单而强大的标记语言都发挥着举足轻重的作用。从简单的新闻列表展示到复杂的在线表格应用，结合JavaScript、CSS，前端工程师用这些简单的标记创建出一个个改变人们生活的应用。

但遗憾的是，虽然应用广泛，很久以来HTML的很多特性并没有被正确地运用，技术细节和最佳实践也没有得到足够重视。互联网上充斥着大量劣质编码的HTML页面。这很大程度上是因为即使未经专业的学习，也可以很快地写出简单的HTML页面。如果长此以往使用不规范甚至错误的编码方式，最终甚至会影响互联网的发展。和其他编程语言一样，HTML也需要扎实的基本功才能驾驭。

本书作者深谙基础的重要，用了大量篇幅讲解一个个看似简单的概念，很多内容都给出了来龙去脉，有助于读者理解技术和标准产生的背景，并加入了翔实的参考引用。

现在使用最广泛的HTML 4.0.1标准已经十余年没有重要更新，对于构建复杂的网页应用也越来越显得力不从心。业界早已开始酝酿下一个HTML版本。HTML5标准最早在2004年就由WHATWG提出，经过多年的演变以及各个浏览器阵营的磨合，主流浏览器制造商都已经实现了主要的HTML5核心。特别是近年来移动互联网的兴起，给HTML5的普及带来了更有利的设备环境和难得的商业契机。如果说几年前HTML5还是一个美好的愿望的话，那么现在她已经触手可及了。

相信本书能帮助网页设计师和开发者打下一个HTML5的良好基础，但正如作者在最后一部分说的那样，虽然这里覆盖了很多必要的知识点，然而HTML5仍在不断发展中，现代浏览器也在飞速升级，移动互联网日新月异，只有紧跟这些变化，辅以扎实的基础，才是精通HTML5之道。

献给我的父母Harda和Stuart，是你们告诉我同样的暴风雨可能是由龙卷风，也可能是由疾风造成的。

—Anselm Bradford

作者简介

关于作者

Anselm Bradford是新西兰奥克兰大学（AUT）的数字媒体讲师。他的研究领域是交互性媒体、网页媒体和视觉沟通。他从1996年开始从事互联网相关的开发工作，当时他手写了自己的第一个网站。他的Twitter账号是@anselmbradford，偶尔也会在AnselmBradford.com发表博客文章。

Paul Haine是一个在伦敦工作的网页设计师，他的个人博客是joeblade.com。

 

关于技术审阅人

Jeffrey Sambells从事他喜爱的工作。他是个父亲、设计师、开发者、作家和企业家，还有更多其他的头衔。十多年前他开始在互联网上发表各种想法，并且这成为他热爱的事情——不断发现更多的可能性。他有创建流程用户体验的专业技能，总是站在技术（特别是移动设备）尖端。

你可以在这里找到他的有趣作品：http://jeffreysambells. com，或者在Twitter @iamamused上发现他正在进行的秘密作品。

 

关于封面设计者

Cornévan Dooren设计了本书的封面。在离开ED的朋友，进行Foundation系列的新设计后，他从事结合技术和有机体形式的设计工作，本书的封面就是其成果。

Corné小时候在任何东西上画画，然后开始探索多媒体世界，他并不止步于此。他的信念是“多媒体的极限是人的想象力”，这也促使他不断进步。

Corné为很多国际客户工作，为多媒体杂志编写评论，测试软件，从事多媒体研究，并且参与很多其他ED丛书的工作。可以通过他的网站联系他，或更多了解他：www.cornevandooren.com。

媒体评论

不要满足于一般的HTML。做个HTML5大师吧！本书将让你的标记语言更进一步。本书将帮助你成为熟练掌握最新标准方向的开发者。这里有巧妙的技巧，可以用于你的网站。

书中介绍了HTML5的新元素，包括不常用的元素，告诉你使用它们的场合和方法。本书结合大量的实际建议和例子，提供让你成为HTML5大师所需的知识——

•HTML5立即上手

•使用正确的标签

•精通HTML5表单

•控制HTML5的音频和视频

•创建最佳品质的用户交互

•结合CSS3和HTML5，掌握最新标准

前言

致谢

就像生活中的所有事情一样，这本书的准备工作在出版之前很久就开始了。回顾过去，我想我是从两条道路走向了这本书的写作。首先是知识的积累，然后是跟出版社沟通的过程到最终形成本书。

在第一条道路上，我得益于自己生命历程中的很多人，他们让我可以发展自己的网页开发技能。虽然还可以追溯到更久以前，但是我对互联网的兴趣首先是在Vermont的少年时期开始的。1996年，我为Rainbow Organic Fiber Mill，在North Bennington的一个由Bryant Rayngay创立的有机棉面料公司开发了一个网站。虽然一直没有上线，但这是我第一次从头手写一个网站，我的兴趣从此埋下了种子。在以后的几年里，我的技能得到了提高（特别是在Atlantic大学的网络管理员Sean Murphy的帮助下）。我非常感谢Sean，他让我在大学期间有很多机会，并自由地作为网站http://coa.edu的助理管理员学习和发展技能，并最终能够在很多年里负责设计和开发这个网站。还要感谢Jared Vorkavich和Taeil Kim，他们给了我在研究生阶段发展视觉设计、交互和网页开发技能的空间。还有更多直接和间接的人，为我创造了学习的道路，使我积累了今天的知识。

通往这本书的另一条道路开始于我失去了一本书的技术编辑工作机会。我和我的朋友Eric Kramer都申请了这份工作，但他得到了这个职位。而当这个项目开始后，又需要另一名编辑，然后Eric推荐我加入项目。这是Rich Shupe为O’Reilly Media写的一本书，从那本书后，我又编辑了两本Rich的书，他要求我作为审阅者。感谢Eric和Rich，因为没有他们的话，我可能不会那么多地参与出版工作。通过仔细地审阅技术书籍和观察一本书的制作过程，我相信自己也可以写作。这些项目给我带来了Peachpit Press的书籍编辑工作，最后得到了对我很重要的Apress的工作机会。

感谢ED的朋友Ben Renow-Clarke，是他启动了这本书，还有Jennifer Blackwell和其他Apress团队人员的耐心和对本书的指导。感谢我的技术审阅员Jeffrey Sambells，你的查错能力给了我惊喜。还要感谢Paul Haine的著作HTML Mastery为本书奠定了基础。

感谢我在AUT大学的同事，他们为我创造了提高网页技术和写作的机会。特别感谢Gudrun Frommherz帮我调整了课程表，使我有更多时间写作，还有Abhi Kala，在我写作的很多夜晚都管理着数字媒体部门（也感谢Abhi为我拍了本书的作者照）。还要感谢WHATWG IRC频道的人员，感谢他们在我对HTML标准的一些内容产生疑惑时给予帮助。

特别感谢Whitney Traylor在我开始写书后忍受我分散的注意力和精力。最后感谢我的弟弟Orson，他总是对谈论和分享网页开发知识充满热情和兴趣。

Anselm Bradford

 

引言

除非你一直离开这个数字时代外出度假，否则肯定听到过很多关于HTML5的议论。作为一个互联网从业人员，很显然理解HTML5已经不是加分技能，而是必备技能了。过去几年来互联网的课程从XHTML到HTML5发生了根本性的变化，这带来了新的概念需要学习，也要摒弃过时的编程实践。

有时HTML5涵盖的内容可能看起来神秘又模糊，分解HTML5的定义可能会有很多方向。本书会详细地覆盖HTML5的状况，并让你在技术上打下一个坚实的基础。在深入细节之前会简要介绍基础概念，重点在于打下HTML的基础。例如在表单、多媒体和提升了的网站语义化方面有很多新元素和属性。同时也有很多元素和属性被废弃了，作为一个专业的开发者，你应该绝对不再使用它们了（是吧？）。我们用清晰简单的摘要来展示当前HTML元素的正确用法。CSS和JavaScript这两个主题，会通过它们各自和HTML的关系来讨论和研究。

另外，为了介绍更进一步的理论和实践知识，数字颜色值、媒体格式、响应式设计，甚至是三角学这些内容都会介绍。

虽然HTML5还要经过多年才能成熟，但你会发现它已经为很多下一代网页应用打下了基础——可能就是你开发的网页应用呢！

 

本书面向的读者

本书面向任何熟悉HTML、CSS和JavaScript，并有兴趣深入理解这些标准的读者。HTML5标准非常庞大。本书的介绍将带你快速入门，是你学习更高级HTML知识的“跳板”。

虽然HTML、CSS和JavaScript看似熟悉、简单，但是你一定会发现带来惊喜的新内容。学习这些细节知识对于掌握HTML5有莫大作用。读完本书后，你会拥有基础知识和能力去探索更加高级的现代网页开发技术。

本书的结构

本书首先讨论让HTML5变成今天最炙手可热的开发技术的出奇复杂的历史。针对新接触HTML的读者，在进入HTML5的亮点和自HTML 4.0.1之后的变化之前，我们会先介绍HTML5的基本术语。在HTML5状况的概要之后，接下来的章节深入到具体的领域，详细地介绍HTML元素和相关技术。

本书的前三分之一部分会帮你了解HTML5的特性，打下扎实的基础，有助你为今天的互联网组织、开发更好的网页。在第2章，你会学到所有元素都拥有的全局属性和HTML5的新内容模型类别，它用于将HTML元素分为一系列重叠的分组。有两章内容用来深入讨论这些元素。语义化地构建页面给予了特别的关注。在广泛理解了所有HTML元素后，本书的第二个三分之一部分深入网页表单元素，在它之后是内嵌媒体。

本书最后的三分之一部分包括跟HTML紧密结合使用但是跟HTML元素分离的概念。从第6章开始，讨论HTML和CSS3的关系。会介绍CSS的基本概念，并通过实例展示CSS3的主要特性。之后介绍HTML5 JavaScript. API的概念。我们会创建一个简单模板来研究JavaScript，并结合例子演示。本书以移动设备网页开发收尾，最后是正在发展的HTML5技术的摘要。并且全书的最后是通常跟HTML5一起使用（比如地理位置API），但并不属于HTML5的技术概要。

本书可以从头到尾阅读，或者放在你的计算机旁作为元素和概念的参考手册。要充分利用本书，我推荐（WHATWG）HTML标准的要诀，在谈到应该怎样阅读文档才最有效时，是这样说的：

“应该从头到尾读多遍。然后，至少从后往前读一遍。之后从目录随机选取，并按照交叉引用阅读。”

 

最后，本书的网站http://html5mastery.com上有相关信息和链接。

本书的约定

本书有一些约定值得注意：

除非注明，否则HTML5和HTML指HTML语言最新的实现。

现代浏览器指Google Chrome 11、Mozilla Firefox 4、Safari 5、Opera 11、Microsoft Internet Explorer 9或者它们更新的版本。

说到单独的HTML元素时，可以加上“元素”，也可以不加，例如pre和pre元素，都指HTML代码的<pre>。

除非注明或暗指，否则假设本书所有的HTML例子都包含在合法HTML5文档的body里。

除非注明或暗指，任何CSS和JavaScript代码都假设在一个外部样式表或脚本文件里。

包含在更大的代码段里的片段可能会包括省略号（...），代表在片段前后有未显示内容。例如：

最后，需要注意的是JavaScript示例里创建的全局变量和函数是为了代码的简化和清晰。大部分情况下这是可行的，但是对于专业的最佳实践，JavaScript变量和函数的作用范围经常需要处于一个自定义对象里，以避免不同脚本间的命名冲突。

结束了这些例行介绍，让我们开始HTML5之旅吧。