HTML5秘籍（第2版）

HTML5不仅仅是一种标记语言，它还指代多种独立的Web标准。你的运气不错：这本书涵盖了关于HTML5的一切！本书通过循序渐进的教程和真实的示例，向你介绍如何构建Web应用，包括视频控件、动态图形、地理定位、离线功能和针对移动设备的响应式Web设计等。

不依赖插件添加音频和视频，构建适用于所有浏览器的播放页面。
用Canvas创建吸引人的视觉效果，绘制图形、图像、文本，播放动画，运行交互游戏。
用CSS3将页面变活泼，比如添加新奇的字体，利用变换和动画添加吸引人的效果。
设计更出色的Web表单，利用HTML5新增的表单元素更加高效地收集访客信息。
一次开发，多平台运行，实现响应式设计，创建适配桌面计算机、平板电脑和智能手机的网站。
让Web应用拥有桌面应用的特性，通过开发自给自足的离线应用，无论用户能否上网，都可以在本地保存用户信息。

Matthew MacDonald，著名科技作家、程序员，撰写过十几部技术专著，包括《ASP.NET 4高级程序设计》《精通ASP.NET 4.5（第5版）》，以及Missing Manual系列图书之Creating a Website、WordPress、Access 2013、Office 2013、Excel 2013、Your Brain和Your Body等。

★“这本书写作风格独树一帜，内容组织环环相扣，示例精彩，语言通俗易懂。”
——读者评论

★“这本书真是太棒了！它帮助我理解了新的HTML5标签、规则，以及HTML编码风格的大转变。如果你从事Web开发，想牢固、全面地掌握HTML5，我推荐你看看这本书。”
——读者评论

