Web前端开发从学到用完美实践

内容系统全面，一站式解决HTML5+CSS3+JavaScript+jQuery+AJAX+AngularJS

讲解深入浅出，案例精彩、贴近实战，商业化开发味道突出

全屏幕适配，支持移动Web开发，引入“浏览器支持”工程理念

理论实战紧密结合，彻底摆脱纸上谈兵

融汇前端开发多年的授课及培训经验，干货多多

书中所配DVD包含所有涉及的软件及书中案例代码，上手无障碍

1．为什么要学习Web前端开发？

在日益互联网化的今天，Web技术已经成为一门广泛应用的技术。除了日常的网站访问和信息浏览，Web已成为各种设备的有机组成部分。例如交换机、路由器、服务器等硬件设备都可以通过Web方式进行管理，并且这种方式得到了越来越多的应用，各种信息技术都在不断“Web化”。

不仅如此，学习Web前端开发技术具有以下优势：

 Web前端开发入门门槛低，但市场需求量大，尤其是有经验的前端开发人员。

 Web前端开发人员可在短期内积累足够的经验，而后端开发人员想要积累同等的经验则需要更长的时间。

 Web前端开发技术发展越来越成熟，且适用范围更广。比如HTML5 可以替代原生APP，JavaScript能够用于数据库操作（MongoDB等NoSQL技术也支持JS语法），Node.js能够让JavaScript在服务器端运行等。

2．为什么要选择本书？

（1）涵盖Web前端开发的全体系内容。

本书的内容安排遵循Web开发流程及由浅入深的认知规律，首先介绍Web的基本概念及Web开发工具，然后讲解Web前端开发的三大核心内容—HTML5、CSS3、JavaScript，随后介绍jQuery和AngularJS，接着进一步介绍HTML5新增的文件接口、绘图元素、本地存储和地理定位功能，最后讲解Web测试与发布技术。通过这本书，读者可以掌握Web前端开发的全体系知识。

（2）引入“浏览器支持”的工程理念。

Web前端开发的结果要通过浏览器进行展示。本书在讲解HTML5和CSS3的各种元素、属性时，明确说明了各种浏览器对这些元素的支持；本书中所有的案例都进行了主流浏览器兼容性测试，并对测试结果进行了说明，从而使读者尤其是初学者，在学习之初就能树立起“浏览器支持”这一Web前端开发中的重要工程理念。

（3）书中案例具有较高的工程度和成熟度。

本书包含300多个案例，既有针对一个元素的小案例，也有综合性的大案例。所有案例都经过了精心设计，案例代码的成熟度和工程应用程度较高，许多案例达到了企业级应用水平。读者在学习本书时可以通过案例更好地理解知识和掌握应用技术，同时这些案例也能成为读者积累的代码库中的一部分，在进行实际项目开发时直接引用，真正起到“拿来就用”的作用，有效降低读者从学习到项目开发的成本。

（4）明确体现商业化开发的特点。

本书作者及案例设计团队具有多年的商业化Web前端开发经验。全书在内容组织、案例设计、编写形式上明确体现了商业化开发的特点，有助于读者更好地实现从学习到应用的转变。

（5）全屏幕适配，支持移动Web开发。

本书的内容不仅考虑了面向PC的Web开发，也考虑了面向移动终端的Web开发，全书的讲解重新考虑“全终端适配”的概念，让读者能够更加全面地理解Web前端开发的应用范围，充分适应移动互联网的时代特征。

3．读者对象

本书适用于以下三类读者。

一是从事Web前端开发工作的专业技术人员，本书可帮助他们进行深入、系统的深造学习，从而更好地理解Web知识体系、提高工作效率。

二是准备从事Web前端开发工作的入门者，本书可帮助他们全面理解并掌握Web前端开发的技术框架，为系统学习Web前端开发指引方向，为后续工作学习打下扎实基础。

三是高等院校中计算机相关专业特别是计算机科学与技术、软件技术类专业的在校学生，本书可帮助他们从零开始学习Web技术，不断加深对Web前端开发技术的理解，并且通过大量案例提升实践操作的综合能力，做到“学以致用”。

