第1篇 技术概览

第1章 HTML5标准（教学视频：46分钟）

1.1 HTML5介绍1.1.1HTML5的历史背景

1.1.2 HTML5的现状

1.1.3 良好的设计理念

1.1.4 新增的HTML5原生功能

1.1.5 HTML5带来的好处

1.2 全新的HTML5

1.2.1 从“头”说起

1.2.2 明确简洁的结构

1.2.3 新增的元素

1.2.4 废弃的元素

1.2.5 全新的选择器

1.2.6 脚本日志和调试

1.3 HTML5的未来发展

1.4 小结

1.5 习题

第2章 CSS3层叠样式表（教学视频：25分钟）

2.1 CSS3简介2.1.1CSS3的历史背景

2.1.2 CSS3的发展现状

2.1.3 CSS3新特性预览

2.2 增强的选择器功能

2.2.1 元素选择符和关系选择符

2.2.2 属性选择符

2.2.3 结构伪类选择符

2.2.4 UI元素状态伪类选择符

2.2.5 伪元素选择符

2.3 小结

2.4 习题

第2篇 基于CSS3的Web界面设计实战

第3章 文本、背景、边框不再单调（教学视频：96分钟）

3.1 文本与字体

3.1.1 多样化的文本阴影——text-shadow属性

3.1.2 溢出文本处理——text-overflow属性

3.1.3 对齐的文字才好看——word-wrap和word-break属性

3.1.4 使用服务器端的字体规则

3.1.5 实验室：丰富的文字样式

3.2 色彩模式和不透明度

3.2.1 不再为配色发愁——HSL色彩模式

3.2.2 含不透明度的——HSLA色彩模式

3.2.3 含不透明度的——RGBA色彩模式

3.2.4 不透明度——opacity属性

3.2.5 实验室：半透明的遮蔽层

3.3 背景

3.3.1 元素里定义多个背景图片

3.3.2 指定背景的原点位置

3.3.3 指定背景的显示区域

3.3.4 指定背景图像的大小

3.3.5 实验室：设计信纸的效果

3.4 边框

3.4.1 设计圆角边框——border-radius属性

3.4.2 设计图像边框——border-image属性

3.4.3 设计多色边框——border-color属性

3.4.4 实验室：使用新技术设计网页

3.5 小结

3.6 习题

第4章 灵活的盒布局和界面设计（教学视频：69分钟）

4.1 灵活的盒布局

4.1.1 开启盒布局

4.1.2 元素的布局方向——box-orient属性

4.1.3 元素的布局顺序——box-direction属性

4.1.4 调整元素的位置——box-ordinal-group属性

4.1.5 弹性空间分配——box-flex属性

4.1.6 元素的对其方式——box-pack和box-align属性

4.1.7 实验室：使用新型盒布局设计网页

4.2 增强的盒模型

4.2.1 盒子阴影——box-shadow属性

4.2.2 盒子尺寸的计算方法——box-sizing属性

4.2.3 盒子溢出内容处理——overflow-x和overflow-y属性

4.2.4 实验室：设计网站服务条款页面

4.3 增强的用户界面设计

4.3.1 允许用户改变尺寸——resize属性

4.3.2 定义外轮廓线——outline属性

4.3.3 伪装的元素——appearance属性

4.3.4 为元素添加内容——content属性

4.3.5 实验室：设计一个省份选择盘

4.4 小结

4.5 习题

第5章 你一直期待的多列布局（教学视频：21分钟）

5.1 多列布局基础

5.1.1 多列属性columns

5.1.2 列宽属性column-width

5.1.3 列数属性column-count

5.1.4 列间距属性column-gap

5.1.5 定义列分隔线——column-rule属性

5.1.6 定义横跨所有列——column-span属性

5.2 实验室：模仿杂志的多列版式

5.3 小结

5.4 习题

第6章 酷炫的动画和渐变（教学视频：82分钟）

6.1 CSS 3变形基础

6.1.1 元素的变形——transform属性

6.1.2 旋转

6.1.3 缩放和翻转

6.1.4 移动

6.1.5 倾斜

6.1.6 矩阵变形

6.1.7 同时使用多个变形函数

6.1.8 定义变形原点——transform-origin属性

6.1.9 实验室：设计图片画廊

6.2 CSS 3过渡效果

6.2.1 实现过渡效果——transition属性

6.2.2 指定过渡的属性——transition-property属性

6.2.3 指定过渡的时间——transition-duration属性

6.2.4 指定过渡延迟时间——transition-delay属性

6.2.5 指定过渡方式——transition-timing-function属性

6.2.6 实验室：制作滑动的菜单

6.3 CSS 3动画设计

6.3.1 关键帧动画——@keyframes规则

6.3.2 动画的实现——animation属性

6.3.3 实验室：永不停止的风车

6.4 CSS 3渐变设计

6.4.1 CSS线性渐变

6.4.2 CSS径向渐变

6.4.3 实验室：设计渐变的按钮

6.5 小结

6.6 习题

第7章 支持多种设备的样式表方案（教学视频：15分钟）

