[图灵程序设计丛书].HTML5秘籍.第2版【电子版】 ([美] Matthew MacDonald) (z-library.sk, 1lib.sk, z-lib.sk)

图灵社区的电子书没有采用专有客 户端，您可以在任意设备上，用自 己喜欢的浏览器和PDF阅读器进行 阅读。 但您购买的电子书仅供您个人使 用，未经授权，不得进行传播。 我们愿意相信读者具有这样的良知 和觉悟，与我们共同保护知识产 权。 如果购买者有侵权行为，我们可能 对该用户实施包括但不限于关闭该 帐号等维权措施，并可能追究法律 责任。 数字版权声明

内 容 提 要 本书共包括四个部分，共 13 章。第一部分介绍了 HTML5 的发展历程，用语义元素构造网页，编写更 有意义的标记，以及构建更好的 Web 表单。第二部分介绍了 HTML5 中的音频与视频、CSS3、Canvas 绘图 技术等内容。第三部分介绍了数据存储、离线应用、与 Web 服务器通信，以及 HTML5 与 JavaScript 技术的 强大结合等内容。第四部分为附录，简单介绍了 CSS 和 JavaScript。 本书既适合新手学习，也能助有经验的 Web 开发人员解决日常工作中遇到的难题。 定价：89.00元 读者服务热线：(010)51095186转600　印装质量热线：(010)81055316 反盗版热线：(010)81055315 广告经营许可证：京崇工商广字第 0021 号 著　　　　[美] Matthew MacDonald 译　　　　李松峰　朱　巍　刘　帅 责任编辑　岳新欣 责任印制　杨林杰 人民邮电出版社出版发行　　北京市丰台区成寿寺路11号 邮编　100164　　电子邮件　315@ptpress.com.cn 网址　http://www.ptpress.com.cn 北京　　　　印刷 开本：800×1000　1/16 印张：26.25 字数：620千字 2015年 4 月第 2 版 印数：1 — 3 000册 2015年 4 月北京第 1 次印刷 著作权合同登记号 图字：01-2014-6468号 ◆ ◆ ◆

版 权 声 明 ©2014 by Matthew MacDonald. Simplified Chinese Edition, jointly published by O’Reilly Media, Inc. and Posts & Telecom Press, 2015. Authorized translation of the English edition, 2014 O’Reilly Media, Inc., the owner of all rights to publish and sell the same. All rights reserved including the rights of reproduction in whole or in part in any form. 英文原版由O’Reilly Media, Inc.出版，2014。 简体中文版由人民邮电出版社出版，2015。英文原版的翻译得到 O’Reilly Media, Inc.的授权。 此简体中文版的出版和销售得到出版权和销售权的所有者——O’Reilly Media, Inc.的许可。 版权所有，未得书面许可，本书的任何部分和全部不得以任何形式重制。

O’Reilly Media 通过图书、杂志、在线服务、调查研究和会议等方式传播创新知识。 自 1978 年开始，O’Reilly 一直都是前沿发展的见证者和推动者。超级极客们正在开创 着未来，而我们关注真正重要的技术趋势——通过放大那些“细微的信号”来刺激社 会对新科技的应用。作为技术社区中活跃的参与者，O’Reilly 的发展充满了对创新的 倡导、创造和发扬光大。 O’Reilly 为软件开发人员带来革命性的“动物书”；创建第一个商业网站（GNN）；组 织了影响深远的开放源代码峰会，以至于开源软件运动以此命名；创立了 Make 杂志， 从而成为 DIY 革命的主要先锋；公司一如既往地通过多种形式缔结信息与人的纽带。 O’Reilly 的会议和峰会集聚了众多超级极客和高瞻远瞩的商业领袖，共同描绘出开创 新产业的革命性思想。作为技术人士获取信息的选择，O’Reilly 现在还将先锋专家的 知识传递给普通的计算机用户。无论是通过书籍出版，在线服务或者面授课程，每一 项 O’Reilly 的产品都反映了公司不可动摇的理念——信息是激发创新的力量。 业界评论 “O’Reilly Radar 博客有口皆碑。” ——Wired “O’Reilly 凭借一系列（真希望当初我也想到了）非凡想法建立了数百万美元的业务。” ——Business 2.0 “O’Reilly Conference 是聚集关键思想领袖的绝对典范。” ——CRN “一本 O’Reilly 的书就代表一个有用、有前途、需要学习的主题。” ——Irish Times “Tim 是位特立独行的商人，他不光放眼于最长远、最广阔的视野并且切实地按照 Yogi Berra 的建议去做了：‘如果你在路上遇到岔路口，走小路（岔路）。’回顾过去 Tim 似乎每一次都选择了小路，而且有几次都是一闪即逝的机会，尽管大路也不错。” ——Linux Journal O’Reilly Media, Inc.介绍