前言
第一部分现代标记
第1章HTML5 简介
1.1 HTML5 的故事
1.1.1 XHTML 1.0：更严格的标准
1.1.2 XHTML 2：意想不到的失败
1.1.3 HTML5：起死回生
1.1.4 HTML：活着的语言
1.2 HTML5 的三个主要原理
1.2.1 不破坏Web
1.2.2 修补牛蹄子路
1.2.3 实用至上
1.3 HTML5标记初体验
1.3.1 HTML5文档类型
1.3.2 字符编码
1.3.3 页面语言
1.3.4 添加样式表
1.3.5 添加JavaScript
1.3.6 最终结果
1.4 HTML5 语法
1.4.1 放松的规则
1.4.2 HTML5 验证
1.4.3 XHTML 的回归
1.5 HTML5 元素家族
1.5.1 新增的元素
1.5.2 删除的元素
1.5.3 改变的元素
1.5.4 调整的元素
1.5.5 标准化的元素
1.6 今天开始用HTML5
1.6.1 了解浏览器支持情况
1.6.2 浏览器装机情况统计
1.6.3 通过Modernizr 检测功能
1.6.4 使用"腻子脚本"填补功能缺陷
第2章用语义元素构造网页
2.1 语义元素
2.2 改造传统的HTML 页面
2.2.1 构造页面的老办法
2.2.2 使用HTML5 构造页面
2.2.3 用
添加插图
2.2.4 用
添加附注
2.3 浏览器对语义元素的支持情况
2.3.1 为语义元素添加样式
2.3.2 使用HTML5"垫片"
2.3.3 Modernizr：一站式解决方案
2.4 使用语义元素设计站点
2.4.1 理解
2.4.2 用
标注导航链接
2.4.3 理解区块
2.4.4 理解
2.4.5 使用标识主要内容
2.5 HTML5 纲要
2.5.1 如何查看纲要
2.5.2 基本纲要
2.5.3 分块元素
2.5.4 解决一个纲要问题
第3章编写更有意义的标记
3.1 回顾语义元素
3.1.1 使用标注日期和时间
3.1.2 使用标注JavaScript返回值
3.1.3 使用标注突显文本
3.2 其他语义标准
3.2.1 ARIA
3.2.2 RDFa
3.2.3 微格式
3.2.4 微数据
3.3 实例：改进"About Me"页面
3.4 搜索引擎如何使用元数据
3.4.1 Google Rich Snippets
3.4.2 增强搜索结果
3.4.3 食谱搜索引擎
第4章构建更好的Web 表单
4.1 理解表单
4.2 传统表单翻新
4.2.1 通过占位符文本添加提示
4.2.2 焦点：挑选正确的起点
4.3 验证：阻止错误
4.3.1 HTML5 验证的原理
4.3.2 关闭验证
4.3.3 验证样式挂钩
4.3.4 使用正则表达式
4.3.5 自定义验证
4.4 浏览器对Web 表单和验证的支持
4.4.1 用Modernizr 检测支持情况
4.4.2 用HTML5Forms 兼容
4.5 新的输入控件
4.5.1 电子邮件地址
4.5.2 网址
4.5.3 搜索框
4.5.4 电话号码
4.5.5 数值
4.5.6 滑动条
4.5.7 日期和时间
4.5.8 颜色
4.6 新元素
4.6.1 使用
4.6.2 进度条和计量条
4.6.3 使用和
创建工具条和菜单
4.7 网页中的HTML 编辑器
4.7.1 使用contenteditable 编辑元素
4.7.2 使用designMode 编辑页面
第二部分视频、图形和特效
第5章音频与视频
5.1 网络视频的演变
5.2 HTML5 音频与视频
5.2.1 使用
5.2.2 预加载媒体文件
5.2.3 自动播放
5.2.4 循环播放
5.2.5 了解
5.3 HTML5 媒体格式
5.3.1 谈谈格式
5.3.2 浏览器对媒体格式的支持情况
5.4 后备措施：如何讨好每一款浏览器
5.4.1 支持多种格式
5.4.2 添加Flash 后备措施
5.5 使用JavaScript 控制播放器
5.5.1 添加音效
5.5.2 创建自定义视频播放器
5.5.3 JavaScript 媒体播放器
5.6 视频字幕
5.6.1 标记时间的文本轨道和WebVTT
5.6.2 使用添加字幕
5.6.3 浏览器对视频字幕的支持情况
第6章美妙的CSS3 字体和特效
6.1 使用CSS3
6.1.1 选择一：用能用的
6.1.2 选择二：将CSS 功能作为增强
6.1.3 选择三：Modernizr
6.1.4 有开发商前缀的特定于浏览器的样式
6.2 多变的盒子
6.2.1 透明
6.2.2 圆角
6.2.3 背景
6.2.4 阴影
6.2.5 渐变
6.3 创建过渡效果
6.3.1 基本的颜色过渡
6.3.2 更多的过渡思路
6.3.3 用JavaScript 触发过渡
6.3.4 变换
6.3.5 使用变换的过渡
6.4 Web 字体
6.4.1 Web 字体格式
6.4.2 给网站找个字体
6.4.3 从Font Squirrel 获取免费字体
6.4.4 准备一个网络字体
6.4.5 用谷歌更简单地使用Web字体
6.4.6 多栏文本
第7章CSS3 与响应式Web 设计
7.1 响应式设计基础
7.1.1 流式布局
7.1.2 流式图片
7.1.3 流式排版
7.1.4 理解视口
7.2 使用媒体查询适配布局
7.2.1 媒体查询
7.2.2 创建简单的媒体查询
7.2.3 构建移动设备友好的布局
7.2.4 媒体查询的高级条件
7.2.5 替换整个样式表
7.2.6 识别特定的移动设备
第8章基本Canvas 绘图
8.1 Canvas 起步
8.1.1 画直线
8.1.2 路径与形状
8.1.3 绘制曲线
8.1.4 变换
8.1.5 透明度
8.1.6 合成操作
8.2 构建基本的画图程序
8.2.1 准备工作
8.2.2 在画布上绘图
8.2.3 将画布保存为图像
8.3 浏览器对Canvas 的支持情况
8.3.1 用ExplorerCanvas 兼容Canvas
8.3.2 用FlashCanvas 兼容Canvas
8.3.3 Canvas 后备及功能检测
第9章高级Canvas 技术：交互性和动画
9.1 高级Canvas 绘图
9.1.1 绘制图像
9.1.2 裁剪、切割和伸缩图片
9.1.3 绘制文本
9.2 阴影与填充
9.2.1 添加阴影
9.2.2 填充图案
9.2.3 填充渐变
9.2.4 综合示例：绘制图解
9.3 赋予图形交互能力
9.3.1 记录绘制的内容
9.3.2 基于坐标的碰撞检测
9.4 给Canvas 添加动画
9.4.1 基本的动画
9.4.2 多物体动画
9.5 实例：迷宫游戏
9.5.1 布置迷宫
9.5.2 让笑脸动起来
9.5.3 基于像素颜色的碰撞检测
第三部分构建Web 应用
第10章数据存储
10.1 Web 存储简介
10.1.1 存储数据
10.1.2 实战：保存游戏中的最后位置
10.1.3 浏览器对Web 存储的支持情况
10.2 深入Web 存储
10.2.1 删除数据项
10.2.2 查找所有数据项
10.2.3 保存数值和日期
10.2.4 保存对象
10.2.5 响应存储变化
10.3 读取文件
10.3.1 取得文件
10.3.2 用读取文本文件
10.3.3 替换标准的上传控件
10.3.4 一次读取多个文件
10.3.5 通过拖曳读取图片文件
10.3.6 浏览器对File API 的支持情况
10.4 IndexDB：浏览器的数据库引擎
10.4.1 数据对象
10.4.2 创建并连接数据库
10.4.3 在数据库中保存数据
10.4.4 在数据表中查询所有数据
10.4.5 查询单条数据
10.4.6 删除一条数据
10.4.7 浏览器对IndexedDB 的支持情况
第11章离线应用
11.1 通过描述文件缓存资源
11.1.1 创建描述文件
11.1.2 使用描述文件
11.1.3 把描述文件放到Web 服务器
11.1.4 更新描述文件
11.1.5 浏览器对离线应用的支持情况
11.2 实用缓存技术
11.2.1 访问未缓存的文件
11.2.2 添加后备内容
11.2.3 检测连接
11.2.4 用JavaScript 监听更新
第12章与Web 服务器通信
12.1 向Web 服务器发送消息
12.1.1 XMLHttpRequest 对象
12.1.2 向Web 服务器提问
12.1.3 取得新内容
12.2 服务器发送事件
12.2.1 消息格式
12.2.2 通过服务器脚本发送消息
12.2.3 在网页中处理消息
12.2.4 轮询服务器端事件
12.3 Web Socket
12.3.1 Web Socket 服务器
12.3.2 简单的Web Socket 客户端
12.3.3 使用现成的Web Socket服务器
第13章地理定位、Web Worker 和历史管理
13.1 地理定位
13.1.1 地理定位的基本原理
13.1.2 查找访客的坐标
13.1.3 处理错误
13.1.4 设置地理定位选项
13.1.5 显示地图
13.1.6 跟踪访客移动
13.1.7 浏览器对地理定位的兼容情况
13.2 Web Worker
13.2.1 费时的任务
13.2.2 把任务放在后台
13.2.3 处理Worker 错误
13.2.4 取消后台任务
13.2.5 传递复杂消息
13.2.6 浏览器对Web Worker 的兼容情况
13.3 历史管理
13.3.1 URL 问题
13.3.2 以往的解决方案：hashbang URL
13.3.3 HTML5 的方案：会话历史
13.3.4 浏览器对会话历史的支持情况
第四部分附 录
附录ACSS 基础
附录BJavaScript：页面的大脑

