HTML5与CSS3实例教程（第2版）

针对新版本浏览器，讨论亟待解决的实际问题。
每一章分别聚焦某特定问题，通过多个实例介绍特定概念并引导读者创建简单示例，进而得到解决方案。
实例后附有“回退方案”，为旧版本浏览器提供解决方法。
“未来展望”探讨如何在将来更好地应用届时已经成熟的新特性。

HTML5和CSS3技术是目前整个网页的基础。《HTML5与CSS3实例教程(第2版)》共分3部分，集中讨论了HTML5和CSS3规范及其技术的使用方法。这一版全面讲解了最新的HTML5和CSS3技术，所有实例均使用最新特性实现，针对的是最新版本的浏览器。
《HTML5与CSS3实例教程(第2版)》适合所有使用HTML和CSS的Web开发人员学习参考。

Brian P. Hogan，1995年起便开始以自由职业者的身份开发专业网站并提供咨询服务，目前常使用Ruby、jQuery、HTML5和CSS3构建Web应用。他乐于讲述并撰写与Web设计和开发有关的内容，倡导为残障人士（特别是视觉障碍者）研发辅助功能，另著有《Web开发秘方》。

“要想在业内竞争中不掉队，就得不断学习、与时俱进。对于Web设计者和开发者而言，这是一本关于HTML5和CSS3的必读、高效的参考资料。不要把它搁置在书架上，而应放在案头以备随时翻阅。”
—— Matt Margolis，Getty Images应用开发经理

“本书就像一个Web开发百宝箱，内容通俗易懂、组织精良，并装满了‘干货’。Brian不愧是一位自信的专家和高水平的讲师。”
——Tibor Simic，Inge-mark开发人员

“我已经有十多年的网站开发经验，但仍能从本书中学到许多技巧。如果你还未触及HTML5的新特性，那还等什么？本书将告诉你可以做什么，应该如何做，以及何时做。”
——Stephen Orr，Made Media首席开发专家

第1章HTML5和CSS3概述
1.1强大的Web开发平台
1.1.1向后兼容
1.1.2更具描述性的标记
1.1.3更加简化
1.1.4用户界面增强
1.1.5更好的表单控件
1.1.6可访问性增强
1.1.7更高级的选择器
1.1.8视觉效果
1.1.9更少依赖插件的多媒体功能实现
1.1.10应用能力增强
1.1.11跨文档通信
1.1.12Web Sockets
1.1.13客户端存储
1.2注定充满挑战的未来之路
1.2.1处理老版本的IE
1.2.2可访问性
1.2.3废弃的标签
1.2.4市场利益的激烈竞争
1.2.5HTML5和CSS3的标准仍在不断发展中

第一部分用户界面增强
第2章新的结构化标签和属性
2.1实例1：用语义标记重新定义博客
2.1.1一切皆始于正确的文档类型
2.1.2页眉标签
2.1.3页脚标签
2.1.4导航标签
2.1.5区块和文章
2.1.6旁白与侧边栏
2.1.7为博客设置样式
2.1.8回退方案
2.2实例2：用元素实现进度条
2.2.1回退方案
2.2.2进度条标签
2.3实例3：用自定义数据属性构造弹出窗体
2.3.1行为与内容分离，以及
onclick()的问题
2.3.2增强可访问性
2.3.3不用onclick()
2.3.4引入自定义数据属性
2.3.5回退方案
2.4实例4：常见问题描述列表
2.5未来展望
第3章创建友好的Web表单
3.1实例5：使用新的输入字段描述数据
3.1.1表单描述
3.1.2使用范围字段创建滑动条
3.1.3使用选值框处理数值
3.1.4日期选择字段
3.1.5电子邮件字段
3.1.6URL字段
3.1.7颜色选择字段
3.1.8给表单设置样式
3.1.9回退方案
3.2实例6：借助autofocus跳到表单第一个字段
3.3实例7：通过占位文本提供提示信息
3.4实例8：不借助JavaScript验证用户输入
3.4.1正则表达式验证
3.4.2为字段添加样式
3.4.3回退方案
3.5实例9：通过contenteditable属性实现就地编辑功能
3.5.1用户资料表单
3.5.2数据持久化
3.5.3回退方案
3.6未来展望
第4章设置内容及界面的样式
4.1实例10：使用伪类设置表格样式
4.1.1使用:nth-of-type给表格行设置条纹
4.1.2使用:nth-child对齐表格列的内容
4.1.3使用:last-child加粗表格最后一行
4.1.4使用:nth-last-child反向遍历元素
4.1.5回退方案
4.2实例11：使用:after和content生成打印友好的链接
4.2.1创建只适用于打印的样式表
4.2.2双冒号语法
4.3实例12：使用媒体查询构建移动页面
4.4实例13：创建多栏布局
4.4.1拆分栏
4.4.2特定厂商的前缀
4.4.3回退方案
4.5未来展望
第5章构建可访问性界面
5.1实例14：使用ARIA role属性提供导航提示
5.1.1地标角色
5.1.2文档结构角色
5.1.3回退方案
5.2实例15：创建访问性良好的可更新区域
5.2.1创建页面
5.2.2隐藏内容区域
5.2.3回退方案
5.3实例16：提升表格的可访问性
5.3.1把标题与列结合起来
5.3.2用题注和描述解释表格
5.4未来展望