v 目 录 前言.......................................................................... ix 第一部分 现代标记 第 1 章 HTML5 简介.......................................... 2 1.1 HTML5 的故事 ............................................ 2 1.1.1 XHTML 1.0：更严格的标准........... 2 1.1.2 XHTML 2：意想不到的失败.......... 3 1.1.3 HTML5：起死回生 ......................... 3 1.1.4 HTML：活着的语言 ....................... 5 1.2 HTML5 的三个主要原理............................. 6 1.2.1 不破坏 Web ...................................... 6 1.2.2 修补牛蹄子路................................... 7 1.2.3 实用至上 .......................................... 7 1.3 HTML5 标记初体验 .................................... 8 1.3.1 HTML5 文档类型............................. 9 1.3.2 字符编码 ........................................ 11 1.3.3 页面语言 ........................................ 11 1.3.4 添加样式表..................................... 11 1.3.5 添加 JavaScript ............................... 12 1.3.6 最终结果 ........................................ 13 1.4 HTML5 语法 .............................................. 13 1.4.1 放松的规则..................................... 13 1.4.2 HTML5 验证 .................................. 14 1.4.3 XHTML 的回归.............................. 16 1.5 HTML5 元素家族 ...................................... 17 1.5.1 新增的元素..................................... 18 1.5.2 删除的元素..................................... 18 1.5.3 改变的元素..................................... 19 1.5.4 调整的元素..................................... 20 1.5.5 标准化的元素................................. 21 1.6 今天开始用 HTML5 .................................. 21 1.6.1 了解浏览器支持情况..................... 23 1.6.2 浏览器装机情况统计..................... 24 1.6.3 通过 Modernizr 检测功能 .............. 25 1.6.4 使用“腻子脚本”填补功能 缺陷 ................................................ 28 第 2 章 用语义元素构造网页 ........................ 30 2.1 语义元素 .................................................... 30 2.2 改造传统的 HTML 页面............................ 32 2.2.1 构造页面的老办法......................... 32 2.2.2 使用 HTML5 构造页面.................. 35 2.2.3 用<figure>添加插图...................... 38 2.2.4 用<aside>添加附注 ....................... 40 2.3 浏览器对语义元素的支持情况................. 42 2.3.1 为语义元素添加样式..................... 43 2.3.2 使用 HTML5“垫片” .................. 43 2.3.3 Modernizr：一站式解决方案 ........ 44 2.4 使用语义元素设计站点............................. 44 2.4.1 理解<header> ................................. 45 2.4.2 用<nav>标注导航链接 ................... 47 2.4.3 理解区块 ........................................ 51 2.4.4 理解<footer> ................................. 51 2.4.5 使用<main>标识主要内容.............. 54 2.5 HTML5 纲要 .............................................. 55 2.5.1 如何查看纲要................................. 55 2.5.2 基本纲要 ........................................ 56 2.5.3 分块元素 ........................................ 58 2.5.4 解决一个纲要问题......................... 60 第 3 章 编写更有意义的标记 ........................ 64 3.1 回顾语义元素 ............................................ 64 3.1.1 使用<time>标注日期和时间.......... 65 3.1.2 使用<output>标注 JavaScript 返回值 ............................................ 67

