HTML 5 + CSS 3网页设计经典范例(附光盘)

01 HTML 5概述1

1.1 HTML 5介绍1

1.2 HTML 5的发展历程2

1.3 认识HTML 53

1.3.1 兼容性3

1.3.2 用户优先和效率3

1.3.3 化繁为简4

1.3.4 通用访问4

1.4 HTML 5的新增功能5

1.4.1 字符集和DOCTYPE的改进5

1.4.2 新元素5

1.4.3 标准改进6

1.4.4 使用Selectors API简化选取操作6

1.4.5 window.JSON8

1.5 使用HTML 5的优势9

1.6 HTML 5的未来发展9

1.6.1 Internet Explorer 89

1.6.2 众多全新浏览器的支持9

1.7 本章小结10

02 HTML 5与HTML4的区别11

2.1 语法上的差异11

2.1.1 HTML 5的语法变化11

2.1.2 HTML 5中的标记方法12

2.1.3 HTML 5与旧版本的兼容性12

2.2 元素上的差异13

2.2.1 HTML 5中新增加的元素13

2.2.2 HTML 5中废除的元素19

2.3 属性上的差异19

2.3.1 HTML 5中新增加的属性元素19

2.3.2 HTML 5中废除的属性20

2.3.3 全局属性20

2.4 本章小结22

03 HTML 5的结构23

3.1 新的主体结构元素23

3.1.1 article元素23

3.1.2 section元素24

3.1.3 nav元素25

3.1.4 aside元素27

3.1.5 time元素与微格式28

3.1.6 pubdate属性29

3.2 新的非主体结构元素30

3.2.1 header元素30

3.2.2 hgroup元素30

3.2.3 footer元素31

3.2.4 address元素32

3.3 HTML 5的结构阐述32

3.3.1 HTML 5大纲33

3.3.2 对新的结构元素使用样式35

3.4 本章小结36

04 绘图功能的实现37

4.1 canvas API概述37

4.1.1 canvas是什么37

4.1.2 canvas的历史38

4.1.3 canvas坐标38

4.1.4 什么情况下不使用canvas39

4.1.5 替代内容39

4.1.6 css和canvas39

4.1.7 浏览器对canvas的支持39

4.1.8 canvas的核心Context40

4.2 如何使用canvas API40

4.2.1 检测浏览器是否支持40

4.2.2 在页面中加入canvas41

4.2.3 上机操作――绘制矩形41

4.3 应用canvas API绘制曲线路径45

4.3.1 路径45

4.3.2 上机操作――描边样式46

4.3.3 上机操作――对矩形填充样式47

4.3.4 上机操作――绘制曲线48

4.4 应用canvas API绘制图像49

4.4.1 上机操作――在canvas中插入图像49

4.4.2 上机操作――绘制渐变图像50

4.4.3 上机操作――缩放canvas对象52

4.4.4 上机操作――canvas变换53

4.5 canvas文本应用55

4.5.1 上机操作――canvas 文本绘制55

4.5.2 上机操作――应用阴影56

4.5.3 上机操作――像素数据57

4.6 实例精讲――动态时钟58

4.7 本章小结62

05 网络上的视频和音频应用63

5.1 HTML 5 中audio和video概述63

5.1.1 视频容器63

5.1.2 音频和视频编解码器65

5.1.3 HTML 5音视频的问题67

5.1.4 哪些浏览器支持Audio和Video元素67

5.1.5 HTML 5音视频支持格式68

5.2 HTML 5中audio和video元素的应用69

5.2.1 检测浏览器是否支持69

5.2.2 audio元素70

5.2.3 上机操作――使用audio元素72

5.2.4 video元素72

5.2.5 上机操作――使用video元素74

5.3 实例精讲――在HTML 4中实现音频和视频的播放75

5.4 实例精讲――在HTML 5中实现音频和视频的播放78

5.5 本章小结82

06 表单的应用83

6.1 HTML 5 Forms概述 83

6.1.1 Forms和XForms83

6.1.2 HTML 5 Forms的新特性84

6.1.3 浏览器对HTML 5 Forms的支持情况84

6.1.4 输入型控件86

6.2 表单新特性与函数86

6.2.1 新增属性87

6.2.2 大幅度地增加与改良input元素的种类90

6.2.3 上机操作――对新的表单元素使用样式93

6.2.4 上机操作――追加output元素95

6.3 验证表单95

6.3.1 验证状态对象95

6.3.2 上机操作――自动验证96

6.3.3 上机操作――显示验证97

6.3.4 取消验证98

6.3.5 上机操作――自定义错误信息98

6.4 实例精讲――HTML 5中的Forms应用99

6.5 本章小结102

07 全新的文件应用103

7.1 新增的页面元素103

7.1.1 上机操作――figure元素Forms103

7.1.2 上机操作――figcaption元素Forms104

7.1.3 上机操作――details元素Forms104

7.1.4 上机操作――mark元素Forms105

7.1.5 上机操作――progress元素Forms105

7.1.6 上机操作――meter元素Forms106

7.1.7 上机操作――menu元素Forms107

7.1.8 上机操作――command元素Forms108

7.2 增强的页面元素109

7.2.1 上机操作――ol列表109

7.2.2 上机操作――dl列表111

7.2.3 上机操作――cite元素111

7.2.4 上机操作――small元素112

7.3 文件API112

7.3.1 filelist对象与file对象112

7.3.2 blob对象113

7.3.3 FileReader接口113

7.4 拖放API115

7.4.1 实现拖放API的过程115

7.4.2 dataTransfer对象的属性与方法116

7.4.3 上机操作――设置拖放时的

视觉效果116

7.4.4 上机操作――自定义拖放图标118

7.5 实例精讲――在HTML 5中实现文件拖放120

7.6 本章小结123

08 地理位置信息处理125

8.1 关于地理位置信息125

8.1.1 经度和纬度坐标125

8.1.2 IP地址定位数据126

8.1.3 GPS地理定位数据126

8.1.4 Wi-Fi地理定位数据126

8.1.5 手机地理定位数据126

8.1.6 用户自定义的地理定位127

8.2 浏览器对Geolocation的支持127

8.2.1 Geolocation API概述127

8.2.2 HTML 5 Geolocation的浏览器支持情况130

8.3 隐私的处理131

8.3.1 应用隐私保护机制131

8.3.2 处理位置信息132

8.4 使用Geolocation API132

8.4.1 检测浏览器是否支持132

8.4.2 位置请求133

8.5 实例精讲――在网页中使用电子地图135

8.6 本章小结136

09 web本地存储应用137

9.1 Web Storage概述137

9.1.1 Web Storage介绍137

9.1.2 上机操作――简易的Web留言本138

9.1.3 上机操作――简单的数据库应用142

9.2 Web Storage的浏览器支持情况145

9.3 使用Web Storage API145

9.3.1 检测浏览器的支持情况145

9.3.2 上机操作――设置和获取数据147

9.3.3 封堵数据泄露148

9.3.4 localStorage与sessionStorage148

9.3.5 探索Web Storage148

9.4 本地数据库149

9.4.1 什么是本地数据库149

9.4.2 用executesql来执行查询的实现方法150

9.4.3 上机操作――使用数据库实现网页留言150

9.4.4 transaction方法155

9.5 本章小结156

10 离线Web应用157

10.1 离线Web概述157

10.1.1 离线Web介绍157

10.1.2 离线Web应用的浏览器支持情况 158

10.2 使用离线Web158

10.2.1 构建简单的离线应用程序158

10.2.2 支持离线行为159

10.2.3 mannifest文件介绍 159

10.2.4 上机操作――applicationCache对象161

10.3 实例精