4．主要内容

本书在保留第一版主要内容的基础上，更新并补充了行业应用的新技术热点，进一步优化章节结构，调整了全书内容组织体系。调整的具体内容为新增第17章，并调换了第一版第10章和第11章的顺序。本书反映了Web前端开发技术的最新发展状况，主要内容如下：

第1～2章属于Web基础部分。主要介绍Web的基本概念、工作原理、Web前端开发的含义，重点讲解Web前端开发的每个阶段中所使用的开发工具，帮助读者为后续学习打下基础。

第3～6章属于HTML5部分。主要介绍HTML5的发展、优势、功能、新特征以及各种元素、属性的用法、重点讲解HTML5表单和多媒体的应用技术。

第7～13章属于CSS3部分。主要介绍CSS3的发展、功能、新特征，重点讲解CSS3中选择器、文字样式、背景与边框、盒模型、布局、动画的应用技术。

第14～17章属于JavaScript及开发库部分。主要介绍JavaScript的发展、功能、基本语法，重点讲解jQuery、AJAX、AngularJS的应用技术。

本书第1版发布后，作者开始积极探索科研、教研和教学工作的融合以及团队建设模式，初步形成了松散模式的技术团队和本书创作小组。刘明哲、冯顺磊、路景鑫、贺路路、孙高强、董凯伦、张浩林全程参与了改版方案及本书内容与案例的讨论、审核和校对。在此对他们表示诚挚的谢意。

由于作者水平有限，疏漏及不足之处在所难免，敬请广大读者朋友批评指正。