vi ｜ 目 录 3.1.3 使用<mark>标注突显文本.............. 68 3.2 其他语义标准 ............................................ 70 3.2.1 ARIA............................................... 70 3.2.2 RDFa............................................... 71 3.2.3 微格式 ............................................ 71 3.2.4 微数据 ............................................ 72 3.3 实例：改进“About Me”页面 ................ 75 3.4 搜索引擎如何使用元数据......................... 79 3.4.1 Google Rich Snippets...................... 79 3.4.2 增强搜索结果................................. 80 3.4.3 食谱搜索引擎................................. 84 第 4 章 构建更好的 Web 表单 ...................... 87 4.1 理解表单 .................................................... 87 4.2 传统表单翻新 ............................................ 89 4.2.1 通过占位符文本添加提示 ............. 92 4.2.2 焦点：挑选正确的起点................. 94 4.3 验证：阻止错误 ........................................ 94 4.3.1 HTML5 验证的原理....................... 95 4.3.2 关闭验证 ........................................ 96 4.3.3 验证样式挂钩................................. 97 4.3.4 使用正则表达式............................. 98 4.3.5 自定义验证..................................... 99 4.4 浏览器对 Web 表单和验证的支持.......... 101 4.4.1 用 Modernizr 检测支持情况 ........ 101 4.4.2 用 HTML5Forms 兼容 ................. 102 4.5 新的输入控件 .......................................... 104 4.5.1 电子邮件地址............................... 106 4.5.2 网址 .............................................. 106 4.5.3 搜索框 .......................................... 107 4.5.4 电话号码 ...................................... 107 4.5.5 数值 .............................................. 107 4.5.6 滑动条 .......................................... 108 4.5.7 日期和时间................................... 108 4.5.8 颜色 .............................................. 110 4.6 新元素 ...................................................... 110 4.6.1 使用<datalist>显示输入建议 .... 110 4.6.2 进度条和计量条........................... 113 4.6.3 使用<command>和<menu>创建 工具条和菜单 .............................. 115 4.7 网页中的 HTML 编辑器.......................... 115 4.7.1 使用 contenteditable编辑 元素 .............................................. 115 4.7.2 使用 designMode编辑页面 ......... 117 第二部分 视频、图形和特效 第 5 章 音频与视频........................................ 122 5.1 网络视频的演变 ...................................... 122 5.2 HTML5 音频与视频 ................................ 123 5.2.1 使用<audio>播放点噪音.............. 124 5.2.2 预加载媒体文件........................... 125 5.2.3 自动播放 ...................................... 125 5.2.4 循环播放 ...................................... 126 5.2.5 了解<video> ................................. 126 5.3 HTML5 媒体格式 .................................... 128 5.3.1 谈谈格式 ...................................... 128 5.3.2 浏览器对媒体格式的支持 情况 .............................................. 130 5.4 后备措施：如何讨好每一款浏览器 ....... 131 5.4.1 支持多种格式............................... 132 5.4.2 添加 Flash 后备措施 .................... 134 5.5 使用 JavaScript 控制播放器 .................... 137 5.5.1 添加音效 ...................................... 137 5.5.2 创建自定义视频播放器............... 140 5.5.3 JavaScript 媒体播放器 ................. 142 5.6 视频字幕 .................................................. 144 5.6.1 标记时间的文本轨道和 WebVTT....................................... 145 5.6.2 使用<track>添加字幕.................. 146 5.6.3 浏览器对视频字幕的支持 情况 .............................................. 148 第 6 章 美妙的 CSS3 字体和特效 ............. 149 6.1 使用 CSS3 ................................................ 149 6.1.1 选择一：用能用的....................... 150 6.1.2 选择二：将 CSS 功能作为 增强 .............................................. 150 6.1.3 选择三：Modernizr...................... 151 6.1.4 有开发商前缀的特定于浏览器 的样式 .......................................... 154 6.2 多变的盒子 .............................................. 156 6.2.1 透明 .............................................. 157

