前 言
为何写作本书
2014年10月28日，W3C的HTML工作组正式发布了HTML 5的正式推荐标准（W3C Recommendation），这一消息是W3C在美国圣克拉拉举行的W3C技术大会及顾问委员会会议（TPAC 2014）上宣布的。HTML 5在这一版本中增加了支持Web应用开发者的许多新特性，以及更符合开发者使用习惯的新元素，并重点关注定义清晰的、一致的准则，以确保Web应用和内容在不同用户代理（浏览器）中的互操作性。HTML 5是构建开放Web平台的核心。
2015年4月9日，W3C的CSS工作组发布CSS基本用户接口模块（CSS Basic User Interface Module Level 3，CSS3 UI）的标准工作草案。该文档描述了CSS 3中对HTML、XML（包括XHTML）进行样式处理所需的与用户界面相关的CSS选择器（selectors）、属性及属性值。它包含并扩展了在CSS Level 2及Selector规范中定义的与用户接口有关的特性。
HTML 5带来了一组新的用户体验，如Web的音频和视频不再需要插件，通过Canvas更灵活地完成图像绘制，而不必考虑屏幕的分辨率，浏览器对可扩展矢量图（SVG）和数学标记语言（MathML）的本地支持，通过引入新的注释信息以增强对东亚文字呈现（Ruby）的支持，对富Web应用信息无障碍新特性的支持，等等。
前端技术将进入一个崭新的时代，至少已经开启了这扇门。
在这种局势下，学习HTML 5无疑成为Web开发者的一大重要任务，谁先学会HTML 5，谁就掌握了开启未来Web平台的一把钥匙。因此，笔者希望借助此书帮助国内的Web开发者更好地学习HTML 5以及与之相伴的CSS 3技术，早日运用这些技术开发出一个具有现代水平的、在未来的Web平台上正常运行的Web网站或Web应用程序。
第3版与第2版的区别
自2013年上半年本书第2版出版以来，一直受到广大读者的欢迎，笔者在这里首先感谢广大读者的支持。自本书第2版出版之后，HTML 5与CSS 3标准处于不断发展中，各主流浏览器也以最快的速度对HTML 5中各种最新公布的API提供了支持，其中包括各种新增元素、WebRTC通信API、鼠标指针锁定API、JavaScript Promise等。因此，本书以第2版的内容为基础，添加对2013上半年到2015年5月之间HTML 5中新增的各种元素及API的介绍，同时更新各主流浏览器对CSS 3的最新支持情况，以使读者能够学到2015年5月为止关于HTML 5与CSS 3标准的各种知识，了解各种最新浏览器对HTML 5与CSS 3标准的支持情况，能够早日通过这些新知识打造一个HTML 5时代功能强大的Web网站或Web应用程序。
具体来说，本书在第2版的基础上做出了如下主要修改：
第2章中新增部分HTML 5属性。
第3章中新增对main元素的介绍，移除第2版中对hgroup元素（HTML 5标准中已废除该元素）的介绍。
第4章中新增对dialog元素的介绍。
第5章（第2版中第6章）中新增“使用Path2D对象绘制路径”和“图形、图像的组合与混合”的内容。
第6章（第2版中的第15章）中新增“对音频或视频添加字幕”内容。
第10章中新增“在IndexedDB数据库中保存Blob对象”内容。
新增第12章对WebRTC通信的介绍。
第17章（第2版中的第16章）中新增“鼠标指针锁定API”、“requestAnimationFrame”、“Mutation Observer”、“JavaScript Promise”、“Beacon API”内容。
第21章中新增“使用rem单位定义字体大小”内容。
第22章中新增“创建盒内阴影”内容。
第23章中新增“新增的用于平铺背景图像的选项—space与round”和“使用渐变色背景”内容。
第24章中新增“使用3D变形功能”及“变形矩阵”内容。
第26章中根据CSS 3最新标准的内容重新编写“弹性盒布局”并新增“calc方法”内容。
第28章中新增“实现CSS 3中的滤镜特效”内容。
目 录
前 言
第1章?Web时代的变迁
1.1?迎接新的Web时代
1.1.1?HTML 5时代即将来临
1.1.2?HTML 5的目标
1.2?HTML 5深受欢迎的理由
1.2.1?世界知名浏览器厂商对HTML 5的支持
1.2.2?第一个理由：时代的要求
1.2.3?第二个理由：Internet Explorer 8
1.3?可以放心使用HTML 5的三个理由
1.4?HTML 5要解决的三个问题
第2章?HTML 5与HTML 4的区别
2.1?语法的改变
2.1.1?HTML 5的语法变化
2.1.2?HTML 5中的标记方法
2.1.3?HTML 5确保的兼容性
2.1.4?标记示例
2.2?新增的元素和废除的元素
2.2.1?新增的结构元素
2.2.2?新增的其他元素
2.2.3?新增的input元素的类型
2.2.4?废除的元素
2.3?新增的属性和废除的属性
2.3.1?新增的属性
2.3.2?废除的属性
2.4?全局属性
2.4.1?contentEditable属性
2.4.2?designMode属性
2.4.3?hidden属性
2.4.4?spellcheck属性
2.4.5?tabindex属性
2.5?新增的事件
第3章?HTML 5的结构
3.1?新增的主体结构元素
3.1.1?article元素
3.1.2?section元素
3.1.3?nav元素
3.1.4?aside元素
3.1.5?time元素与微格式
3.1.6?pubdate属性
3.2?新增的非主体结构元素
3.2.1?header元素
3.2.2?footer元素
3.2.3?address元素
3.2.4?main元素
3.3?HTML 5中网页结构
3.3.1?HTML 5中的大纲
3.3.2?大纲的编排规则
3.3.3?对新的结构元素使用样式
第4章?表单及其他新增和改良元素
4.1?新增元素与属性
4.1.1?新增属性
4.1.2?大幅度地增加与改良input元素的种类
4.1.3?对新的表单元素使用样式
4.1.4?output元素的追加
4.2?表单验证
4.2.1?自动验证
4.2.2?取消验证
4.2.3?显式验证
4.3?增强的页面元素
4.3.1?新增的f?igure元素与f?igcaption元素
4.3.2?新增的details元素与summary元素
4.3.3?新增的mark元素
4.3.4?新增的progress元素
4.3.5?新增的meter元素
4.3.6?新增的dialog元素
4.3.7?改良的a元素
4.3.8?改良的ol列表
4.3.9?改良的dl列表
4.3.10?加以严格限制的cite元素
4.3.11?重新定义的small元素
4.3.12?安全性增强的iframe元素
4.3.13?增强的script元素
第5章?绘制图形
5.1 canvas元素的基础知识
5.1.1 在页面中放置canvas元素
5.1.2 绘制矩形
5.2 使用路径
5.2.1 绘制圆形
5.2.2 不关闭路径会怎么样
5.2.3 绘制直线
5.2.4 绘制曲线
5.2.5 使用Path2D对象绘制路径
5.3 绘制渐变图形
5.3.1 绘制线性渐变
5.3.2 绘制径向渐变
5.4 绘制变形图形
5.4.1 坐标变换
5.4.2 坐标变换与路径的结合使用
5.4.3 矩阵变换
5.5 给图形绘制阴影
5.6 使用图像
5.6.1 绘制图像
5.6.2 图像平铺
5.6.3 图像裁剪
5.6.4 像素处理
5.7 图形、图像的组合与混合
5.7.1 组合图形
5.7.2 混合图像
5.8 绘制文字
5.9 补充知识
5.9.1 保存与恢复状态
5.9.2 保存文件
5.9.3 简单动画的制作
第6章?多媒体相关API
6.1 多媒体播放
6.1.1 video元素与audio元素的基础知识
6.1.2 属性
6.1.3 方法
6.1.4 事件
6.2 对音频或视频添加字幕
6.2.1 track元素的基础知识
6.2.2 track元素的各种属性
6.2.3 WebVTT文件
第7章?History API
7.1 History API的基本概念
7.2 History API使用示例
7.2.1 使用History API
7.2.2 结合使用Canvas API与History API
第8章?本地存储
8.1 Web Storage
8.1.1 Web Storage是什么
8.1.2 简单Web留言本
8.1.3 作为简易数据库来利用
8.1.4 利用storage事件实时监视Web Storage中的数据
8.2 本地数据库
8.2.1 本地数据库的基本概念
8.2.2 用executeSql来执行查询
8.2.3 使用数据库实现Web留言本
8.2.4 transaction方法中的处理
8.3 indexedDB数据库
8.3.1 indexedDB数据库的基本概念
8.3.2 连接数据库
8.3.3 数据库的版本更新
8.3.4 创建对象仓库
8.3.5 创建索引
8.3.6 索引的multiEntry属性值
8.3.7 使用事务
8.3.8 保存数据
8.3.9 获取数据
8.3.10 根据主键值检索数据
8.3.11 根据索引属性值检索数据
8.3.12 复合索引
8.3.13 统计对象仓库中的数据数量
8.3.14 使用indexedDB API制作Web留言本
第9章?离线应用程序
9.1 离线Web应用程序详解
9.1.1 新增的本地缓存
9.1.2 本地缓存与浏览器网页缓存的区别
9.2 manifest文件
9.3 浏览器与服务器的交互过程
9.4 applicationCache对象
9.4.1 swapCache方法
9.4.2 applicationCache对象的事件
第10章?文件API
10.1 FileList对象与f?ile对象
10.2 ArrayBuffer对象与ArrayBufferView对象
10.2.1 基本概念
10.2.2 ArrayBuffer对象
10.2.3 ArrayBufferView对象
10.2.4 DataView对象
10.3 Blob对象
10.3.1 Blob对象概述
10.3.2 创建Blob对象
10.3.3 Blob对象的slice方法
10.3.4 在IndexedDB数据库中保存Blob对象
10.4 FileReader对象
10.4.1 FileReader对象的方法
10.4.2 FileReader对象的事件
10.4.3 FileReader对象的使用示例
10.5 FileSystem API
10.5.1 FileSystem API概述
10.5.2 FileSystem API的适用场合
10.5.3 请求访问文件系统
10.5.4 申请磁盘配额
10.5.5 创建文件
10.5.6 写入文件
10.5.7 在文件中追加数据
10.5.8 读取文件
10.5.9 复制磁盘中的文件
10.5.10 删除文件
10.5.11 创建目录
10.5.12 读取目录中的内容
10.5.13 删除目录
10.5.14 复制文件或目录
10.5.15 移动文件或目录与重命名文件或目录
10.5.16 f?ilesystem:URL前缀
10.5.17 综合案例
10.6 Base64编码支持
10.6.1 Base64编码概述
10.6.2 在HTML 5中支持Base64编码
第11章?通信API
11.1 跨文档消息传输
11.1.1 跨文档消息传输的基本知识
11.1.2 跨文档消息传输示例
11.1.3 通道通信
11.2 WebSockets通信
11.2.1 WebSockets通信的基本知识
11.2.2 使用WebSockets API
11.2.3 WebSockets API使用示例
11.2.4 发送对象
11.2.5 发送与接收原始二进制数据
11.2.6 实现WebSockets API的开发框架
11.2.7 WebSocket协议
11.2.8 WebSockets API的适用场景
11.3 Server-Sent Events API
11.3.1 Server-Sent Events API的基本概念
11.3.2 Server-Sent Events API的实现方法
11.3.3 事件ID的使用示例
第12章?WebRTC通信
12.1 WebRTC的基本概念
12.2 使用getUserMedia方法访问本地设备
12.2.1 浏览器检测
12.2.2 获取对视频输入设备或音频输入设备的访问权限
12.2.3 实现拍照功能
12.2.4 与CSS 3结合使用
12.3 手工建立WebRTC通信
12.3.1 WebRTC通信的基本概念
12.3.2 建立P2P通信
12.3.3 手工实现信令
12.3.4 剖析SDP交换过程
12.3.5 剖析ICE交换过程
12.4 穿越NAT/防火墙进行通信
12.4.1 穿越NAT
12.4.2 穿越防火墙
12.5 使用Node.js进行信令
12.5.1 建立信令服务器
12.5.2 修改信令处理
12.6 使用WebRTC进行多人通信
12.7 使用RTCDataChannel进行通信
12.7.1 RTCDataChannel的基本概念
12.7.2 实现RTCDataChannel通信
12.7.3 实现浏览器与浏览器之间的文件发送功能
第13章?扩展的XMLHttpRequest API
13.1 从服务器端获取二进制数据
13.1.1 ArrayBuffer响应
13.1.2 Blob响应
13.2 发送数据
13.2.1 发送字符串
13.2.2 发送表单数据
13.2.3 上传文件
13.2.4 发送Blob对象
13.2.5 发送ArrayBuffer对象
13.3 跨域数据请求
第14章?使用Web Workers处理线程
14.1 基础知识
14.2 与线程进行数据的交互
14.3 线程嵌套
14.3.1 单层嵌套
14.3.2 在多个子线程中进行数据的交互
14.4 线程中可用的变量、函数与类
14.5 适用场合
14.6 SharedWorker
14.6.1 基础知识
14.6.2 实现前台页面与后台线程之间的通信
14.6.3 定义页面与共享的后台线程开始通信时的处理
14.6.4 SharedWorker的使用示例
第15章?获取地理位置信息
15.1 Geolocation API的基本知识
15.1.1 取得当前地理位置
15.1.2 持续监视当前地理位置的信息
15.1.3 停止获取当前用户的地理位置信息
15.2 position对象
15.3 在页面上使用google地图
第16章?拖放API与通知API
16.1 拖放API
16.1.1 实现拖放的步骤
16.1.2 DataTransfer对象的属性与方法
16.1.3 设定拖放时的视觉效果
16.1.4 自定义拖放图标
16.2 通知API
16.2.1 通知API的基础知识
16.2.2 通知API的代码使用示例
第17章?其他API
17.1 Page Visibility API
17.1.1 Page Visibility API概述
17.1.2 Page Visibility API的使用场合
17.1.3 实现Page Visibility API
17.2 Fullscreen API
17.2.1 Fullscreen API概述
17.2.2 实现Fullscreen API
17.2.3 Fullscreen API代码使用示例
17.3 鼠标指针锁定API
17.3.1 鼠标指针锁定API概述
17.3.2 鼠标指针锁定API代码使用示例
17.4 requestAnimationFrame
17.4.1 requestAnimationFrame概述
17.4.2 requestAnimFrame代码使用示例
17.5 Mutation Observer
17.6 JavaScript Promise
17.6.1 Promise对象的基本概念
17.6.2 创建Promise对象
17.6.3 链式调用Promise对象的then方法
17.6.4 将异步操作队列化
17.6.5 异常处理
17.6.6 创建序列
17.6.7 执行并行处理
17.7 Beacon API
17.7.1 Beacon API概述
17.7.2 Beacon API的使用方法
下册
第18章 CSS 3概述
18.1 概要介绍
18.1.1 CSS 3是什么
18.1.2 CSS 3的历史
18.2 使用CSS 3能做什么
18.2.1 模块与模块化结构
18.2.2 一个简单的CSS 3示例
第19章 选择器
19.1 选择器概述
19.2 属性选择器
19.2.1 属性选择器概述
19.2.2 CSS 3中的属性选择器
19.2.3 灵活运用属性选择器
19.3 结构性伪类选择器
19.3.1 CSS中的伪类选择器及伪元素
19.3.2 选择器root、not、empty和target
19.3.3 选择器f?irst-child、last-child、nth-child和nth-last-child
19.3.4 选择器nth-of-type和nth-last-of-type
19.3.5 循环使用样式
19.3.6 only-child选择器
19.4 UI元素状态伪类选择器
19.4.1 伪类选择器E:hover、E:active和E:focus
19.4.2 伪类选择器E:enabled与E:disabled
19.4.3 伪类选择器E:read-only与E:read-write
19.4.4 伪类选择器E:checked、E:default和E:indeterminate
19.4.5 伪类选择器E::selection
19.4.6 伪类选择器E:invalid与E:valid
19.4.7 伪类选择器E:required与E:optional
19.4.8 伪类选择器E:in-range与E:out-of-range
19.5 通用兄弟元素选择器
第20章 使用选择器在页面中插入内容
20.1 使用选择器来插入文字
20.1.1 使用选择器来插入内容
20.1.2 指定个别元素不进行插入
20.2 插入图像文件
20.2.1 在标题前插入图像文件
20.2.2 插入图像文件的好处
20.2.3 将alt属性的值作为图像的标题来显示
20.3 使用content属性来插入项目编号
20.3.1 在多个标题前加上连续编号
20.3.2 在项目编号中追加文字
20.3.3 指定编号的样式
20.3.4 指定编号的种类
20.3.5 编号嵌套
20.3.6 中编号中嵌入大编号
20.3.7 在字符串两边添加嵌套文字符号
第21章 文字与字体相关样式
21.1 给文字添加阴影——text-shadow属性
21.1.1 text-shadow属性的使用方法
21.1.2 位移距离
21.1.3 阴影的模糊半径
21.1.4 阴影的颜色
21.1.5 指定多个阴影
21.2 让文本自动换行——word-break属性
21.2.1 依靠浏览器让文本自动换行
21.2.2 指定自动换行的处理方法
21.3 让长单词与URL地址自动换行——word-wrap属性
21.4 使用服务器端字体——Web Font与@font-face属性
21.4.1 在网页上显示服务器端字体
21.4.2 定义斜体或粗体字体
21.4.3 显示客户端本地的字体
21.4.4 属性值的指定
21.5 修改字体种类而保持字体尺寸不变——font-size-adjust属性
21.5.1 字体不同导致文字大小的不同
21.5.2 font-size-adjust属性的使用方法
21.5.3 浏览器对于aspect值的计算方法
21.5.4 font-size-adjust属性的使用示例
21.6 使用rem单位定义字体大小
第22章 盒相关样式
22.1 盒的类型
22.1.1 盒的基本类型
22.1.2 inline-block类型
22.1.3 inline-table类型
22.1.4 list-item类型
22.1.5 run-in类型与compact类型
22.1.6 表格相关类型
22.1.7 none类型
22.1.8 各种浏览器对于各种盒类型的支持情况
22.2 对于盒中容纳不下的内容的显示
22.2.1 overf?low属性
22.2.2 overf?low-x属性与overf?low-y属性
22.2.3 text-overf?low属性
22.3 对盒使用阴影
22.3.1 box-shadow属性的使用方法
22.3.2 将参数设定为0
22.3.3 创建盒内阴影
22.3.4 对盒内子元素使用阴影
22.3.5 对第一个文字或第一行使用阴影
22.3.6 对表格及单元格使用阴影
22.4 指定针对元素的宽度与高度的计算方法
22.4.1 box-sizing属性
22.4.2 为什么要使用box-sizing属性
第23章 背景与边框相关样式
23.1 与背景相关的新增属性
23.1.1 指定背景的显示范围——background-clip属性
23.1.2 指定背景图像的绘制起点——background-origin属性
23.1.3 指定背景图像的尺寸——background-size属性
23.1.4 新增的用于平铺背景图像的选项——space与round
23.2 在一个元素中显示多个背景图像
23.3 使用渐变色背景
23.3.1 绘制线性渐变
23.3.2 绘制放射性渐变
23.4 圆角边框的绘制
23.4.1 border-radius属性
23.4.2 在border-radius属性中指定两个半径
23.4.3 不显示边框的时候
23.4.4 修改边框种类的时候
23.4.5 绘制四个角不同半径的圆角边框
23.5 使用图像边框
23.5.1 border-image属性
23.5.2 border-image属性的最简单的使用方法
23.5.3 使用border-image属性来指定边框宽度
23.5.4 指定4条边中图像的显示方法
23.5.5 使用背景图像
第24章 CSS 3中的变形处理
24.1 transform功能的基础知识
24.1.1 如何使用transform功能
24.1.2 transform功能的分类
24.2 对一个元素使用多种变形
24.2.1 对一个元素使用多种变形的方法
24.2.2 指定变形的基准点
24.3 使用3D变形功能
24.3.1 3D变形功能概述
24.3.2 实现3D变形功能
24.4 变形矩阵
24.4.1 矩阵概述
24.4.2 变形与坐标系统
24.4.3 计算2D变形
24.4.4 计算3D变形
24.4.5 通过矩阵执行多重变形处理
第25章 CSS 3中的动画功能
25.1 Transitions功能
25.1.1 Transitions功能的使用方法
25.1.2 使用Transitions功能同时平滑过渡多个属性值
25.2 Animations功能
25.2.1 Animations功能的使用方法
25.2.2 实现多个属性值同时改变的动画
25.2.3 实现动画的方法
25.2.4 实现网页的淡入效果
第26章 布局相关样式
26.1 多栏布局
26.1.1 使用f?loat属性或position属性的缺点
26.1.2 使用多栏布局方式
26.2 盒布局
26.2.1 使用f?loat属性或position属性时的缺点
26.2.2 使用盒布局
26.2.3 盒布局与多栏布局的区别
26.3 弹性盒布局
26.3.1 对多个元素使用f?lex属性
26.3.2 改变元素的显示顺序
26.3.3 改变元素的排列方向
26.3.4 元素宽度与高度的自适应
26.3.5 使用弹性盒布局来消除空白
26.3.6 对多个元素使用f?lex属性
26.3.7 控制换行方式
26.3.8 指定水平方向与垂直方向的对齐方式
26.4 calc方法
26.4.1 calc方法概述
26.4.2 calc方法使用示例
第27章 Media Queries相关样式
27.1 根据浏览器的窗口大小来选择使用不同的样式
27.2 在iPhone中的显示
27.3 Media Queries的使用方法
第28章 CSS 3的其他重要样式和属性
28.1 颜色相关样式
28.1.1 利用alpha通道来设定颜色
28.1.2 alpha通道与opacity属性的区别
28.1.3 指定颜色值为transparent
28.2 用户界面相关样式
28.2.1 轮廓相关样式
28.2.2 resize属性
28.3 使用initial属性值取消对元素的样式指定
28.3.1 取消对元素的样式指定
28.3.2 使用initial属性值并不等于取消样式设定的特例
28.4 实现CSS 3中的滤镜特效
28.4.1 滤镜特效概述
28.4.2 实现滤镜特效
第29章 综合实例
29.1 实例1：使用HTML 5中新增结构元素来构建网页
29.1.1 组织网页结构
29.1.2 构建网页标题
29.1.3 构建侧边栏
29.1.4 构建主体内容
29.1.5 构建版权信息
29.2 实例2：使用HTML 5+CSS 3来构建Web应用程序
29.2.1 HTML 5页面代码分析
29.2.2 CSS 3样式代码分析
29.2.3 JavaScript脚本代码分析