第二部分新视角、新声音
第6章在浏览器中画图
6.1实例17：在画布上绘制商标
6.1.1绘制线条
6.1.2添加"AwesomeCo"文本信息
6.1.3移动原点坐标
6.1.4为对象设置渐变效果
6.1.5回退方案
6.2实例18：使用RGraph实现图表统计
6.2.1使用HTML描述数据
6.2.2将HTML描述内容转换成柱状图
6.2.3显示替代内容
6.2.4回退方案
6.3实例19：使用SVG绘制矢量图形
6.3.1绘制线条
6.3.2添加文本信息
6.3.3绘制形状
6.3.4通过路径进行手工绘制
6.3.5回退方案
6.4未来展望
第7章嵌入音频和视频
7.1历史回顾
7.2容器与编解码器
7.2.1视频编解码器
7.2.2音频编解码器
7.2.3容器与编解码器协同工作
7.3实例20：音频特性
7.3.1创建基本的音频列表
7.3.2回退方案
7.4实例21：嵌入视频
7.5实例22：视频播放的可访问性
7.5.1添加字幕
7.5.2HTML5视频技术的局限性
7.6未来展望
第8章视觉特效
8.1实例23：设置圆角
8.1.1柔化登录表单
8.1.2回退方案
8.2实例24：阴影、渐变及转换
8.2.1基本结构
8.2.2添加渐进效果
8.2.3添加阴影效果
8.2.4旋转姓名牌
8.2.5使用矩阵精确转换
8.2.6透明背景
8.2.7回退方案
8.3实例25：设置字体
8.3.1@font-face
8.3.2字体格式
8.3.3改变字体
8.3.4回退方案
8.4实例26：通过过渡和动画特性移动物体
8.4.1使用CSS过渡特性实现淡入淡出效果
8.4.2理解调速函数
8.4.3创建过渡特效
8.4.4利用CSS3动画特性实现表单晃动效果
8.4.5回退方案
8.5未来展望

第三部分标记之外
第9章客户端数据储存
9.1实例27：用Web Storage存储偏好设置
9.1.1创建偏好设置表单
9.1.2保存及恢复偏好设置数据
9.1.3为页面应用偏好设置值
9.1.4回退方案
9.2实例28：使用IndexedDB将数据存储到客户端数据库中
9.2.1注意事项界面
9.2.2创建并连接数据库
9.2.3创建注意事项表
9.2.4加载注意事项
9.2.5读取特定记录
9.2.6创建、更新以及删除记录
9.2.7回退方案
9.3实例29：离线应用
9.3.1通过manifest文件定义应用程序缓存
9.3.2manifest文件与服务器端缓存设置
9.3.3检测网络连通性
9.4未来展望
第10章创建交互式Web应用
10.1实例30：保存历史记录
10.1.1存储当前状态
10.1.2恢复上一状态
10.1.3设置默认状态
10.1.4回退方案
10.2实例31：跨域通信
10.2.1联系人列表
10.2.2发送消息
10.2.3支持网站
10.2.4接收消息
10.2.5IE 8及IE 9中的限制
10.3实例32：WebSocket聊天
10.3.1聊天界面
10.3.2与聊天服务器的通信
10.3.3回退方案
10.3.4Flash Socket策略文件
10.4实例33：你在哪儿：Geolocation
10.4.1为AwesomeCo公司开发定位功能
10.4.2如何被找到
10.4.3回退方案
10.5实例34：通过拖放来整理内容
10.5.1创建基本用户界面
10.5.2添加卡片到界面
10.5.3整理卡片
10.5.4回退方案
10.6未来展望
第11章未来之路
11.1使用弹性盒子模型定义布局
11.2跨域资源共享
11.3Web Workers
11.4服务器发送事件
11.4.1监听事件
11.4.2实现你自己的服务器
11.5滤镜效果
11.6WebGL
11.7前进！

附录A快速参考
附录BjQuery快速入门
附录C针对Web的音频和视频编码
附录D相关资源

参考文献