目 录 ｜ vii 6.2.2 圆角 .............................................. 158 6.2.3 背景 .............................................. 159 6.2.4 阴影 .............................................. 160 6.2.5 渐变 .............................................. 162 6.3 创建过渡效果 .......................................... 165 6.3.1 基本的颜色过渡........................... 166 6.3.2 更多的过渡思路........................... 168 6.3.3 用 JavaScript 触发过渡 ................ 168 6.3.4 变换 .............................................. 170 6.3.5 使用变换的过渡........................... 173 6.4 Web 字体 .................................................. 174 6.4.1 Web 字体格式 .............................. 176 6.4.2 给网站找个字体........................... 177 6.4.3 从 Font Squirrel 获取免费字体 .... 177 6.4.4 准备一个网络字体....................... 179 6.4.5 用谷歌更简单地使用 Web 字体 .............................................. 181 6.4.6 多栏文本 ...................................... 184 第 7 章 CSS3 与响应式 Web 设计 ............ 187 7.1 响应式设计基础....................................... 187 7.1.1 流式布局 ...................................... 187 7.1.2 流式图片 ...................................... 191 7.1.3 流式排版 ...................................... 192 7.1.4 理解视口 ...................................... 195 7.2 使用媒体查询适配布局........................... 196 7.2.1 媒体查询 ...................................... 197 7.2.2 创建简单的媒体查询................... 198 7.2.3 构建移动设备友好的布局 ........... 199 7.2.4 媒体查询的高级条件................... 202 7.2.5 替换整个样式表........................... 204 7.2.6 识别特定的移动设备................... 205 第 8 章 基本 Canvas 绘图 ........................... 207 8.1 Canvas 起步 .............................................. 207 8.1.1 画直线 .......................................... 210 8.1.2 路径与形状................................... 212 8.1.3 绘制曲线 ...................................... 214 8.1.4 变换 .............................................. 217 8.1.5 透明度 .......................................... 220 8.1.6 合成操作 ...................................... 221 8.2 构建基本的画图程序............................... 223 8.2.1 准备工作 ...................................... 224 8.2.2 在画布上绘图............................... 225 8.2.3 将画布保存为图像....................... 226 8.3 浏览器对 Canvas 的支持情况 ................. 229 8.3.1 用 ExplorerCanvas兼容 Canvas.... 230 8.3.2 用 FlashCanvas 兼容 Canvas........ 230 8.3.3 Canvas 后备及功能检测 .............. 231 第 9 章 高级 Canvas 技术：交互性和 动画 ..................................................... 233 9.1 高级 Canvas 绘图 ..................................... 233 9.1.1 绘制图像 ...................................... 233 9.1.2 裁剪、切割和伸缩图片............... 235 9.1.3 绘制文本 ...................................... 237 9.2 阴影与填充 .............................................. 238 9.2.1 添加阴影 ...................................... 238 9.2.2 填充图案 ...................................... 240 9.2.3 填充渐变 ...................................... 241 9.2.4 综合示例：绘制图解................... 245 9.3 赋予图形交互能力................................... 249 9.3.1 记录绘制的内容........................... 249 9.3.2 基于坐标的碰撞检测................... 252 9.4 给 Canvas 添加动画 ................................. 254 9.4.1 基本的动画................................... 255 9.4.2 多物体动画................................... 256 9.5 实例：迷宫游戏 ...................................... 260 9.5.1 布置迷宫 ...................................... 261 9.5.2 让笑脸动起来............................... 263 9.5.3 基于像素颜色的碰撞检测 ........... 265 第三部分 构建 Web 应用 第 10 章 数据存储.......................................... 270 10.1 Web 存储简介 ........................................ 270 10.1.1 存储数据................................... 272 10.1.2 实战：保存游戏中的最后 位置 .......................................... 274 10.1.3 浏览器对 Web 存储的支持 情况 .......................................... 275 10.2 深入 Web 存储 ....................................... 276 10.2.1 删除数据项............................... 276 10.2.2 查找所有数据项....................... 276

viii ｜ 目 录 10.2.3 保存数值和日期....................... 277 10.2.4 保存对象................................... 278 10.2.5 响应存储变化........................... 279 10.3 读取文件 ................................................ 281 10.3.1 取得文件................................... 282 10.3.2 用<input>读取文本文件.......... 282 10.3.3 替换标准的上传控件............... 284 10.3.4 一次读取多个文件................... 285 10.3.5 通过拖曳读取图片文件 ........... 285 10.3.6 浏览器对 File API 的支持 情况 .......................................... 288 10.4 IndexDB：浏览器的数据库引擎 .......... 288 10.4.1 数据对象................................... 290 10.4.2 创建并连接数据库................... 291 10.4.3 在数据库中保存数据............... 293 10.4.4 在数据表中查询所有数据 ....... 295 10.4.5 查询单条数据........................... 297 10.4.6 删除一条数据........................... 298 10.4.7 浏览器对 IndexedDB 的支持 情况 .......................................... 299 第 11 章 离线应用 .......................................... 300 11.1 通过描述文件缓存资源......................... 301 11.1.1 创建描述文件........................... 302 11.1.2 使用描述文件........................... 303 11.1.3 把描述文件放到 Web 服务 器 .............................................. 304 11.1.4 更新描述文件........................... 306 11.1.5 浏览器对离线应用的支持 情况 .......................................... 308 11.2 实用缓存技术 ........................................ 309 11.2.1 访问未缓存的文件................... 309 11.2.2 添加后备内容........................... 310 11.2.3 检测连接................................... 312 11.2.4 用 JavaScript 监听更新 ............ 313 第 12 章 与 Web 服务器通信 ...................... 317 12.1 向 Web 服务器发送消息 ....................... 317 12.1.1 XMLHttpRequest对象 ............... 318 12.1.2 向 Web 服务器提问 ................. 319 12.1.3 取得新内容............................... 323 12.2 服务器发送事件..................................... 326 12.2.1 消息格式 .................................. 327 12.2.2 通过服务器脚本发送消息 ....... 328 12.2.3 在网页中处理消息................... 330 12.2.4 轮询服务器端事件................... 331 12.3 Web Socket ............................................. 333 12.3.1 Web Socket 服务器 .................. 333 12.3.2 简单的 Web Socket 客户端...... 334 12.3.3 使用现成的 Web Socket 服务器...................................... 335 第 13 章 地理定位、Web Worker 和 历史管理 ......................................... 339 13.1 地理定位 ................................................ 339 13.1.1 地理定位的基本原理............... 340 13.1.2 查找访客的坐标....................... 342 13.1.3 处理错误 .................................. 344 13.1.4 设置地理定位选项................... 345 13.1.5 显示地图 .................................. 346 13.1.6 跟踪访客移动........................... 349 13.1.7 浏览器对地理定位的兼容 情况 .......................................... 349 13.2 Web Worker............................................ 350 13.2.1 费时的任务............................... 351 13.2.2 把任务放在后台....................... 353 13.2.3 处理 Worker 错误..................... 356 13.2.4 取消后台任务........................... 356 13.2.5 传递复杂消息........................... 357 13.2.6 浏览器对 Web Worker 的 兼容情况 .................................. 359 13.3 历史管理 ................................................ 360 13.3.1 URL 问题.................................. 361 13.3.2 以往的解决方案：hashbang URL .......................................... 362 13.3.3 HTML5 的方案：会话历史..... 363 13.3.4 浏览器对会话历史的支持 情况 .......................................... 366 第四部分 附 录 附录 A CSS 基础 ........................................... 368 附录 B JavaScript：页面的大脑 ............... 381

