第1章 HTML5＋CSS3学习准备 1
1.1 学习准备 1
1.1.1 选择合适的浏览器 1
1.1.2 选择合适的开发工具 2
1.2 认识HTML5 2
1.2.1 HTML5语法 2
1.2.2 新增与废除的元素和属性 3
1.2.3 全局属性 8
1.2.4 HTML5中新增的API 11
1.3 本章小结 11
第2章 HTML元素、属性与结构 12
2.1 HTML元素 12
2.1.1 HTML元素概述 12
2.1.2 HTML元素的语法 13
2.1.3 HTML元素的嵌套 13
2.2 HTML5属性 14
2.2.1 属性的基本使用方法 14
2.2.2 HTML5全局属性 15
2.3 新增的主体结构元素 20
2.3.1 article元素 20
2.3.2 section元素 21
2.3.3 nav元素 22
2.3.4 aside元素 22
2.3.5 time元素 24
2.4 新增的非主体结构元素 25
2.4.1 header元素 25
2.4.2 hgroup元素 25
2.4.3 footer元素 26
2.4.4 address元素 26
2.5 HTML5结构 27
2.5.1 文档结构大纲 27
2.5.2 内容区块的编排方式 27
2.5.3 标题分级 28
2.6 本章小结 28
第3章 JavaScript基础知识 29
3.1 JavaScript简介 29
3.1.1 什么是JavaScript 29
3.1.2 JavaScript的特点 29
3.1.3 JavaScript的组成 30
3.1.4 JavaScript基本结构 31
3.1.5 JavaScript执行原理 31
3.2 在网页中引入JavaScript的方式 31
3.2.1 使用〈script〉标签 31
3.2.2 使用外部JavaScript文件 32
3.2.3 直接在HTML标签中使用 33
3.3 数据类型和变量 33
3.3.1 变量 33
3.3.2 Number 33
3.3.3 字符串 35
3.3.4 布尔值 36
3.3.5 比较运算符 36
3.3.6 数组 36
3.3.7 对象 37
3.4 条件判断 38
3.4.1 if语句 38
3.4.2 if…else语句 38
3.4.3 if…else if…else语句 39
3.4.4 switch语句 39
3.5 循环语句 40
3.5.1 for循环 40
3.5.2 for…in循环 41
3.5.3 while循环 41
3.5.4 do…while循环 42
3.6 函数定义和调用 43
3.6.1 定义函数 43
3.6.2 调用函数 43
3.7 本章小结 44
第4章 ES6基础知识 45
4.1 准备测试环境 45
4.2 声明变量let和const 48
4.2.1 let命令 48
4.2.2 块级作用域 49
4.2.3 先声明后使用 50
4.2.4 重复变量名 50
4.2.5 实例：面试题 51
4.3 模板字符串 52
4.3.1 字符串格式化 52
4.3.2 多行字符串 52
4.3.3 运算与函数调用 53
4.3.4 includes（）、startsWith（）和endsWith（） 54
4.3.5 repeat（） 55
4.4 箭头函数 55
4.5 解构赋值 56
4.5.1 对象解构赋值 57
4.5.2 数组解构赋值 57
4.5.3 字符串解构赋值 58
4.6 Set和Map数据结构 58
4.6.1 Set数据结构 58
4.6.2 Set的基本操作 59
4.6.3 扩展运算符 61
4.6.4 Map数据结构 62
4.6.5 Map遍历方法 63
4.7 Promise对象 64
4.7.1 Promise简介 64
4.7.2 创建Promise对象 65
4.7.3 then（） 65
4.7.4 catch（） 66
4.7.5 Promise.all（） 66
4.7.6 Promise.race（） 67
4.7.7 Promise.resolve（） 67
4.7.8 Promise.reject（） 68
4.8 for…of循环 68
4.9 Generator函数 69
4.10 async函数 70
4.11 class 71
4.12 实例：下馆子吃饭 72
4.13 本章小结 73
第5章 HTML5音频和视频 74
5.1 Web视频的标准与格式 74
5.2 video/audio元素概述 75
5.3 检测浏览器是否支持HTML5视频 75
5.4 实例：在HTML5中显示视频/音频 77
5.5 video元素与audio元素详解 78
5.5.1 video/audio属性 78
5.5.2 video/audio方法 79
5.5.3 video/audio事件 81
5.6 本章小结 83
第6章 HTML5 Canvas 84
6.1 canvas基础入门 84
6.1.1 什么是canvas 84
6.1.2 实例：在HTML5页面中添加canvas元素 84
6.1.3 实例：绘制一个蓝色矩形 85
6.2 绘制基本线条 86
6.2.1 实例：绘制直线 87
6.2.2 实例：绘制二次曲线 87
6.2.3 实例：绘制贝塞尔曲线 89
6.2.4 实例：绘制圆弧 89
6.3 绘制简单形状 90
6.3.1 实例：绘制圆形 90
6.3.2 实例：绘制三角形 91
6.3.3 实例：绘制圆角矩形 92
6.3.4 实例：绘制自定义图形 94
6.4 绘制渐变 95
6.4.1 实例：绘制线性渐变 95
6.4.2 实例：绘制径向渐变 96
6.5 图形组合 97
6.5.1 实例：绘制阴影 97
6.5.2 实例：透明效果 99
6.6 使用图像 100
6.6.1 实例：插入图像 100
6.6.2 实例：平铺图像 101
6.6.3 实例：裁剪图像 102
6.6.4 实例：像素级操作 103
6.7 绘制文字 104
6.7.1 实例：控制文本的字体、大小和样式 104
6.7.2 实例：控制文本的颜色 106
6.7.3 实例：描绘文本的边缘 107
6.7.4 实例：设置文本对齐方式 108
6.8 图像数据与URL 109
6.8.1 存储图像数据 109
6.8.2 将彩色转为灰度 110
6.8.3 图像数据URL 111
6.8.4 将绘制的图形保存为图像文件 111
6.9 用canvas实现动画效果 112
6.9.1 实例：清除canvas的内容 113
6.9.2 实例：创建动画 113
6.9.3 动画的开始与停止 115
6.10 实战演练 115
6.11 本章小结 120
第7章 HTML5 SVG 121
7.1 SVG简介 121
7.1.1 什么是SVG 121
7.1.2 SVG有哪些优势 121
7.2 HTML5中的SVG 122
7.2.1 实例：将SVG直接嵌入HTML5页面 122
7.2.2 实例：绘制简单的形状 123
7.2.3 实例：复用内容 124
7.2.4 实例：图形阴影 125
7.2.5 实例：图形渐变 126
7.2.6 实例：绘制自由路径 127
7.3 画布与SVG的比较 129
7.4 本章小结 129
第8章 Forms API 130
8.1 新增的Input输入类型 130
8.1.1 email类型 130
8.1.2 url类型 131
8.1.3 number类型 132
8.1.4 range类型 132
8.1.5 date pickers类型 133
8.1.6 search类型 134
8.1.7 color类型 134
8.2 新增的表单元素 135
8.2.1 datalist元素 135
8.2.2 keygen元素 136
8.2.3 output元素 137
8.3 新增的form属性 137
8.3.1 autocomplete属性 138
8.3.2 novalidate属性 138
8.4 新增的input属性 139
8.4.1 autocomplete属性 139
8.4.2 autofocus属性 139
8.4.3 form属性 139
8.4.4 form overrides属性 139
8.4.5 height和width属性 140
8.4.6 list属性 140
8.4.7 min、max和step属性 140
8.4.8 multiple属性 141
8.4.9 pattern属性 141
8.4.10 placeholder属性 141
8.4.11 required属性 141
8.5 本章小结 142
第9章 File API 143
9.1 Blob对象 143
9.2 File对象与Filelist对象 144
9.3 FileReader对象 145
9.3.1 FileReader对象的方法 145
9.3.2 FileReader对象的事件 146
9.3.3 实例：以二进制方式读取文件 146
9.3.4 实例：以文本方式读取文件 147
9.3.5 实例：以DataURL方式读取文件 148
9.4 FileSystem对象 149
9.4.1 FileSystem对象简介 150
9.4.2 请求文件系统 150
9.4.3 创建文件 152
9.4.4 写入文件 153
9.4.5 向文件中附加数据 154
9.4.6 复制选中的文件 155
9.4.7 删除文件 155
9.4.8 创建目录 156
9.4.9 读取目录内容 156
9.4.10 删除目录 157
9.4.11 复制文件或目录 158
9.4.12 移动文件或目录 159
9.4.13 fiilesystem：网址 159
9.5 本章小结 160
第10章 拖放API与桌面通知API 161
10.1 拖放API（Drag and Drop API） 161
10.1.1 实现拖放的步骤 161
10.1.2 使用DataTransfer对象 162
10.1.3 设置拖放时的视觉效果 162
10.1.4 自定义拖放图标 163
10.1.5 实例：选择图形 163
10.2 桌面通知API（Notifiication API） 166
10.2.1 桌面通知API的必要性 166
10.2.2 桌面通知生成流程 166
10.2.3 实例：桌面通知的两种实现方法 166
10.3 本章小结 168
第11章 本地存储与离线应用 169
11.1 认识Web Storage 169
11.1.1 客户端数据存储的历史与现状 169
11.1.2 Web Storage概述 170
11.1.3 示例：一个Web Storage的简单应用 170
11.2 使用Web Storage 172
11.2.1 检测浏览器的支持 172
11.2.2 存入与读取数据 173
11.2.3 清除数据 174
11.2.4 遍历操作 174
11.2.5 storage事件 174
11.3 离线应用 175
11.3.1 离线应用概述 175
11.3.2 离线资源缓存 175
11.3.3 Cache Mainfest基本用法 176
11.3.4 分析Cache Mainfest文件 177
11.3.5 在线状态监测 177
11.3.6 实例：创建离线应用 177
11.4 本章小结 181
第12章 Communication API 182
12.1 认识Communication API 182
12.1.1 Communication API简介 182
12.1.2 Communication API运行流程 182
12.1.3 Communication API的基本用法 183
12.2 跨文档消息通信详解 183
12.2.1 源安全简介 183
12.2.2 postMessage API基本用法 184
12.2.3 实例：使用postMessage API创建应用 184
12.3 XMLHttpRequest Level 2 186
12.3.1 跨源XMLHttpRequest 186
12.3.2 HTTP请求时限 186
12.3.3 FormData对象 187
12.3.4 上传文件 187
12.3.5 接收二进制数据 188
12.3.6 进度信息 189
12.3.7 实例：创建XMLHttpRequest应用 189
12.4 本章小结 193
第13章 Web Workers API与Web SQL API 194
13.1 Web Workers 194
13.1.1 Web Workers简介 194
13.1.2 实例：Web Workers简单应用 195
13.1.3 Web Workers嵌套 197
13.2 Web SQL 199
13.2.1 Web SQL基本使用 200
13.2.2 数据库的基本应用 200
13.2.3 实例：创建数据库并创建数据表 203
13.2.4 实例：插入数据与获取数据 204
13.3 本章小结 206
第14章 WebSocket API 207
14.1 WebSocket概述 207
14.2 WebSocket服务器 208
14.3 使用WebSocket API 208
14.3.1 浏览器支持情况检测 209
14.3.2 WebSocket API客户端的基本用法 209
14.4 实例：创建HTML5 WebSocket应用程序 210
14.4.1 编写客户端HTML文件 210
14.4.2 添加服务端WebSocket代码 211
14.4.3 添加WebSocket客户端代码 211
14.4.4 最终效果 213
14.5 本章小结 213
第15章 地理位置API 214
15.1 地理位置的定位原理 214
15.1.1 地理位置定位的方式及流程 214
15.1.2 HTML5中如何实现地理位置定位 214
15.2 Geolocation API 215
15.2.1 检测浏览器的支持 215
15.2.2 getCurrentPosition（）方法 215
15.2.3 watchPosition（）方法 218
15.2.4 clearPosition（）方法 219
15.3 实例：在地图中显示地理位置 219
15.4 本章小结 221
第16章 History API 222
16.1 History API概述 222
16.2 为什么要用History API 222
16.3 如何使用History API 223
16.4 实例：浏览历史记录 223
16.5 实例：添加与修改历史记录 225
16.6 本章小结 228
第17章 CSS基础知识 229
17.1 CSS概述 229
17.1.1 CSS简介 229
17.1.2 CSS历史 229
17.1.3 CSS特点 230
17.1.4 CSS与浏览器的关系 230
17.1.5 CSS站点欣赏 230
17.2 基本CSS选择器 231
17.2.1 标记选择器 232
17.2.2 类别选择器 232
17.2.3 ID选择器 235
17.2.4 实例：应用基本选择器 236
17.3 复合选择器 238
17.3.1 “交集”选择器 238
17.3.2 “并集”选择器 239
17.3.3 后代选择器 240
17.3.4 实例：应用复合选择器 241
17.4 CSS继承特性 242
17.4.1 什么是继承 243
17.4.2 CSS属性继承 243
17.4.3 实例：正确使用CSS继承特性 243
17.5 CSS的层叠特性 244
17.6 CSS样式 245
17.6.1 行内样式 245
17.6.2 内部样式 246
17.6.3 外部样式 246
17.6.4 实例：CSS样式的实现方式 247
17.7 CSS优先级 248
17.7.1 id优先级高于class 248
17.7.2 后面的样式覆盖前面的样式 249
17.7.3 使用！important 250
17.7.4 指定的高于继承 250
17.7.5 行内样式高于内部或外部样式 251
17.7.6 实例：灵活运用CSS优先级 252
17.8 CSS盒子模型 254
17.8.1 盒子模型结构 254
17.8.2 边框（border） 255
17.8.3 内边距（padding） 258
17.8.4 外边距（margin） 259
17.8.5 盒子的浮动 260
17.8.6 盒子的定位 262
17.8.7 z-index空间位置 264
17.8.8 盒子的display属性 266
17.8.9 实例：用盒子模型创建网页布局 267
17.9 本章小结 270
第18章 CSS3选择器 271
18.1 属性选择器 271
18.1.1 E[att＝“val”] 271
18.1.2 E[att＾＝“val”] 272
18.1.3 E[att＄＝“val”] 272
18.1.4 E[att＊＝“val”] 272
18.1.5 实例：文本效果 272
18.2 结构性伪类选择器 273
18.2.1 伪类选择器 274
18.2.2 伪元素选择器 274
18.2.3 root选择器 277
18.2.4 not选择器 278
18.2.5 empty选择器 279
18.2.6 target选择器 279
18.2.7 fiirst-child选择器和last-child选择器 280
18.2.8 fiirst-of-type选择器和last-of-type选择器 282
18.2.9 nth-child选择器和nth-last-child选择器 284
18.2.10 nth-of-type选择器和nth-last-of-type选择器 286
18.2.11 循环使用样式 287
18.2.12 only-child选择器和only-of-type选择器 289
18.2.13 实例：定位指定元素 289
18.3 UI元素状态伪类选择器 291
18.3.1 E：hover、E：active和E：focus选择器 291
18.3.2 E：enabled和E：disabled伪类选择器 292
18.3.3 E：read-only和E：read-write伪类选择器 293
18.3.4 E：checked、E：default和E：indeterminate伪类选择器 294
18.3.5 E：：selection伪类选择器 296
18.3.6 实例：用户界面新体验 297
18.4 通用兄弟元素选择器E～F 302
18.5 本章小结 303
第19章 使用CSS选择器插入内容 304
19.1 插入文字 304
19.1.1 使用选择器插入文本 304
19.1.2 插入筛选内容 305
19.1.3 实例：CSS制作目录 306
19.2 插入图像 309
19.2.1 插入图像文件的方法 309
19.2.2 插入图像文件的好处 310
19.2.3 实例：列表图标与推荐标题 310
19.3 插入项目编号 311
19.3.1 插入连续项目编号 311
19.3.2 在项目编号中追加文字 312
19.3.3 设置编号种类 313
19.3.4 插入嵌套编号 314
19.3.5 在字符串两边添加嵌套文字编号 315
19.3.6 实例：导航菜单 316
19.4 本章小结 321
第20章 使用CSS设置文本样式 322
20.1 控制文本样式 322
20.1.1 文本字体和大小 322
20.1.2 文本颜色和粗细 323
20.1.3 斜体文本 323
20.1.4 文本装饰 324
20.1.5 英文字母大小写转换 324
20.1.6 实例：综合应用文本样式 325
20.2 控制段落样式 326
20.2.1 段落水平对齐 326
20.2.2 段落垂直对齐 327
20.2.3 行间距和字间距 330
20.2.4 段落首字下沉 330
20.2.5 实例：段落排版 331
20.3 CSS3中为文本添加阴影——text-shadow属性 332
20.3.1 text-shadow属性的使用方法 332
20.3.2 位移距离 333
20.3.3 阴影的模糊半径 334
20.3.4 阴影的颜色 334
20.3.5 指定多个阴影 335
20.4 CSS3中让文本自动换行——text-break属性 335
20.4.1 依靠浏览器让文本自动换行 335
20.4.2 指定自动换行的处理方法 336
20.5 本章小结 338
第21章 使用CSS设置图片与背景样式 339
21.1 图片样式 339
21.1.1 图片边框设置 339
21.1.2 设置图片位置 341
21.1.3 设置图片缩放 342
21.1.4 实例：图片边框按钮 344
21.2 图片对齐 345
21.2.1 水平对齐设置 345
21.2.2 垂直对齐设置 345
21.2.3 实例：排列的相册 346
21.3 图文混排 347
21.3.1 设置图文混排 348
21.3.2 设置混排间距 349
21.3.3 实例：看图说话 350
21.4 背景颜色 351
21.4.1 设置页面背景颜色 351
21.4.2 设置块背景颜色 352
21.5 背景图片 352
21.5.1 设置页面背景图片 352
21.5.2 重复的背景图片 352
21.5.3 设置背景图片的位置 353
21.5.4 设置背景滚动 353
21.5.5 背景样式的缩写方式 353
21.5.6 实例：创建背景皮肤 354
21.6 本章小结 355
第22章 使用CSS设置列表与表单样式 356
22.1 列表控制 356
22.1.1 列表的类型及使用 356
22.1.2 创建垂直导航条 357
22.1.3 创建水平导航条 359
22.2 使用列表制作实用菜单 359
22.2.1 实例：多级列表菜单 359
22.2.2 实例：会伸缩的列表菜单 363
22.3 表单设计概述 366
22.3.1 表单的设计原则 366
22.3.2 表单应用分类 367
22.3.3 实例：经典表单效果 369
22.4 表单的设计 369
22.4.1 form标签 369
22.4.2 表单元素 370
22.4.3 对表单文本应用样式 373
22.4.4 实例：滑块复选框 374
22.4.5 实例：会员注册页面 375
22.5 本章小结 382
第23章 对超链接和鼠标应用样式 383
23.1 使用CSS设置超链接 383
23.1.1 什么是超链接 383
23.1.2 关于超链接路径 384
23.1.3 超链接属性控制 384
23.1.4 图像映射 385
23.1.5 实例：实现多页面跳转 386
23.2 超链接特效 387
23.2.1 实例：按钮式超链接 387
23.2.2 实例：浮雕式超链接 388
23.3 鼠标特效 389
23.3.1 CSS控制鼠标箭头 389
23.3.2 实例：鼠标变化的超链接 390
23.4 本章小结 391
第24章 CSS中的滤镜 392
24.1 了解CSS滤镜 392
24.1.1 Alpha滤镜 392
24.1.2 Blur滤镜 394
24.1.3 Grayscale滤镜 395
24.1.4 Sepia滤镜 396
24.1.5 Brightness滤镜 397
24.1.6 Hue-rotate滤镜 398
24.1.7 Invert滤镜 399
24.1.8 Saturate滤镜 400
24.1.9 Contrast滤镜 401
24.1.10 Drop-shadow滤镜 402
24.2 本章小结 403
第25章 项目实战案例 404
25.1 项目实战案例一：企业门户网站 404
25.1.1 header元素中的内容 406
25.1.2 aside元素中的内容 409
25.1.3 section元素中的内容 409
25.1.4 footer元素中的内容 413
25.2 项目实战案例二：用户管理 415