对Web开发者来说，Web世界中的三个月犹如真实世界的一年。也就是说，自本书上一版出版至今已经有12个“Web年”了。
作为Web开发者，总能耳闻目睹一些新的技术趋势。在几年以前，HTML5和CSS3看起来还很遥远，但由于当前各种浏览器，如Chrome、Safari、Firefox、Opera以及IE等，都在努力实现HTML5和CSS3规范中的各项内容，因而现今企业和组织也都在业务系统的建设过程中纷纷采用这些新技术。
如何阅读本书
没有必要从头至尾阅读本书。本书已经将内容分解成了便于单独理解与学习的各个实例，每个实例都聚焦于一到两个核心概念。每一章都会涉及一些相关项目。如果你下载了本书源代码，将看到一个template/文件夹，其中包含了将要用到的通用模板文件，这将会是一个不错的着手点。
如下示例代码的第一行标注了该示例代码文件在本书源代码中的位置：
html5_new_tags/index.html

如果你阅读的是英文电子版，可以点击该标注来打开整个示例代码文件，以便在上下文中查看代码。这个标注指出了示例代码文件在本书源代码中的位置，但它也许并不总是与你实际操作的文件相匹配。
最后，请跟随本书代码，放心大胆地练习和调整本书提供的完整示例代码。接下来，让我们来详细了解一下运行本书示例代码之前应做何种准备。
准备工作
你需要Firefox 20或更高版本、Chrome 20或更高版本、Opera 10.6或者Safari 6等浏览器来测试本书代码。由于每款浏览器在功能实现上都会有一些差别，因此，你可能还希望在所有浏览器上都测试我们编写的代码。有一台Android或iOS设备在手边会很有帮助，但不是必需的。
在IE浏览器上进行测试工作
你同时也应该考虑到使用IE 8及更高版本来测试网站功能的现实需要，这样才能确保我们创建的回退解决方案运行无误。最简单的方式就是在VirtualBox上安装微软Windows来进行测试。微软在Modern.IE网站上提供了免费的虚拟机，可用于测试Web应用程序，你可以从上面下载现成可用的VirtualBox、Parallels或VMware镜像文件。这些虚拟机软件有30天的免费试用期，30天之后需要重新下载。
Node.js与示例服务器
测试书中的某些特性时，需要通过一个Web应用服务器来运行HTML和CSS文件。另外，测试其他的一些特性时也需要一个相对复杂的后台应用服务。本书源代码中提供了一个应用服务器，可以满足你的需要。要运行这个服务器，你需要事先按照Node.js网站上的相关说明安装好Node.js，并需要0.10.0或以上版本的Node.js，以避免服务器崩溃。
你还需要用到npm，这是一个命令行工具，用来安装Node打包模块，因此，你可以用它来安装依赖模块。这个工具是Node.js安装文件中的一部分。
一旦安装好了Node.js，就可以访问本书站点并下载示例代码。对压缩文件进行解压，然后通过终端窗口（在Windows平台则是命令行窗口）进入解压后的文件所在位置，并运行以下命令，下载所有的依赖模块（注意不包括$符号）：
$ npm install
之后输入以上命令，同样不要输入$符号：
$ node server
我们需要在端口8000上运行应用服务器。在浏览器中加载，就可以浏览应用示例了。如果你在虚拟机上进行测试，虚拟机应该使用运行示例服务器的计算机的真实IP地址来连接。最棒的是，与server文件放置在同一文件夹里的文件与文件夹将会通过示例服务器来运行，因此，你可以直接使用本书源代码文件夹的既有组织方式，来跟随本书内容按部就班地进行学习。
使用JavaScript和jQuery的注意事项
在本书中，我们将大量使用JavaScript。在过去，在页面标签里加载JavaScript文件是一种很常用的实践方式，之后使用诸如jQuery的document.ready()方法来等待DOM（Document Object Model，文档对象模型）准备就绪，以对DOM进行操作。但是现在的推荐做法是在页面底部加载所有的脚本，这样可以获得更好的性能。因此，我们也将这么做，所有的脚本包括jQuery，都将放在页面底部，但是需要在元素加载之前对DOM进行操作的场景除外。
此外，我们将在合适的地方使用jQuery，如果只是打算简单地通过元素ID来查找某个元素，我们将直接使用document.getElementById()。但如果需要进行事件处理或者更复杂的DOM操作以在IE8中实现回退方案时，我们会考虑使用jQuery。
换而言之，我们要“根据任务的不同选择合适的工具”。这可能会带来一些矛盾，但当我们开始介绍回退方案以使应用在老式浏览器上正常运行时，这将是一个不错的折中办法。在后面，我会解释为什么要这样做。