ix 前 言 乍一看，你可能觉得HTML5是网页编写语言HTML的第5个版本。但实际上，这背后的故事 可乱得多。 HTML5是一个叛逆。它是由一群自由思想者组成的团队设计出来的，这个团队的成员并不 负责制定官方HTML标准。它允许使用10年前就被禁止的网页编写方式。它费尽心机、苦口婆心 地告诉浏览器开发商怎么处理而不是彻底拒绝标记中的错误。它最终实现了不依赖Flash等浏览器 插件播放视频。而且它引入了一大批JavaScript驱动的功能，让网页可以像传统桌面软件那样丰富 多彩、富有交互能力。 理解HTML5可没有那么简单。最主要的困难在于人们用HTML5这个词指代十几种甚至更多 独立的标准。（后面我们会介绍到，这是HTML5发展演进的结果。一开始时它只有一个标准，但 后来就拆分成了很多容易管理的分支。）事实上，HTML5现在代表的是“HTML5及所有相关标 准”，甚至还可以更宽泛，代表“下一代网页编写技术”。这就是本书要带领大家探索的HTML5： 既包括HTML5核心语言，也包括与HTML5纠缠在一块但在其标准中永远找不到的那些新功能。 于是，第二个困难又摆在了你的面前：浏览器支持。不同的浏览器支持HTML5的程度不同。 最差劲的是IE8，它对HTML5的支持非常有限，目前每20台能上网的电脑中就有1台安装着IE8（至 少本书写作时是这个比例，后面1.6.2节会介绍怎么查到浏览器装机统计信息）。好在我们有办法 弥补浏览器支持上的缺陷，但有的办法简单，有的办法也不讨人喜欢。根据在今天的网页中使用 HTML5的需求，本书对这两种方法都会适当介绍。 抛开这些困难，有一个事实毫无争议：HTML5代表未来。苹果、谷歌和微软等大软件公司 都在鼎力支持它；W3C（World Wide Web Consortium，万维网联盟）已经放弃了XHTML，从而 使HTML5成为正式标准并得到认可。如果你在看这本书，那么也可能加入HTML5阵营，并利用 它创造出如图0-1所示的那种酷炫的网页。 阅读本书的条件 本书介绍的HTML5是HTML标准最新最好的版本。虽然不一定非得是标记大师才能看懂这本 书，但阅读本书的的确确还是需要一些Web设计经验的。以下就是几个必要条件。  写过网页。本书假设你以前至少写过一些网页（或者至少知道怎么使用HTML元素把内容 分成标题、段落和列表，等等）。如果你刚刚接触Web设计，那最好是先找一本合适的入