HTML5简介
如果说HTML是一部电影，那HTML5就是一次大转折。HTML本来是不会活过21世纪的。官方Web标准组织W3C早在1998年就已经对HTML撒手不管了。W3C把未来都寄托在XHTML这个更具现代特色的后续标准身上，XHTML被视为HTML的严肃整洁版。 但XHTML举步维艰，是一群被剥夺了话语权的人，让HTML起死回生并为本书将要探讨的功能奠定了基础。
在本章里，你会了解HTML死亡的原因，以及它又是怎样复活的；了解HTML5的设计原理与功能；还将见识恼人的浏览器支持问题。在这一章，你将第一次看到真正的HTML5文档。
1.1HTML5的故事
HTML的基本思想——使用元素为内容添加结构——从Web诞生以来就没有变过。事实上，即使是最陈旧的网页，在最新的浏览器中仍然可以得到完美的呈现。
年长和成功也会带来风险，那就是所有人都想取代你！1998年，W3C停止了对HTML的维护，作为对它的改进，开始制定一个基于XML的后续版本——XHTML 1.0。
1.1.1XHTML 1.0：更严格的标准
XHTML与HTML的语法绝大部分都是相同的，只不过要求更严格。很多以前不够严谨的HTML标记，在XHTML中都变成了不能接受的。
例如，假设你想把标题中的最后一个词标记为斜体，本来应该写：
The Life of a Duck
但你一不小心放错了最后两个标签的位置：
The Life of a Duck
浏览器在遇到这个稍微有点乱的标记之后，能明白你想干什么。于是，它就一声不吭地把最后一个词变成斜体。可是，标签不匹配违反了XHTML的规定。如果把页面复制到一个XHTML验证器中（或使用Dreamweaver之类的网页设计工具时），你就会看到一个警告，告诉你哪里有错误。从Web设计的角度看，XHTML基于严格规则的这种提示很有用，因为你可以发现微小的错误，这些错误会导致在不同浏览器中显示结果不一致（这些错误在编辑和增强页面时还可能导致更严重的问题）。
最初，XHTML获得了成功。由于厌倦了浏览器的古怪行为和怎么写都可以通过的不正常状态，专业的Web开发人员对XHTML还是非常拥护的。后来，XHTML标准又强迫他们养成更好的习惯，同时放弃HTML中那些并不完善的格式化功能。可是，与XML工具协同，降低自动化程序处理页面的难度，方便地移植到移动平台，以及XHTML语言自身的可扩展性等这些预期的好处，从来没有在XHTML身上实现过。
即便如此，XHTML仍然成为最严肃的Web设计师所遵循的标准。尽管看起来所有人都挺满意的，但实际上却存在一个潜规则：浏览器虽然理解XHTML标记，但却不会严格地按照标准执行错误检查。这就意味着页面仍然可以不遵守XHTML规则，浏览器则视而不见。事实上，没有什么可以阻止Web开发人员把乱糟糟的标记和陈旧的HTML内容混在一起，然后还说这是XHTML页面。世界上根本就没有一个浏览器站出来反对这种行为。这种情况让那些负责XHTML标准的人深感不安。
1.1.2XHTML 2：意想不到的失败
解决方案就是通过XHTML 2来扭转这个乱糟糟的局面。这个新版本规定了严格的错误处理规则，强制要求浏览器拒绝无效的XHTML 2页面，同时也摒弃了很多从HTML沿袭下来的怪异行为和编码惯例。比如，以编号方式（
、
、
等）区分标题的方法被一个新的元素取代，这个元素的重要性取决于它在网页中的位置。类似地，由于允许Web开发人员将任何元素转换为链接，元素的地位一落千丈。而元素因为增加了一种提供替代内容的新方式，也丧失了原有的alt属性。
这些变化是XHTML 2的典型特征。从理论上看，这些改变的目的是让网页更整洁也更有逻辑性。而从实践角度说，这就要求Web设计人员必须改变以前编写网页的方式（已经存在的网页必须更新），但付出这些代价却没有增加任何新功能，让这种改变失去了价值。与此同时，XHTML 2还宣布作废了几个众所周知的元素，比如用于加粗文本的、用于变斜体的和用于在网页中嵌入另一个网页的
但最糟糕的，还是慢得要死的制定过程。XHTML 2的制定过程整整拖了5年才完成，开发人员的激情早已荡然无存了。
1.1.3HTML5：起死回生
几乎与此同时，从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正是在这两个标准的基础上发展起来的。
……