第1章 概述 1
1.1 Web基础 2
1.1.1 Web的基本概念 2
1.1.2 Internet 2
1.1.3 协议 8
1.1.4 URL和域名 9
1.1.5 服务器 9
1.1.6 Web标准 9
1.2 Web是如何工作的？ 10
1.2.1 什么是网页？ 10
1.2.2 什么是网站？ 11
1.2.3 网页与网站的关系 11
1.2.4 浏览器是如何工作的？ 11
1.2.5 访问网站的过程 13
1.2.6 网站是怎么开发出来的？ 13
1.3 为什么学习Web前端开发？ 16
1.3.1 什么是Web前端开发？ 16
1.3.2 Web前端工程师的工作内容 17
1.3.3 Web前端工程师的职业前景 17
1.3.4 需要学习哪些内容 17
1.3.5 需要购买哪些设备？ 18
1.3.6 除了技术，还需要学什么 18
1.4 项目管理系统 19
1.4.1 什么是项目管理？ 19
1.4.2 项目管理的目的 19
1.4.3 项目管理系统—Microsoft Project 20
1.4.4 项目管理系统—Collabtive 20
第2章 开发工具 21
2.1 开发工具综述 22
2.2 原型设计工具 22
2.2.1 什么是原型设计？ 22
2.2.2 原型设计工具—Axure RP 23
2.2.3 实训：使用Axure RP实现百度登录页原型设计 23
2.3 开发工具 29
2.3.1 开发工具的作用 29
2.3.2 网站开发工具—Adobe Dreamweaver 30
2.3.3 网站开发工具—Oracle NetBeans 30
2.3.4 网站开发工具—Microsoft Visual Studio Code 31
2.3.5 实训：Adobe Dreamweaver CS6的安装与基本使用 31
2.3.6 实训：Microsoft Visual Studio Code的安装与基本使用 39
2.4 调试工具 41
2.4.1 什么是Web调试？ 41
2.4.2 网站调试工具—Firefox 41
2.4.3 网站调试工具—Google Chrome 42
2.4.4 网站调试工具—Internet Explorer 42
2.4.5 网站调试工具—Microsoft Edge 42
2.4.6 实训：使用Firefox进行网页开发调试 42
2.5 代码托管工具 48
2.5.1 为什么要进行代码托管？ 48
2.5.2 代码托管的基本功能 48
2.5.3 代码托管工具—GitHub 48
2.5.4 代码托管工具—SVN 49
2.5.5 案例：使用GitHub开源平台实现网站代码托管 49
第3章 初识HTML5 55
3.1 HTML概述 56
3.1.1 什么是HTML？ 56
3.1.2 HTML的发展历程 56
3.1.3 HTML5发展史 56
3.1.4 HTML5开发团队 57
3.1.5 HTML5官方资源 57
3.2 HTML5的优势 57
3.2.1 优势 57
3.2.2 新功能 59
3.3 HTML5的新特征 61
3.3.1 语法的改变 61
3.3.2 元素 62
3.3.3 属性 67
3.3.4 全局属性 69
3.4 HTML5文档结构 70
3.4.1 认识文档结构 70
3.4.2 案例：创建HTML5网页 72
第4章 HTML5结构与属性 73
4.1 从HTML4到HTML5 74
4.1.1 使用表格布局 74
4.1.2 使用区块布局 74
4.1.3 使用HTML5结构元素布局 75
4.1.4 语义Web 75
4.2 HTML5基础 76
4.2.1 HTML5语法 76
4.2.2 HTML5元素 77
4.2.3 HTML5属性 82
4.2.4 HTML5全局属性 84
4.2.5 案例：个人简历网页的实现 84
4.3 HTML5结构元素 87
4.3.1 HTML5主体结构元素 88
4.3.2 HTML5非主体结构元素 92
4.3.3 案例：使用结构元素进行网页布局（新闻列表+新闻列表内容呈现） 95
4.4 超链接 99
4.4.1 绝对路径与相对路径 99
4.4.2 超链接元素 99
4.4.3 超链接属性 100
4.4.4 案例：网址导航页面的实现 100
第5章 表单 102
5.1 表单基础 103
5.1.1 表单 103
5.1.2 input元素 104
5.1.3 label元素 105
5.1.4 button元素 105
5.1.5 select元素 106
5.1.6 textarea元素 108
5.2 使用form元素 108
5.2.1 新增form元素 109
5.2.2 form属性总览 110
5.2.3 新增form属性 110
5.3 使用input元素 111
5.3.1 input类型总览 111
5.3.2 新增input类型 112
5.3.3 input属性总览 119
5.3.4 新增的input属性 120
5.4 案例：高考改革方案调查问卷网页的实现 126
5.5 案例：智能表单（用户注册） 130
第6章 多媒体 135
6.1 多媒体基础 136
6.1.1 什么是多媒体？ 136
6.1.2 音频编码与音频格式 136
6.1.3 视频编码与视频格式 136
6.1.4 在Web上能够使用的音频和视频格式 137
6.1.5 如何在Web上播放视频？ 138
6.2 HTML5音频与视频 139
6.2.1 audio元素 139
6.2.2 video元素 140
6.2.3 audio和video的属性 141
6.2.4 audio和video的方法 144
6.2.5 audio和video的事件 145
6.2.6 案例：在网页上使用背景音乐 146
6.2.7 案例：在网页上播放视频 147
6.3 播放控制 147
6.3.1 预加载媒体文件 148
6.3.2 视频封面图 148
6.3.3 自动播放 148
6.3.4 循环播放 148
6.3.5 添加变量 148
6.3.6 播放 149
6.3.7 暂停 150
6.3.8 快放、慢放、慢动作 150
6.3.9 快进、快退 151
6.3.10 进度拖动 152
6.3.11 音量控制 154
6.3.12 全屏播放 155
6.3.13 播放器容错处理 157
6.4 解决兼容问题 158
6.4.1 浏览器对多媒体的兼容性支持 158
6.4.2 使用多种媒体格式提升兼容性 160
6.4.3 使用Flash提升兼容性 160
6.5 字幕 161
6.5.1 标记时间的文本轨道 162
6.5.2 视频字幕 164
6.6 案例：使用播放器插件实现视频播放 166
第7章 初识CSS3 167
7.1 CSS3概述 168
7.1.1 什么是CSS？ 168
7.1.2 CSS发展史 168
7.1.3 CSS3新特征 168
7.1.4 主流浏览器对CSS3的支持 170
7.1.5 谁在使用CSS3 172
7.1.6 CSS3的未来 172
7.2 CSS3功能 172
7.2.1 CSS3模块 172
7.2.2 使用CSS3的优势 173
7.3 在HTML中使用CSS 174
7.3.1 内联样式 174
7.3.2 嵌入样式 174
7.3.3 外部样式 175
7.3.4 网站CSS文件的规划 176
7.4 案例：基于终端设备选择不同样式 177
7.5 案例：基于浏览器选择不同样式 178
第8章 选择器 179
8.1 认识CSS选择器 180
8.2 基础选择器 180
8.2.1 语法 180
8.2.2 通配符选择器 181
8.2.3 元素选择器 182
8.2.4 类选择器 183
8.2.5 ID选择器 185
8.2.6 选择器兼容性 186
8.3 层次选择器 186
8.3.1 语法 186
8.3.2 后代选择器 187
8.3.3 子选择器 187
8.3.4 相邻兄弟选择器 189
8.3.5 通用兄弟选择器 189
8.3.6 选择器组合 190
8.3.7 选择器兼容性 191
8.4 伪类选择器 191
8.4.1 语法 191
8.4.2 动态伪类选择器 192
8.4.3 目标伪类选择器 193
8.4.4 语言伪类选择器 194
8.4.5 UI元素状态伪类选择器 194
8.4.6 结构伪类选择器 196
8.4.7 否定伪类选择器 204
8.4.8 伪元素 205
8.5 属性选择器 208
8.5.1 语法 208
8.5.2 使用方法 209
8.5.3 浏览器兼容性 212
第9章 文字样式 213
9.1 文本样式 214
9.1.1 属性 214
9.1.2 文本颜色：color 214
9.1.3 缩进：text-indent 215
9.1.4 行高：line-height 216
9.1.5 字母间隔：letter-spacing 216
9.1.6 水平对齐：text-align 217
9.1.7 文本装饰：text-decoration 218
9.1.8 字符转换：text-transform 219
9.1.9 空白处理：white-space 220
9.1.10 文字间隔：word-spacing 220
9.1.11 首字下沉：:first-letter 221
9.2 字体样式 222
9.2.1 什么是字体？ 222
9.2.2 属性 222
9.2.3 字体系列：font-family 223
9.2.4 字体大小：font-size 223
9.2.5 字体加粗：font-weight 224
9.2.6 字体风格：font-style 225
9.3 字体图标 226
9.3.1 什么是字体图标？ 226
9.3.2 制作字体图标 226
9.3.3 如何使用字体图标？ 227
9.4 文本效果 228
9.4.1 CSS3新增文本属性 228
9.4.2 文本溢出：text-overflow 228
9.4.3 文字阴影：text-shadow 229
9.4.4 文本换行 230
9.5 使用服务器端字体 231
9.6 案例：诗歌排版 232
9.7 案例：使用服务器端字体实现网站图标 234
第10章 背景与边框 236
10.1 背景属性 237
10.1.1 基本属性 237
10.1.2 CSS3新增背景属性 238
10.1.3 多背景 241
10.1.4 渐变背景 243
10.2 边框属性 245
10.2.1 基本属性 245
10.2.2 CSS3新增边框属性 247
10.2.3 圆角边框 248
10.2.4 图片边框 251
10.2.5 渐变边框 256
10.2.6 盒子阴影 257
10.3 案例：图片轮转的实现 264
10.4 案例：网页课程表的实现 266
第11章 盒模型 271
11.1 盒子 272
11.1.1 元素盒子 272
11.1.2 尺寸 280
11.2 盒子类型 281
11.2.1 盒子的基本类型 281
11.2.2 CSS3新增的类型 287
11.2.3 浏览器对盒子的支持情况 293
11.3 盒子的属性 294
11.3.1 内容溢出 294
11.3.2 自由缩放 299
11.3.3 外轮廓 299
11.3.4 阴影 301
11.4 浏览器的盒子调试 304
11.4.1 在Internet Explorer浏览器中进行盒子调试 305
11.4.2 在Firefox浏览器中进行盒子调试 307
11.4.3 在Google Chrome浏览器中进行盒子调试 307
11.4.4 在Microsoft Edge浏览器中进行盒子调试 308
第12章 布局 311
12.1 定位与布局的基本属性 312
12.1.1 基本属性 312
12.1.2 外边距与内边距 312
12.1.3 浮动布局 313
12.1.4 定位布局 318
12.2 多列布局 325
12.2.1 多列布局的基本知识 325
12.2.2 多列布局的基本属性 326
12.2.3 多列布局属性 326
12.2.4 列宽与列数 326
12.2.5 列边距与列边框 326
12.2.6 跨列布局 327
12.2.7 列高 327
12.3 盒布局 329
12.3.1 盒布局的基本知识 329
12.3.2 盒布局的基本属性 329
12.3.3 使用自适应宽度的弹性盒布局 329
12.3.4 改变元素的显示顺序 332
12.3.5 改变元素排列方向 334
12.3.6 使用弹性布局消除空白 335
12.3.7 对多个元素使用box-flex属性 336
12.3.8 对齐方式 337
12.3.9 布局方式对比 339
12.4 自适应布局 343
12.4.1 自适应布局的基本知识 344
12.4.2 自适应布局的基本属性 344
12.4.3 允许网页宽度自动调整 344
12.4.4 不使用绝对宽度 344
12.4.5 相对大小的字体 345
12.4.6 流动布局 345
12.4.7 选择加载CSS 345
12.4.8 CSS的@media规则 345
12.4.9 图片的自适应 346
12.5 案例：网页布局 348
第13章 CSS动画 359
13.1 Web动画 360
13.1.1 GIF动画 360
13.1.2 Flash动画 360
13.1.3 JavaScript动画 360
13.1.4 CSS3动画 361
13.2 使用变形属性 361
13.2.1 进行简单变形 361
13.2.2 变形子属性 362
13.2.3 2D变形函数 369
13.2.4 3D变形函数 372
13.2.5 案例：制作时钟 375
13.3 使用过渡属性 378
13.3.1 设置元素过渡 378
13.3.2 设置过渡元素 379
13.3.3 设置过渡持续时间 380
13.3.4 指定过渡函数 381
13.3.5 规定过渡延迟时间 385
13.3.6 过渡触发 386
13.3.7 案例：制作动态网站导航 387
13.4 使用动画属性 390
13.4.1 建立基本动画 390
13.4.2 动画关键帧 392
13.4.3 动画子属性 393
13.4.4 给元素应用动画 395
13.4.5 案例：实现页面加载动画 396
13.5 案例：引人入胜的动态照片墙 402
第14章 初识JavaScript 405
14.1 JavaScript概述 406
14.1.1 什么是JavaScript？ 406
14.1.2 JavaScript能够实现什么？ 407
14.2 语法 407
14.2.1 调用方法 407
14.2.2 基本语法 408
14.2.3 函数 417
14.2.4 对象 418
14.3 DOM 419
14.3.1 什么是DOM？ 419
14.3.2 获取HTML元素 419
14.3.3 对HTML元素进行操作 421
14.4 案例：使用JavaScript进行表单验证 423
14.4.1 功能 423
14.4.2 实现效果 423
14.4.3 代码 424
14.5 案例：使用JavaScript实现规定时间内答题效果 427
14.5.1 功能 427
14.5.2 实现效果 427
14.5.3 代码 428
第15章 jQuery编程 430
15.1 jQuery概述 431
15.1.1 jQuery简介 431
15.1.2 为什么要使用jQuery？ 432
15.1.3 其他的JavaScript类库 433
15.2 jQuery基础应用 434
15.2.1 调用方法 434
15.2.2 基本语法 434
15.2.3 选择器 435
15.2.4 事件 445
15.2.5 常用效果 449
15.2.6 案例：使用jQuery实现图片轮转 456
15.3 jQuery中的DOM操作 459
15.3.1 DOM操作基础 459
15.3.2 节点操作 460
15.3.3 属性操作 467
15.3.4 样式操作 468
15.3.5 内容操作 470
15.3.6 案例：使用jQuery实现表格排序 472
15.4 jQuery插件 474
15.4.1 什么是jQuery插件？ 474
15.4.2 jQuery UI 475
15.4.3 jQuery Mobile 479
15.5 案例：使用jQuery插件实现表单验证 483
15.5.1 功能 483
15.5.2 实现效果 484
15.5.3 代码 484
15.6 案例：使用JQuery Mobile快速开发手机网站 485
15.6.1 功能 485
15.6.2 实现效果 485
15.6.3 代码 486
第16章 AJAX 488
16.1 概述 489
16.1.1 什么是AJAX？ 489
16.1.2 为什么使用AJAX？ 489
16.1.3 AJAX的优势 489
16.1.4 AJAX的应用场景 489
16.2 基础知识 490
16.2.1 XML 490
16.2.2 xmlHttpRequest 491
16.2.3 工作原理 491
16.3 AJAX实现 492
16.3.1 案例：使用AJAX基于本地XML实现学生成绩册 492
16.3.2 案例：使用AJAX读取网易新闻列表 495
16.4 使用jQuery实现AJAX 497
16.4.1 基本方法 497
16.4.2 jQuery中的全局事件 509
16.5 案例：实时表单验证 510
第17章 AngularJS 518
17.1 AngularJS概述 519
17.1.1 AngularJS简介 519
17.1.2 AngularJS特性 519
17.1.3 AngularJS框架 520
17.2 AngularJS基本概念 520
17.3 AngularJS应用 521
17.3.1 AngularJS初始化 521
17.3.2 指令 523
17.3.3 模板 523
17.3.4 表达式 524
17.3.5 作用域 524
17.3.6 控制器 526
17.3.7 过滤器 526
17.3.8 表单 528
17.3.9 模块 530
17.3.10 路由 530
17.3.11 服务 534
17.4 案例：使用AngularJS实现即时搜索 537
参考文献 540