x ｜ 前 言 门书看一看，比如我的Creating a Website: The Missing Manual, Third Edition。（不过别担 心，你不会被限制在过去的技术中，这本书里的示例都是有效的HTML5文档。） 图0-1：在Web世界黑暗的过去， 要编写网页游戏，必须依赖Flash 这样的浏览器插件。但有了 HTML5的新功能——包括canvas （图中显示的就是）之后，你可以 使 用 可 靠 而 又 免 插 件 的 JavaScript。这个图展示的是用 HTML5技术开发的迷宫游戏（第 9章将详细讨论）  懂样式表。没有CSS（Cascading Style Sheet，层叠样式表）就没如今的网站。CSS为页面 提供布局和格式。要想顺利阅读本书，你应该知道样式表的基本知识，包括怎么创建样 式表，里面都有什么，以及怎么把它应用到网页上。如果你不太清楚CSS是干什么的，可 以先看一看附录A。如果你需要更多帮助，或者想提高自己的CSS技能，以便真正做出漂 亮的布局和样式，建议你看看David Sawyer McFarland的CSS3: The Missing Manual （O’Reilly）。  懂JavaScript。当然，编写HTML5页面用不着JavaScript。可是，如果你想使用HTML5不 计其数的强大功能——比如在画布上画图或者与Web服务器通信，那就需要JavaScript了。 如果你有一些浅显的编程经验，但对JavaScript还一知半解，附录B可以帮你掌握一些新情 况。不过，要是一听到写代码这几个字，马上就像被窝里爬进一条蟒蛇那样魂飞魄散，那 要么你根本不必看本书中的很多章节了，要么你得通过David Sawyer McFarland的 JavaScript & jQuery: The Missing Manual （O’Reilly）补补课。 如果这些必要条件让你头晕目眩——好吧，这就是活在Web设计最前沿必须付出的代价。

前 言 ｜ xi 编写 HTML5 编写HTML5页面可以使用编写HTML页面时使用的软件。可以是个再简单不过的文本编辑 器，像Windows中的记事本，或者Mac中的TextEdit。目前也有很多设计工具（比如Adobe Dreamweaver和Microsoft Visual Studio）提供了快速创建新HTML5文档的模板。不过，HTML5页 面的基本结构确实非常简单，任何网页编辑软件（即使不是为HTML5设计的）都没有问题。 注意 当然啦，不管你上网和编写网页时用的计算机是Windows PC，还是最新的MacBook Pro， 同样也无所谓，因为HTML5与操作系统无关。 查看 HTML5 现在，任何浏览器的最新版本都能支持大多数的HTML5功能，包括那些在苹果和Android设 备上运行的移动版浏览器。只要你的浏览器是最新的，HTML5就可以出色地运行，因此就可以 用来测试本书中的示例。 目前，还没有一款浏览器巨细靡遗地支持HTML5的所有功能，HTML5本身就是一大批互相 关联的标准也是其中一个原因。谷歌Chrome在对HTML5的支持方面通常处于领跑地位，Firefox 和Opera紧追不舍，Safari也尾随其后，IE的差距则一直很大。老版本IE是真正的老大难问题，这 些IE不能升级，主要是因为它们都运行在Windows Vista或Windows XP这样老掉牙的操作系统上 （这两个操作系统仍然跑在世界1/5的台式机中）。1.6节会更全面地探讨这个问题，并给出应对建议。 什么时候可以使用 HTML5 简短的答案是“现在”。就连遭人唾弃的IE6，这个问世长达10年之久、补丁撂补丁的家伙都 可以显示基本的HTML5文档。这是因为创建HTML5标准时，就想让它能涵盖并扩展原来的 HTML。 更详尽的答案是“视情况而定”。前面刚刚提到过，HTML5是一组不同标准的集合，浏览器 对这些标准有着不同程度的支持。因此，尽管现在任何Web开发人员都可以转而编写HTML5文档 （谷歌、YouTube和Wikipedia等很多大型网站已经这样做了），但要放心地使用HTML5的全部新奇 功能——至少不必针对那些不够开化的浏览器采取变通手段，恐怕还要再过一些时日。 注意 在告诉读者使用某项HTML5新功能之前，我们会明确指出该功能得到了哪些浏览器的支 持。当然，浏览器版本变化得比较快，如果你担心使用某功能会有问题，最好还是随时 查阅某些资料。在此，推荐大家使用http://caniuse.com，通过这个网站可以查到任何一项 功能，以及哪个浏览器的哪个版本支持它。（1.6.1节还将详细介绍如何使用这个网站。）

