第1章 概述 1
1.1 Web基础 2
1.1.1 Web的基本概念 2
1.1.2 Internet 2
1.1.3 协议 6
1.1.4 URL和域名 7
1.1.5 服务器 7
1.1.6 Web标准 8
1.2 Web是如何工作的 9
1.2.1 什么是网页 9
1.2.2 什么是网站 10
1.2.3 网页与网站的关系 10
1.2.4 浏览器是怎么工作的 10
1.2.5 访问网站的过程 12
1.2.6 网站是怎么开发出来的 12
1.3 为什么学习Web前端开发 14
1.3.1 什么是Web前端开发 14
1.3.2 Web前端工程师的工作内容 14
1.3.3 Web前端工程师的职业前景 14
1.3.4 需要学习哪些内容 15
1.3.5 需要购买哪些设备 16
1.3.6 除了技术，还需要学什么 16
第2章 开发工具 17
2.1 开发工具综述 18
2.2 原型设计工具 18
2.2.1 什么是原型设计 18
2.2.2 原型设计工具——Axure RP 19
2.2.3 实训：使用Axure RP实现百度登录页原型设计 20
2.3 开发工具 26
2.3.1 开发工具的作用 26
2.3.2 网站开发工具——Adobe Dreamweaver 26
2.3.3 网站开发工具——Oracle NetBeans 27
2.3.4 网站开发工具——Microsoft Visual Studio 27
2.3.5 实训：Adobe Dreamweaver CS6的安装与基本使用 28
2.3.6 实训：Microsoft Visual Studio Community 2015的安装与基本使用 36
2.4 调试工具 37
2.4.1 什么是Web调试 38
2.4.2 网站调试工具——Firefox 38
2.4.3 网站调试工具——Google Chrome 38
2.4.4 网站调试工具——Internet Explorer 38
2.4.5 实训：使用Firefox进行网页开发调试 38
2.5 代码托管工具 44
2.5.1 为什么要进行代码托管 44
2.5.2 代码托管的基本功能 44
2.5.3 代码托管工具——GitHub 45
2.5.4 代码托管工具——SVN 45
2.5.5 案例：使用GitHub开源平台实现网站代码托管 46
2.6 项目管理系统 51
2.6.1 什么是项目管理 51
2.6.2 项目管理的目的 51
2.6.3 项目管理系统——Microsoft Project 52
2.6.4 项目管理系统——Collabtive 52
第3章 初识HTML5 53
3.1 HTML概述 54
3.1.1 什么是HTML 54
3.1.2 HTML的发展历程 54
3.1.3 HTML5发展史 54
3.1.4 HTML5开发团队 55
3.1.5 HTML5官方资源 55
3.2 HTML5的优势 55
3.2.1 优势 56
3.2.2 新功能 57
3.3 HTML5的新特征 60
3.3.1 语法的改变 60
3.3.2 元素 60
3.3.3 属性 65
3.3.4 全局属性 68
3.4 HTML5文档结构 69
3.4.1 认识文档结构 69
3.4.2 案例：创建HTML5网页 70
第4章 HTML5结构与属性 72
4.1 结构之美：从HTML4到HTML5 73
4.1.1 使用表格布局 73
4.1.2 使用区块布局 73
4.1.3 使用HTML5结构元素布局 74
4.1.4 语义Web 74
4.2 HTML5基础 75
4.2.1 HTML5语法 75
4.2.2 HTML5元素 76
4.2.3 HTML5属性 82
4.2.4 HTML5全局属性 84
4.2.5 案例：个人简历网页的实现 85
4.3 HTML5结构元素 88
4.3.1 HTML5主体结构元素 88
4.3.2 HTML5非主体结构元素 93
4.3.3 案例：使用结构元素进行网页布局（新闻列表＋新闻列表内容呈现） 96
4.4 超链接 100
4.4.1 绝对路径与相对路径 100
4.4.2 超链接元素 101
4.4.3 超链接属性 101
4.4.4 案例：网址导航页面的实现 102
第5章 表单 104
5.1 表单基础 105
5.1.1 表单 105
5.1.2 input元素 106
5.1.3 label元素 107
5.1.4 button元素 108
5.1.5 select元素 108
5.1.6 textarea元素 110
5.2 使用form元素 111
5.2.1 新增form元素 111
5.2.2 form属性总览 112
5.2.3 新增form属性 113
5.3 使用input元素 113
5.3.1 input类型总览 113
5.3.2 新增input类型 114
5.3.3 input属性总览 122
5.3.4 新增的input属性 124
5.4 案例：高考改革方案调查问卷网页的实现 130
5.5 案例：智能表单（用户注册） 134
第6章 多媒体 139
6.1 多媒体基础 140
6.1.1 什么是多媒体 140
6.1.2 音频编码与音频格式 140
6.1.3 视频编码与视频格式 140
6.1.4 在Web上能够使用的音频和视频格式 141
6.1.5 如何在Web上播放视频 142
6.2 HTML5音频与视频 143
6.2.1 Audio元素 143
6.2.2 Video元素 144
6.2.3 Audio和Video的属性 145
6.2.4 Audio和Video的方法 149
6.2.5 Audio和Video的事件 149
6.2.6 案例：在网页上使用背景音乐 151
6.2.7 案例：在网页上播放视频 151
6.3 播放控制 152
6.3.1 预加载媒体文件 152
6.3.2 视频封面图 153
6.3.3 自动播放 153
6.3.4 循环播放 153
6.3.5 添加变量 153
6.3.6 播放 153
6.3.7 暂停 155
6.3.8 快放、慢放、慢动作 155
6.3.9 快进、快退 156
6.3.10 进度拖动 157
6.3.11 音量控制 159
6.3.12 全屏播放 160
6.3.13 播放器容错处理 162
6.4 解决兼容问题 163
6.4.1 浏览器对多媒体的兼容性支持 163
6.4.2 使用多种媒体格式提升兼容性 165
6.4.3 使用Flash提升兼容性 165
6.5 字幕 166
6.5.1 标记时间的文本轨道 167
6.5.2 视频字幕 170
6.6 案例：使用播放器插件实现视频播放 171
第7章 初识CSS3 173
7.1 CSS3概述 174
7.1.1 什么是CSS 174
7.1.2 CSS发展史 174
7.1.3 CSS3新特征 174
7.1.4 主流浏览器对CSS3的支持 176
7.1.5 谁在使用CSS3 178
7.1.6 CSS3的未来 178
7.2 CSS3功能 178
7.2.1 CSS3模块 178
7.2.2 使用CSS3的优势 180
7.3 在HTML中使用CSS 181
7.3.1 内联样式 181
7.3.2 嵌入样式 181
7.3.3 外部样式 182
7.3.4 网站CSS文件的规划 183
7.4 案例：基于终端设备选择不同样式 184
7.5 案例：基于浏览器选择不同样式 185
第8章 选择器 186
8.1 认识CSS选择器 187
8.2 基础选择器 187
8.2.1 语法 187
8.2.2 通配符选择器 188
8.2.3 元素选择器 189
8.2.4 类选择器 190
8.2.5 ID选择器 192
8.2.6 选择器兼容性 193
8.3 层次选择器 194
8.3.1 语法 194
8.3.2 后代选择器 194
8.3.3 子选择器 195
8.3.4 相邻兄弟选择器 196
8.3.5 通用兄弟选择器 197
8.3.6 选择器组合 198
8.3.7 选择器兼容性 199
8.4 伪类选择器 199
8.4.1 语法 199
8.4.2 动态伪类选择器 200
8.4.3 目标伪类选择器 201
8.4.4 语言伪类选择器 202
8.4.5 UI元素状态伪类选择器 203
8.4.6 结构伪类选择器 205
8.4.7 否定伪类选择器 212
8.4.8 伪元素 214
8.5 属性选择器 217
8.5.1 语法 217
8.5.2 使用方法 218
8.5.3 浏览器兼容性 221
第9章 文字样式 222
9.1 文本样式 223
9.1.1 属性 223
9.1.2 文本颜色：color 223
9.1.3 缩进：text-indent 224
9.1.4 行高：line-height 225
9.1.5 字母间隔：letter-spacing 226
9.1.6 水平对齐：text-align 226
9.1.7 文本装饰：text-decoration 228
9.1.8 字符转换：text-transform 228
9.1.9 空白处理：white-space 229
9.1.10 文字间隔：word-spacing 230
9.1.11 首字下沉：：first-letter 231
9.2 字体样式 232
9.2.1 什么是字体 232
9.2.2 属性 232
9.2.3 字体系列：font-family 233
9.2.4 字体大小：font-size 234
9.2.5 字体加粗：font-weight 234
9.2.6 字体风格：font-style 235
9.3 文本效果 236
9.3.1 CSS3新增文本属性 236
9.3.2 文本溢出：text-overflow 237
9.3.3 文字阴影：text-shadow 238
9.3.4 文本换行 239
9.4 使用服务器端字体 240
9.5 案例：诗歌排版 241
9.6 案例：使用服务器端字体实现网站图标 242
第10章 盒模型 244
10.1 盒子 245
10.1.1 元素盒子 245
10.1.2 尺寸 253
10.2 盒子类型 255
10.2.1 盒子的基本类型 255
10.2.2 CSS3新增的类型 261
10.2.3 浏览器对盒子的支持情况 268
10.3 盒子的属性 269
10.3.1 内容溢出 269
10.3.2 自由缩放 273
10.3.3 外轮廓 274
10.3.4 阴影 276
10.4 浏览器的盒子调试 279
10.4.1 在Internet Explorer浏览器中进行盒子调试 280
10.4.2 在Firefox浏览器中进行盒子调试 282
10.4.3 在Google Chrome浏览器中进行盒子调试 283
第11章 背景与边框 284
11.1 背景属性 285
11.1.1 基本属性 285
11.1.2 CSS3新增背景属性 287
11.1.3 多背景 290
11.1.4 渐变背景 291
11.2 边框属性 293
11.2.1 基本属性 293
11.2.2 CSS3新增边框属性 297
11.2.3 圆角边框 297
11.2.4 图片边框 300
11.2.5 渐变边框 306
11.2.6 盒子阴影 307
11.3 案例：图片轮转的实现 315
11.4 案例：网页课程表的实现 316
第12章 布局 322
12.1 定位与布局的基本属性 323
12.1.1 基本属性 323
12.1.2 外边距与内边距 324
12.1.3 浮动布局 325
12.1.4 定位布局 329
12.2 多列布局 337
12.2.1 多列布局的基本知识 337
12.2.2 多列布局的基本属性 337
12.2.3 多列布局属性 338
12.2.4 列宽与列数 338
12.2.5 列边距与列边框 338
12.2.6 跨列布局 339
12.2.7 列高 339
12.3 盒布局 341
12.3.1 盒布局的基本知识 341
12.3.2 盒布局的基本属性 341
12.3.3 使用自适应宽度的弹性盒布局 342
12.3.4 改变元素的显示顺序 344
12.3.5 改变元素排列方向 346
12.3.6 使用弹性布局消除空白 348
12.3.7 对多个元素使用box-flex属性 349
12.3.8 对齐方式 350
12.3.9 布局方式对比 351
12.4 案例：网页布局 356
第13章 CSS动画 368
13.1 Web动画 369
13.1.1 GIF动画 369
13.1.2 Flash动画 369
13.1.3 JS动画 369
13.1.4 CSS3动画 370
13.2 使用变形属性 370
13.2.1 进行简单变形 370
13.2.2 变形子属性 371
13.2.3 2D变形函数 378
13.2.4 3D变形函数 381
13.2.5 案例：制作时钟 384
13.3 使用过渡属性 388
13.3.1 设置元素过渡 388
13.3.2 设置过渡元素 389
13.3.3 设置过渡持续时间 390
13.3.4 指定过渡函数 391
13.3.5 规定过渡延迟时间 395
13.3.6 过渡触发 396
13.3.7 案例：制作动态网站导航 397
13.4 使用动画属性 401
13.4.1 建立基本动画 401
13.4.2 动画关键帧 403
13.4.3 动画子属性 404
13.4.4 给元素应用动画 406
13.4.5 案例：实现页面加载动画 407
13.5 案例：引人入胜的动态照片墙 414
第14章 初识JavaScript 416
14.1 JavaScript概述 417
14.1.1 什么是JavaScript 417
14.1.2 JavaScript能够实现什么 418
14.2 语法 418
14.2.1 调用方法 418
14.2.2 基本语法 419
14.2.3 函数 428
14.2.4 对象 430
14.3 DOM 431
14.3.1 什么是DOM 431
14.3.2 获取HTML元素 431
14.3.3 对HTML元素进行操作 433
14.4 案例：使用JavaScript进行表单验证 435
14.4.1 功能 435
14.4.2 实现效果 435
14.4.3 代码 436
14.5 案例：使用JavaScript实现规定时间内答题效果 439
14.5.1 功能 439
14.5.2 实现效果 439
14.5.3 代码 440
第15章 jQuery编程 442
15.1 jQuery概述 443
15.1.1 jQuery简介 443
15.1.2 为什么要使用jQuery 444
15.1.3 其他的JavaScript类库 445
15.2 jQuery基础应用 446
15.2.1 调用方法 446
15.2.2 基本语法 446
15.2.3 选择器 447
15.2.4 事件 458
15.2.5 常用效果 462
15.2.6 案例：使用jQuery实现图片轮转 470
15.3 jQuery中的DOM操作 473
15.3.1 DOM操作基础 473
15.3.2 节点操作 473
15.3.3 属性操作 481
15.3.4 样式操作 483
15.3.5 内容操作 485
15.3.6 案例：使用jQuery实现表格排序 486
15.4 jQuery插件 488
15.4.1 什么是jQuery插件 488
15.4.2 jQuery UI 490
15.4.3 jQuery Mobile 494
15.5 案例：使用jQuery插件实现表单验证 499
15.5.1 功能 499
15.5.2 实现效果 499
15.5.3 代码 499
15.6 案例：使用JQuery Mobile快速开发手机网站 501
15.6.1 功能 501
15.6.2 实现效果 501
15.6.3 代码 502
第16章 AJAX 504
16.1 概述 505
16.1.1 什么是AJAX 505
16.1.2 为什么使用AJAX 505
16.1.3 AJAX的优势 505
16.1.4 AJAX的应用场景 505
16.2 基础知识 506
16.2.1 XML 506
16.2.2 xmlHttpRequest 507
16.2.3 工作原理 507
16.3 AJAX实现 508
16.3.1 案例：基于本地XML实现学生成绩册 508
16.3.2 案例：AJAX获取远程数据 511
16.4 使用jQuery实现AJAX 513
16.4.1 基本方法 513
16.4.2 jQuery中的全局事件 527
16.5 案例：实时表单验证 528
第17章 文件 536
17.1 文件存储 537
17.2 处理用户文件 537
17.2.1 读取文件 537
17.2.2 读取文件属性 540
17.2.3 文件分割 542
17.2.4 处理事件 543
17.3 文件操作 546
17.3.1 本地磁盘操作 546
17.3.2 创建文件 549
17.3.3 创建目录 550
17.3.4 列出文件 550
17.3.5 处理文件 554
17.3.6 移动 554
17.3.7 复制 557
17.3.8 删除 557
17.4 文件内容操作 558
17.4.1 写入内容 558
17.4.2 追加内容 561
17.4.3 读取内容 562
17.5 案例：用户本地资源管理 564
第18章 绘图 572
18.1 Canvas基础知识 573
18.1.1 Canvas 573
18.1.2 绘图方法 574
18.1.3 绘图属性 576
18.2 图形绘制 577
18.2.1 矩形 577
18.2.2 线条 578
18.2.3 多边形 579
18.2.4 圆角矩形 581
18.2.5 圆形 582
18.2.6 曲线 584
18.2.7 文字 586
18.2.8 图像 590
18.3 图形变换与控制 598
18.3.1 坐标变换 598
18.3.2 矩阵变换 603
18.3.3 设置阴影 605
18.3.4 叠加风格 606
18.3.5 填充风格 607
18.4 案例：用Canvas绘制统计报表 611
第19章 本地存储 615
19.1 本地存储 616
19.1.1 本地存储简介 616
19.1.2 本地存储类型 616
19.2 Web Storage 618
19.2.1 sessionStorage 618
19.2.2 localStorage 620
19.2.3 对比分析 623
19.3 IndexedDB 623
19.3.1 存储原理 623
19.3.2 数据操作 624
19.4 Cookie 630
19.4.1 Cookie概述 630
19.4.2 数据操作 630
19.4.3 案例：在网站中自动记录用户状态 632
19.5 案例：使用本地数据提升服务器性能 635
第20章 Web测试 641
20.1 概述 642
20.1.1 什么是Web测试 642
20.1.2 测试内容 642
20.1.3 测试目的 643
20.2 用户界面测试 643
20.2.1 导航测试 643
20.2.2 图形测试 644
20.2.3 内容测试 644
20.2.4 整体界面测试 644
20.3 兼容性测试 645
20.3.1 平台兼容性测试 645
20.3.2 浏览器兼容性测试 646
20.3.3 分辨率兼容性测试 648
20.4 功能测试 648
20.5 性能测试 651
20.5.1 连接速度测试 652
20.5.2 压力测试 656
参考文献 665