1. 用英语讲中国故事（全视频 彩色版）上、下册 [主编　谢亮亮　汪洋]
2. 新时代大学生美育教育 [穆林 刘苍劲 彭圣芳]
3. 电子商务英语 [丁文毅 严慧]
4. 智能可穿戴项目化教程 [曾文波 陈赵云]
5. 视觉设计解析与实战教程 [姜春磊　杨晓]
6. 电子产品制图与制版案例教程 [邹莉莉　苏文斌　贺小艳]
7. 设计新维度：CMF元素与创新产品设计 [彭小鹏]
8. 园林树木识别与应用 [主编 张玉泉]
9. 文本信息处理与应用 [主编　何黎松　姚香秀]
10. 工业机器人编程及应用（第二版） [主编 向艳芳 胡月霞]
11. C语言程序设计（第二版） [主编 刘祖珉 赵仕波]
12. 数据分析与应用 [主编　孙伟　王兰芹]
13. Linux操作系统配置与管理项目化教程（第二版） [主编 白玉羚 刘金明 闫 淼]
14. Ansys SpaceClaim直接建模与仿真指南 [蔡宜时 编著]
15. 基于大数据的智慧农业管理平台关键技术研究与实践 [周永福 著]
16. 健美运动 [戴显岩]
17. Python程序开发基础（AI+微课版） [赵艳莉　曾鑫]
18. 大学生心理困境突围之路 [张珏 著]
19. 机器学习基础与实践 [主编　李晓峰　胥文婷　李云波]
20. 大模型应用实战 DeepSeek＋即梦AI＋剪映重塑创作 [丁红　杨彦彦　丁丁　编著]
21. HarmonyOS从入门到精通 [陈赵云　周永福　杨　浪]
22. 用英语发现世界：欧美文化篇 [李小丽　张薇　编著]
23. 大学体育教程 [戴显岩]
24. 新一代信息技术 [李佼辉 任雪冬]
25. 轨道交通类专门用途英语教程 [李德华主编 商晔副主编]
26. 建设工程项目团队知识异质性对团队绩效的影响研究 [胡可]
27. 新时代元阳梯田 云南现代化高原立体灌区 前世 今生 未来 [云南省水利水电勘测设计研究院 ]
28. 网络工程师章节习题与考点特训（适配第6版考纲） [夏杰 编著]
29. 零基础商业插画设计与AI表现 [主编　汤彦萱]
30. 电工与电子技术（第三版） [主编 王梅 唐翠微 杨晓珍]