xii ｜ 前 言 作为有标准意识的开发人员，恐怕你也对这些标准什么时候正式颁布感兴趣。但这个问题有 点复杂，因为设计HTML5的人遵循的理念有点不合常规。他们经常说，正式的标准中怎么说并 不重要，关键是有没有浏览器支持。换句话说，只要你觉得可行，现在就可以采用任何你想使用 的功能。但不少开发人员、大公司、政府机关以及其他组织，通常会根据一种语言的标准是否正 式颁布来判断是否可以采用它。 在本书写作时，HTML5正处于候选推荐标准（candidate recommendation）阶段。这意味着标 准很大程度上已经尘埃落定，但浏览器开发商仍然在完善自己的实现。而进入下一个（也是最后 一个）阶段，也就是推荐标准（recommendation）阶段，可能要等到2014年年底。在此期间，W3C 已经发布了HTML5.1的工作草案（working draft）。（要了解这两个版本的区别，请看下面的附注）。 HTML5与HTML5.1的区别 HTML又有新版本了？怎么又多出来一个空格呢？ 正如我们将在第1章介绍的，HTML5经过了两个组织之手。整个过程因此遗留了一些小问 题，包括一个有点轻微“分裂”的版本系统。 最初制定HTML5规范的人（即WHATWG成员，将在1.1.3节介绍）对版本号不太“感冒”， 他们认为HTML5是一门“活的”语言，鼓励Web开发者关注浏览器的支持情况，而非版本号。 可是，WHATWG把HTML5交给了W3C官方，以便W3C把它制定完成。W3C是一个严谨、 细致的组织，希望区分最初发布的HTML5和后来经过改进的版本。因此，W3C决定将最初发 布的HTML5命名为HTML 5.0（注意空格），第二次发布的版本就是HTML 5.1，第三次发布时 就叫HTML 5.2。真够乱的，所有这些版本其实都还是HTML5。 顺便说一下，后续几个版本的HTML5标准不可能再有大的改动了。如果有新功能，也会 以独立的、补充性的规范形式发布。这样，少数几个人很快就可以制定新的HTML5功能规范， 而不必等待对整个语言的修订。 本书内容 本书把完整的HTML5教程分为13章，具体内容如下。 第一部分：现代标记  第1章介绍HTML发展到HTML5的历程。我们会看一看HTML5文档的样子，看看它跟以 前的HTML有何不同，另外也看一下浏览器的支持情况。  第2章讨论HTML5的语义元素（semantic element），也就是一组可以为标记赋予含义的元 素。恰当地使用这些元素，可以让浏览器、屏幕阅读器、Web设计工具以及搜索引擎基于 它们提供的额外信息更智能地工作。  第3章进一步讨论语义的概念，涉及微数据（microdata）等标准。尽管这一章的内容有点 偏理论，但透彻理解这个概念可以给Web开发人员带来巨大的回报：在谷歌等搜索引擎的

前 言 ｜ xiii 结果列表中显示更全面、更详尽的内容。  第4章探索HTML5 Web表单元素的变化，包括文本框、选择列表、复选框和其他用来从 访客那里收集信息的微件（widget）。HTML5为捕获数据输入错误提供了一些辅助和基 本工具。 第二部分：视频、图形和特效  第5章讲一讲HTML最激动人心的功能，即支持音频和视频播放。这一章将介绍如何避免 遭遇“Web视频编解码器大战”，创建出在所有浏览器中都能工作的播放页面，同时还要 学习创建自己定制的播放器。  第6章介绍最新版本的CSS3标准，它与HTML5可谓绝配。我们将学习如何应用新奇的字 体让文本变得活泼可爱，以及如何利用变换和动画添加吸引人的效果。  第7章探索CSS3媒体查询。我们会介绍怎么使用它创建响应式设计，让网页平滑地适配各 种移动设备。  第8章将介绍名为画布（canvas）的二维绘图表面。你将会学习怎样在画布上绘制图形、 图像、文本，甚至还将构建一个简单的绘图程序（使用JavaScript）。  第9章进一步提升你的“绘画”技术。这一章将会学习投影、花哨的模式，以及可点击的 交互图形和动画等更加令人神往的Canvas技术。 第三部分：构建 Web 应用  第10章讨论在访客计算机中保存小段数据的Web存储功能。这一章还将介绍如何在网页而 不是在Web服务器中使用JavaScript代码处理用户选择的文件。  第11章探索HTML5的缓存功能，这个功能可以实现在断网的情况下仍然能够通过浏览器 查看网页。  第12章将把目光投向与Web服务器通信这个主题上。为此，将介绍久负盛名的XMLHttpRequest 对象，JavaScript通过它可以联系Web服务器并请求信息。然后再讨论两个比较新的功能： 服务器发送事件（Server-Sent Events）和Web Socket。  第13章介绍了解决现代Web应用开发难题的三个新功能。第一是可以确定访客位置的地理 定位；第二是在后台执行复杂任务的Web Worker；第三是能够同步网页URL到当前状态 的浏览器历史功能。 最后有两个附录，可以为你掌握HTML5补习一些基础知识。附录A是对CSS的一个简要介绍， 附录B则会简单地介绍JavaScript。 在线资源 作为Missing Manual丛书的读者，你所得到的不仅仅是一本书。在网上，你还可以找到示例 文件以及技巧、文章，甚至是一两段视频。你可以跟Missing Manual团队交流，告诉我们你喜欢