7.1 媒体查询

7.1.1 @media规则的语法

7.1.2 使用Media Queries链接外部样式表文件

7.2 实验室：自适应屏幕的样式表方案

7.3 小结

7.4 习题

第3篇 基于HTML 5的Web应用开发实战

第8章 绘制图形如此简单（教学视频：78分钟）

8.1 Canvas简介

8.2 Canvas基本知识

8.2.1 构建Canvas元素

8.2.2 使用javaScript实现绘图的流程

8.3 使用Canvas绘图

8.3.1 绘制矩形

8.3.2 使用路径

8.3.3 图形组合

8.3.4 绘制曲线

8.3.5 使用图像

8.3.6 剪裁区域

8.3.7 绘制渐变

8.3.8 描边属性

8.3.9 模式

8.3.10 变换

8.3.11 使用文本

8.3.12 阴影效果

8.3.13 状态的保存与恢复

8.3.14 操作像素

8.4 实验室：在Canvas中实现动画

8.5 小结

8.6 习题

第9章 便捷的音频和视频（教学视频：44分钟）

9.1 audio和video基础知识

9.1.1 在线多媒体的发展

9.1.2 多媒体术语

9.1.3 HTML 5多媒体文件格式

9.1.4 功能缺陷及未来趋势

9.2 使用HTML 5的audio和video元素

9.2.1 在网页中使用audio和video

9.2.2 audio和video的特性和属性

9.2.3 audio和video的方法

9.2.4 audio和video的事件

9.3 实验室：自定义播放工具条

9.4 小结

9.5 习题

第10章 不可思议的表单（教学视频：59分钟）

10.1 HTML 5表单概述

10.1.1 HTML表单的进化

10.1.2 当前的支持情况

10.2 新增表单输入类型

10.2.1 新增的表单输入类型

10.2.2 面向未来的新型表单

10.3 新增表单特性及元素

10.4 表单验证API

10.4.1 与验证有关的表单元素特性

10.4.2 表单验证的属性

10.4.3 ValidityState对象

10.4.4 表单验证的方法

10.4.5 表单验证的事件

10.5 实验室：用户注册页面

10.6 小结

10.7 习题

第11章 可触到的拖放功能（教学视频：39分钟）

11.1 拖放API

11.1.1 新增的draggable特性

11.1.2 新增的鼠标拖放事件

11.1.3 DataTransfer对象

11.1.4 实验室：拖放元素的内容

11.2 文件API

11.2.1 新增的标签特性

11.2.2 FileList对象与File对象

11.2.3 Blob对象

11.2.4 FileReader接口

11.3 实验室：把图片拖入浏览器

11.4 小结

11.5 习题

第12章 本地存储让你的应用更加高效（教学视频：37分钟）

12.1 本地存储对象——Web Storage

12.1.1 Web Storage简介

12.1.2 localStorage和sessionStorage

12.1.3 设置和获取Storage数据

12.1.4 Storage API的属性和方法

12.1.5 存储JSON对象的数据

12.1.6 Storage API的事件

12.1.7 实验室：在两个窗口中实现通信

12.2 本地数据库——Web SQL Database

12.2.1 Web SQL Database简介

12.2.2 操作Web SQL数据库

12.2.3 实验室：基本的数据库操作示例

12.3 小结

12.4 习题

第13章 别开生面的离线应用（教学视频：33分钟）

13.1 Web离线应用缓存

13.2 缓存清单文件manifest

13.3 检测浏览器的网络状态

13.4 应用缓存接口applicationCache

13.5 实验室：图片画廊的离线应用

13.6 小结

13.7 习题

第14章 安全的跨源通信（教学视频：37分钟）

14.1 跨文档消息传输

14.1.1 跨文档消息传输的实现

14.1.2 Web源安全

14.1.3 使用postMessage接口

14.1.4 消息事件接口MessageEvent

14.1.5 实验室：跨文档消息传输示例

14.2 跨源请求——XMLHttpRequestLevel 2

14.2.1 改进的XmlHttpRequest对象

14.2.2 XMLHttpRequestLevel 2规范说明

14.2.3 使用新的XMLHttpRequest对象

14.2.4 实验室：跨源请求示例

14.3 小结

14.4 习题

第15章 强大的WebSocket双向通信（教学视频：23分钟）

第16章 Web背后——看不见的多线程（教学视频：34分钟）

第17章 我知道你在哪里—地理位置API（教学视频：21分钟）

　　HTML5和CSS3代表了下一代的HTML和CSS技术，它们必将推动互联网的快速发展。无论是移动开发，还是云计算，HTML5担负着不可替代的使命，已经延伸到各个应用领域。对于界面而言，CSS3则是首选技术。

　　目前，当HTML5和CSS3的相关规范还在不断完善时，各大浏览器厂商就已经紧锣密鼓地完善浏览器的功能，以便更好地支持最新的规范。由此可以看出，各大厂商对这二者是多么重视。也许有人觉得，HTML5和CSS3尚未成熟，并且很多用户仍然在使用早期的浏览器，所以不适合进行大规模开发和应用。但其实在HTML5的规范中，已经考虑了过渡性的问题，它不但有超强的兼容性，还以一种引导的方式引导用户升级浏览器，可以预见，在不久的将来，它必将开创一个新的互联网时代，并将成为主流的技术之一。

