本书紧密结合互联网行业发展对Web前端开发工程师岗位的技术和能力要求，以通俗易懂的语言及大量实例，循序渐进地介绍了Web前端开发的基础知识与前沿技术。全书共13章，主要内容包括前端技术概述、HTML语言基础、CSS层叠样式表基础和进阶、JavaScript语言基础、DOM与BOM编程、HTML5基础、HTML5图形与图像、HTML5音频与视频、HTML5文件与数据处理、HTML5网络通信与多线程、HTML5+CSS3页面布局、前端框架技术等。每章都配有相应的习题，以帮助读者更好地理解所学内容，巩固所学知识，达到学以致用的目的。
本书结构严谨，兼有普及与提高的双重功能，既可作为应用型本科院校计算机科学与技术、软件工程、信息管理与信息系统、通信工程相关专业“Web前端技术”“Web应用程序设计”“网页设计与开发”“网页制作”等课程的教材，也可作为高职高专院校相关专业的教材，还可作为Web前端应用开发人员和前端技术爱好者的参考用书。
随着HTML5规范的完善和普及，Web前端开发技术也越来越引人注目。如何开发Web应用程序，设计精美、独特的网页已经成为当前的热门问题之一。
Web前端是软件产品中不可缺少的组成部分。从广义上讲，所有用户终端产品与视觉和交互有关的部分，都属于前端工程师的专业领域。从狭义上讲，Web前端就是使用HTML、CSS、JavaScript等专业技能和工具将产品的UI（User Interface，用户界面）设计稿实现成网站产品，涵盖用户PC端、移动端等。Web前端所包含的知识模块很多，就目前而言，HTML、CSS/CSS3、JavaScript、HTML5、前端框架库是前端开发中最为基础也是最为重要的技术。
本书共13章。第1章是前端技术概述，主要介绍前端技术发展历程、学习路线、开发工具以及就业前景；第2章是HTML语言基础，主要介绍HTML基本概念、常用元素和表单元素；第3章是CSS层叠样式表基础，主要介绍CSS基本概念、CSS选择器、CSS常用属性、CSS盒子模型以及CSS元素布局与定位；第4章是CSS3层叠样式表进阶，主要介绍CSS3新增选择器、CSS3新增盒子属性、CSS3渐变属性、CSS3字体与文本效果、CSS3?2D/3D变换以及CSS3过渡与动画效果；第5章为JavaScript语言基础，主要介绍JavaScript语法规则、数据类型、运算符、流程控制语句、函数和对象；第6章为DOM与BOM编程，主要包括DOM编程、BOM编程、表单编程与正则表达式；第7~12章围绕HTML5新技术，分别讲解HTML5新增元素与属性、图形图像绘制、音频与视频、文件与数据处理、网络通信与多线程、页面布局等内容；第13章介绍前端框架技术，包括jQuery、Bootstrap、Vue和React。
本书在内容选择、深度把握上充分考虑初学者的特点，内容安排上力求做到循序渐进。每章节各个知识点都对应相应示例，方便读者阅读、调试和运行。同时，每章都配有相应的习题，可使读者更好地掌握所学内容，学以致用。
本书不仅适合作为应用型本科院校相关专业Web应用开发或网页设计制作类课程的教材，也适合作为高职高专院校相关专业的教材，亦可作为Web应用开发人员和前端技术爱好者的参考用书。
本书在编写和出版过程中，得到江苏科技大学计算机学院、西安电子科技大学出版社等各部门领导的关心和大力支持，江苏科技大学教材科陈海关老师、西安电子科技大学出版社高樱老师给予了很多帮助，并提出了许多宝贵意见，在此向他们表示衷心的感谢。
由于作者水平有限，书中难免存在不足之处，敬请各位专家、老师和读者批评指正。
第1章 前端技术概述 1
1.1 前端技术发展历程 1
1.1.1 起源阶段 2
1.1.2 第一次浏览器之争 2
1.1.3 动态页面技术的兴起 3
1.1.4 第二次浏览器之争 4
1.1.5 HTML5的发展 4
1.2 前端学习路线 6
1.2.1 HTML 6
1.2.2 CSS/CSS3 7
1.2.3 JavaScript 7
1.2.4 HTML5 7
1.2.5 前端框架 8
1.3 前端开发工具 9
1.3.1 Nodepad++ 9
1.3.2 Visual Studio Code 9
1.3.3 WebStorm 10
1.3.4 HBuilder X 11
1.4 前端就业前景 11
习题 12
第 2 章 HTML语言基础 13
2.1 HTML基本概念 14
2.1.1 HTML概述 14
2.1.2 HTML元素 14
2.1.3 HTML文档的基本结构 15
2.1.4 HTML中颜色的表示 16
2.2 页面头部元素 16
2.2.1 标题元素 17
2.2.2 元信息元素 17
2.3 页面主体元素 18
2.3.1 网页文字和背景颜色 18
2.3.2 网页背景图片 19
2.3.3 网页边距 19
2.4 文字与段落元素 19
2.4.1 文字内容的输入 19
2.4.2 字体元素 20
2.4.3 文字修饰元素 20
2.4.4 标题与段落元素 21
2.4.5 预格式化文本元素 21
2.4.6 换行与水平线元素 22
2.5 列表与表格元素 22
2.5.1 有序列表 22
2.5.2 无序列表 24
2.5.3 表格元素 24
2.6 图片与多媒体元素 27
2.6.1 图片元素 27
2.6.2 嵌入音视频文件 28
2.6.3 嵌入Flash动画 28
2.7 超链接元素 29
2.7.1 定义超链接 29
2.7.2 链接路径 30
2.7.3 超链接类型 30
2.8 表单元素 31
2.8.1 form表单元素 31
2.8.2 input输入元素 31
2.8.3 select列表元素 33
2.8.4 textarea文本域元素 34
2.8.5 fieldset分组元素 35
习题 36
第 3 章 CSS层叠样式表基础 39
3.1 CSS基本概念 40
3.1.1 CSS概述 40
3.1.2 CSS基本语法 41
3.1.3 在页面中使用CSS 41
3.2 CSS选择器 43
3.2.1 元素(标签)选择器 43
3.2.2 类选择器 43
3.2.3 ID选择器 44
3.2.4 后代选择器 45
3.2.5 子元素选择器 46
3.2.6 相邻兄弟元素选择器 47
3.2.7 兄弟元素选择器 47
3.2.8 复合选择器 48
3.2.9 属性选择器 50
3.2.10 伪类选择器 51
3.2.11 伪元素选择器 52
3.3 CSS常用属性 53
3.3.1 字体属性 53
3.3.2 文本属性 54
3.3.3 颜色与背景属性 56
3.3.4 列表属性 58
3.3.5 表格属性 60
3.4 CSS盒子模型 61
3.4.1 盒子组成 61
3.4.2 盒子边框属性 62
3.4.3 盒子内边距属性 63
3.4.4 盒子外边距属性 64
3.5 CSS元素布局与定位 65
3.5.1 标准文档流 65
3.5.2 元素在标准流中的定位 67
3.5.3 元素的定位属性 68
3.5.4 元素的浮动属性 71
3.5.5 元素的显示属性 73
3.5.6 元素的可见性属性 75
3.5.7 元素的溢出处理属性 76
习题 77
第4章 CSS3层叠样式表进阶 80
4.1 CSS3新增选择器 81
4.1.1 E:not() 81
4.1.2 E:target 82
4.1.3 E:first-child, E:last-child 83
4.1.4 E:only-child 84
4.1.5 E:nth-child(n), E:nth-last-child(n) 84
4.1.6 E: first-of-type, E: last-of-type,
E: only-of-type, E:nth-of-type(n),
E:nth- of-last-type(n) 85
4.1.7 E: empty 86
4.1.8 E:checked 87
4.2 CSS3新增盒子属性 87
4.2.1 圆角边框属性 87
4.2.2 边框图片属性 90
4.2.3 盒子阴影属性 92
4.2.4 盒子背景属性 94
4.3 CSS3渐变属性 97
4.3.1 线性渐变 98
4.3.2 重复线性渐变 100
4.3.3 径向渐变 100
4.3.4 重复径向渐变 101
4.4 CSS3字体与文本效果 101
4.4.1 使用字体 101
4.4.2 文本阴影 102
4.4.3 文本溢出处理 103
4.5 CSS3 2D/3D变换 103
4.5.1 平移变换 103
4.5.2 旋转变换 105
4.5.3 缩放变换 107
4.5.4 倾斜变换 108
4.5.5 perspective属性 109
4.5.6 变换应用案例 110
4.6 CSS3过渡与动画效果 111
4.6.1 过渡效果 111
4.6.2 动画效果 113
4.6.3 图像滤镜效果 114
4.7 CSS3应用案例 116
4.7.1 导航条 116
4.7.2 下拉菜单 117
4.7.3 响应式图片与媒体查询 119
4.7.4 关键帧动画 122
4.7.5 旋转照片墙 123
4.7.6 轮播图效果 125
习题 128
第5章 JavaScript语言基础 130
5.1 JavaScript简介 131
5.2 基本语法 131
5.2.1 代码书写规范 132
5.2.2 标识符与保留字 132
5.2.3 常量与变量 133
5.2.4 数据类型 133
5.2.5 运算符 134
5.3 流程控制语句 136
5.3.1 赋值语句 136
5.3.2 条件判断语句 136
5.3.3 循环语句 138
5.4 函数 140
5.4.1 函数的定义 141
5.4.2 函数的调用 141
5.4.3 常用内置函数 143
5.5 自定义对象 144
5.5.1 自定义对象的创建 144
5.5.2 对象成员的访问与操作 145
5.6 内置对象 146
5.6.1 Array对象 146
5.6.2 String对象 148
5.6.3 Math对象 149
5.6.4 Date对象 150
5.7 JavaScript脚本的编写 152
5.7.1 脚本直接嵌入在script元素中 152
5.7.2 在事件响应中嵌入和执行脚本 152
5.7.3 链接外部脚本文件 153
5.8 JavaScript脚本的调试 153
5.8.1 使用alert方法调试脚本 154
5.8.2 使用console.log调试脚本 154
5.8.3 使用断点调试脚本 155
习题 156
第6章 DOM与BOM编程 158
6.1 DOM概念与基础操作 159
6.1.1 DOM概述 159
6.1.2 获取节点 159
6.1.3 创建与插入节点 162
6.1.4 复制、删除和替换节点 163
6.1.5 获取、设置和删除属性 164
6.2 DOM级别与DOM事件 165
6.2.1 DOM0级事件 165
6.2.2 DOM2级事件 166
6.2.3 DOM3级事件 166
6.2.4 DOM事件流 167
6.3 BOM编程 168
6.3.1 window对象 169
6.3.2 history对象 173
6.3.3 location对象 173
6.3.4 screen对象 174
6.3.5 navigator对象 174
6.4 表单编程 174
6.4.1 表单元素及其相关操作 174
6.4.2 文本框编程 176
6.4.3 列表框编程 177
6.4.4 选择框编程 179
6.5 正则表达式 179
6.5.1 基本符号 179
6.5.2 正则表达式的使用 181
6.5.3 常用正则表达式 182
习题 183
第7章 HTML5基础 185
7.1 HTML5 概述 185
7.1.1 HTML5新特性 186
7.1.2 HTML5文档基本结构 187
7.2 HTML5 新增元素与属性 188
7.2.1 新增语义元素 188
7.2.2 其他新增元素 190
7.2.3 新增属性 194
7.3 HTML5中新增表单功能 195
7.3.1 新增form属性 195
7.3.2 新增input类型 196
7.3.3 新增input属性 198
习题 200
第8章 HTML5图形与图像 202
8.1 前端页面中的图形图像 203
8.1.1 图形图像绘制方式 203
8.1.2 前端页面坐标系统 203
8.2 Canvas图形与图像绘制 205
8.2.1 Canvas元素的定义 205
8.2.2 直线线条的绘制 205
8.2.3 曲线线条的绘制 206
8.2.4 矩形的绘制 207
8.2.5 圆的绘制 208
8.2.6 图像的绘制 211
8.2.7 文字的绘制 211
8.3 Canvas图形变换 212
8.3.1 平移变换 212
8.3.2 缩放变换 213
8.3.3 旋转变换 214
8.3.4 状态的保存与恢复 215
8.4 Canvas绘图效果 215
8.4.1 渐变填充效果 215
8.4.2 图案填充效果 217
8.4.3 透明度效果 218
8.4.4 阴影效果 219
8.4.5 图形组合效果 220
8.5 Canvas综合应用 222
8.5.1 时钟绘制 222
8.5.2 雪花粒子特效 224
8.6 SVG图形绘制 226
8.6.1 SVG线条绘制 226
8.6.2 SVG矩形与多边形绘制 227
8.6.3 SVG圆与椭圆绘制 229
8.6.4 SVG路径绘制 229
8.6.5 SVG文本绘制 230
8.6.6 SVG模糊和阴影效果 232
习题 233
第9章 HTML5音频与视频 235
9.1 HTML5音频元素 235
9.1.1 Audio元素 235
9.1.2 Audio对象 236
9.1.3 个性化音乐播放器 239
9.1.4 Web Audio API 243
9.2 HTML5视频元素 245
9.2.1 Video元素 245
9.2.2 Video对象 246
9.2.3 视频作为页面背景 247
习题 248
第10章 HTML5文件与数据处理 249
10.1 HTML5文件操作 249
10.1.1 FileList对象和file对象 249
10.1.2 BLOB对象 251
10.1.3 FileReader接口 253
10.1.4 元素与文件的拖放 255
10.2 数据交换格式JSON 260
10.2.1 JSON概述 260
10.2.2 JSON与JavaScript 261
10.3 本地数据存储技术 262
10.3.1 Session Storage 262
10.3.2 Local Storage 264
10.3.3 WebSQL Database 265
10.3.4 IndexedDB 267
10.4 离线应用和客户端缓存 272
10.4.1 离线状态检测 272
10.4.2 应用缓存 273
习题 274
第11章 HTML5网络通信与多线程 277
11.1 WebSocket 277
11.1.1 WebSocket协议概述 277
11.1.2 WebSocket连接过程 279
11.1.3 WebSocket API 280
11.2 XMLHttpRequest 281
11.2.1 XMLHttpRequest对象 281
11.2.2 改进的XMLHttpRequest对象 282
11.3 Web Worker 284
11.3.1 Web Worker对象 284
11.3.2 Web Worker应用实例 285
习题 287
第12章 HTML5+CSS3页面布局 289
12.1 弹性盒子布局 289
12.1.1 弹性盒子基本概念 289
12.1.2 弹性容器属性 291
12.1.3 弹性项目属性 296
12.2 网格布局 298
12.2.1 等宽度网格布局 298
12.2.2 百分比网格布局 299
12.2.3 多列布局 301
12.3 页面布局应用 302
12.3.1 双飞翼布局 302
12.3.2 瀑布流布局 304
习题 305
第13章 前端框架技术 307
13.1 jQuery 307
13.1.1 jQuery概述 307
13.1.2 jQuery基本语法 308
13.1.3 jQuery选择器 309
13.1.4 jQuery中的DOM操作 312
13.1.5 jQuery对象和DOM对象 316
13.1.6 jQuery效果 316
13.2 Bootstrap 317
13.3 Vue 321
13.4 React 323
习题 324
参考文献 326
书单推荐