xiv ｜ 前 言 （或讨厌）本书的哪一方面。请访问www.missingmanuals.com，或直接阅读后面的某一小节。 Missing CD 本书没有附带光盘，但这对学习本书一点影响都没有。读者可以访问本书的Missing CD页面 http://missingmanuals.com/cds/html5tmm2e，下载本书讨论和展示的网页示例，这样你就不必自己 动手敲那些长长的网页地址了。这个页面中列出了全书每一章提到的网站的链接。 提示 假如你想找某个特定的例子，我教给你一个好办法——看插图。在插图中，文件名一般 都会出现在浏览器地址栏的末尾。比如，看到文件路径C:\HTML5\Chapter01\SuperSimple HTML5.html（图1-1），就知道对应的示例文件名叫SuperSimpleHTML5.html。 试验站点 还有另一种使用本书示例的方法，就是访问在线示例网站：www.prosetech.com/html5。在这 个网站上可以看到本书的每一个示例，并直接在浏览器中运行它们。因为HTML5的某些功能需 要一个真正的Web服务器，所以直接使用这个网站其实可以省点心。（如果你直接从计算机硬盘 上运行网页，这些功能可能会导致一些怪异的现象，或者完全不能用。）而使用这个网站，就可 以先看到某个例子的运行结果，然后再下载该页面并动手尝试。 注意 别担心自己不知道哪些HTML5功能需要Web服务器，到时候本书会给出提示的。 注册 如果你在oreilly.com注册了这本书，可能会享受到一些优惠，比如购买HTML5: The Missing Manual的新版时可以打个折。注册其实只需点几次鼠标。在浏览器地址栏里输入http://tinyurl. com/registerbook，直接就可以跳到注册（Registration）页面。 反馈 有问题要问？需要更多信息？想给我们写个书评？在反馈（Feedback）页面上，你可以向专 家请教自己看书时碰到的问题，也可以分享自己对Missing Manual丛书的看法，甚至找到一些志 同道合的朋友，听听他们谈论在做网站过程中的一些体会。 要想发言，可访问www.missingmanuals.com/feedback。 勘误 为了尽可能保证本书切合实际、准确无误，每次重印我们都会纠正一些确认的勘误。这些勘

前 言 ｜ xv 误信息也会在本书网站上发布出来，以便读者更正自己手里这本书的错误。要提交或查看勘误， 请访问http://tinyurl.com/html52e-mm①。 Safari® Books Online Safari® Books Online是一个按需阅读的数字图书馆，有7500种技术图 书和视频可供搜索。 通过订阅，可以在此阅读所有图书，观看任何视频。甚至可以在新 书印刷之前阅读到它们。可以复制粘贴示例代码，收藏喜欢的内容，下载整章内容，为关键部分 创建书签，添加评注，打印页面，以及享受其他众多省时省力的阅读体验。 O’Reilly Media已经将本书上传到Safari Books Online。访问http://my.safaribooksonline.com并 免费注册，可以看到本书及O’Reilly和其他出版社图书的完整电子版。 —————————— ① 要提交中文版勘误，请访问图灵社区，并在本书页面下提交：http://ituring.cn/book/1361。——编者注

第一部分Part 1 第 1 章　HTML5 简介 第 2 章　用语义元素构造网页 第 3 章　编写更有意义的标记 第 4 章　构建更好的 Web 表单 本 部 分 内 容 现代标记