　　沿着这个发展趋势，不久的将来，Web前端开发的含金量会越来越高，门槛也会越来越高，Web前端技术必将进入一个崭新的时代。而正是HTML5和CSS3开启了这扇大门。对于任何一个想从事或者正在从事Web前端开发的人员而言，HTML5和CSS3已经是必须掌握的前沿技术了。基于此，作者总结了已经公布的HTML5和CSS3的相关技术规范和标准，并结合自己多年的Web前端开发经验，写成了本书，希望为想学习HTML5和CSS3技术的读者提供必要的帮助。另外，HTML5和CSS3仍然在发展之中，很多人对此知之甚少，甚至有很多误解或偏见，希望通过本书以正视听，帮助有志之士和好学之人进入这个崭新的领域。

　　本书特色

　　1．提供配套的多媒体教学视频

　　本书中的重点内容都专门录制了配套的多媒体视频，以帮助读者更加直观而高效地学习，从而达到事半功倍的效果。

　　2．内容架构独特、科学，构思巧妙、新颖

　　本书每章都集中探讨一组可以通过HTML5和CSS3解决的特定问题，而区别于传统图书中将HTML5和CSS3技术机械罗列。通过这种主题归纳的方法，可以让读者感受实际的网页开发是如何进行的，从而提高实战水平。

　　3．内容新颖，纳入了最新的技术规范

　　本书以当前Web开发中最热门的HTML5和CSS3为写作版本，写作时查阅了大量官方英文资料中的HTML5和CSS3最新发布的规范和标准，并纳入本书内容，让本书得以展示最新技术的魅力。

　　4．内容全面、系统

　　本书内容涉及HTML5和CSS3从Web界面设计到Web应用开发的各种技术，涵盖了Web前端设计需要的方方面面技术。掌握这些技术，便可以胜任相关的开发工作。

　　5．难度适中，讲解由浅入深，学习梯度科学

　　本书内容遵循技术概览→Web界面开发→Web应用开发的学习梯度，讲解由浅入深，由易到难，逐层推进，学习梯度平滑，读者容易掌握。阅读本书，读者会有一种轻轻松松的感觉。

　　6．以实例讲解，用插图说话，提高实战技能

　　本书各章的重点内容都穿插了大量实例进行讲解，引导读者学习，帮助读者更好地理解相关技术要点，快速掌握实际开发中的各种实战技能。另外，本书在讲解时，尽可能提供丰富的插图，这样可以更加直观地理解知识，学习起来也更加快捷。

　　7．娓娓道来，轻松愉快，趣味性强

　　本书采用幽默和风趣的讲述方式来讲解，娓娓道来，阅读起来轻松愉快。书中的每句话都力求通俗易懂，避免那种云山雾罩式的讲解。这种活泼的风格，可以激发读者的学习兴趣，达到更好的学习效果。

　　内容概览

　　第1篇技术概览（第1章、第2章）

　　本篇简单介绍了HTML5和CSS3的发展背景及发展现状，并介绍了相关的基础知识，其中重点讲解了选择器的功能。

　　第2篇基于CSS3的Web界面设计实战（第3~7章）

　　本篇主要介绍了基于CSS3的Web页面设计，涉及文字、背景、边框、盒布局、多列布局、动画、渐变、支持多种设备的样式表等内容，尤其重点介绍了CSS3在Web页面设计方面新增的很多有用的功能。学完本篇，便可以设计非常精美的网页了，如阴影、圆角等设计将变得非常简单。

　　第3篇基于HTML5的Web应用开发实战（第8~17章）

　　本篇主要介绍基于HTML5的Web应用开发，尤其重点介绍HTML5新增的Web应用功能，主要包括绘图、多媒体、表单、拖放、消息传递、本地存储、离线应用、WebSocket通信、多线程、地理位置等。本篇的每章都是一个完整的模块，掌握了这些内容，可以开发比较复杂的Web应用。

　　光盘内容

　　*本书重点内容的教学视频；

　　*本书实例涉及的源代码。

　　对读者的建议

　　*学习Web前端开发，首先要从整体上了解Web前端涉及的东西，然后逐一掌握各种技术，一一击破。

　　*本书提供了独特的内容架构，建议新手从头开始顺次逐章阅读，尽量不要跳跃。有基础的人可以根据自己的需要有选择性地阅读。

　　*本书每章讲解的主题都结合了实例，对于这些例子，一定要亲自动手做一做，才能理解得更深刻。

　　*对于重点、难点内容，建议读者结合本书的配套教学视频阅读，效果更佳。

　　本书读者对象

　　*Web前端开发人员；

　　*Web设计与开发爱好者；

　　*网页设计与开发人员；

　　*各大中专院校的学生；

　　*培训班的学员。