本书以问答的方式介绍Web 前端的相关知识，分为初级篇、进阶篇、高级篇、框架篇；内容包括JavaScript、HTML、CSS的基础知识，边框效果、背景效果、形状效果、阴影效果、动画效果，文本、字体技术，选择器、定时器，canvas绘图，定位，图片、背景美化，ES6框架、Bootstrap框架、React框架。本书可作为高等学校计算机科学与技术、软件工程和网络工程等专业Web前段课程的教材，也可供相关人员参考。

第一部分 初级篇 1
1.1 一个简单的HTML5页面代码是什么样子的？ .2
1.2 ＜html＞、＜body＞、＜head＞标签真的可以省略吗？ .2
1.3 如何安装与使用Sublime Text? .4
1.3.1 安装步骤 .4
1.3.2 使用 .5
1.4 什么是tableless design页面布局？ .11
1.4.1 table布局 .11
1.4.2 DIV+CSS 布局 .13
1.5 什么是行内元素与块级元素？ .14
1.6 什么是元素套框结构？ .19
1.7 如何选择正确的列表标签？ .22
1.7.1 无序列表 .22
1.7.2 有序列表 .23
1.7.3 定义列表 .24
1.8 什么是文档流？ .25
1.9 什么是相对定位？如何相对定位？ .26
1.10 什么是绝对定位？如何绝对定位？ .28
1.11 如何让文本水平居中？ .30
1.12 如何让文本垂直居中？ .31
1.13 如何让元素显示在其他元素之上？ .33
1.14 如何制作一面照片墙？ .35
1.15 input有多少种？ .37
1.15.1 传统的10个输入控件 .37
1.15.2 新增的13个输入控件 .39
1.16 如何组合使用＜select＞和＜option＞标签？ .43
1.17 为什么＜datalist＞标签灵活又方便？ .45
1.18 颜色有哪几种标识方式？ .47
1.18.1 英文单词表示颜色 .47
1.18.2 十六进制表示颜色 .48
1.18.3 RGB表示颜色 .49
1.18.4 HSL表示颜色 .50
1.19 CSS的光标功能有哪些？ .51
1.19.1 新的内建光标 .51
1.19.2 not-allowed光标 .51
1.19.3 none隐藏光标 .52
1.20 如何使用多媒体标签？ .52
1.20.1 ＜embed＞标签 .52
1.20.2 ＜video＞标签 .53
1.20.3 ＜audio＞标签 .54
1.21 CSS属性在JavaScript中如何使用？ .54
1.21.1 读写行内样式 .54
1.21.2 使用style对象 .55
1.21.3 编辑样式 .58
1.21.4 读取媒体查询 .58
1.21.5 使用CSS 事件 .59
1.22 JavaScript定位DOM元素的几种方式 .61
1.22.1 显示信息交互 .61
1.22.2 控制台监控 .63
1.23 Document对象如何查找定位元素？ .64
1.23.1 getElementById( )定位 .64
1.23.2 getElementsByClassName( )定位 .64
1.23.3 getElementsByTagName( )定位 .65
1.23.4 querySelector( )定位 .67
1.24 JavaScript如何操纵DOM元素节点？ .67
1.24.1 节点创建 API 68
1.24.2 页面修改API .69
1.24.3 节点查询API .70
1.25 JavaScript如何操纵DOM元素属性？ .72
1.26 JavaScript数组的创建方式有哪些？ .74
1.26.1 字面量表示法 .74
1.26.2 使用Array( )构造函数 .74
1.26.3 使用Array(n)构造函数 .74
1.27 JavaScript数组函数如何使用？ .75
1.27.1 pop( )和push( ) .75
1.27.2 shift( )和unshift( ) .75
1.27.3 join( ) 76
1.27.4 sort( ) 76
1.27.5 reverse( ) 76
1.27.6 splice( ) 77
1.27.7 slice( ) 77
1.27.8 concat( ) 78
1.27.9 indexOf( )和lastIndex( ) .78
1.27.10 every( )和some( ) .78
1.27.11 fill( ) 79
1.27.12 filter( ) 79
1.27.13 find( )和findindex( ) .79
1.27.14 map( ) 80
1.27.15 toString( ) 80
1.28 JavaScript 的Date对象如何使用？ .80
1.28.1 定义Date对象 .80
1.28.2 获取Date对象的各个时间元素 .80
1.29 JavaScript的Math对象如何使用？ .82
1.29.1 Math.random( ) 82
1.29.2 Math.abs( ) 83
1.29.3 Math.max( )和Math.min( ) .83
1.29.4 取整函数 .83
1.29.5 Math.sqrt( ) 84
1.29.6 对数、指数、幂函数 .84
1.29.7 其他Math函数 .84
第二部分 进阶篇 85
2.1 如何使用background-clip属性设置半透明边框？ .86
2.2 如何实现多重边框的效果？ .87
2.2.1 box-shadow 87
2.2.2 outline 87
2.3 如何改变背景图的定位？ .88
2.4 如何设置边框内圆角效果？ .89
2.5 如何设置多样式背景？ .92
2.5.1 生成条纹背景 .92
2.5.2 修改背景大小 .93
2.5.3 生成垂直条纹 .94
2.5.4 生成斜向条纹 .94
2.5.5 实现更多角度的渐变条纹 .95
2.5.6 使用一种颜色实现同色系条纹 .96
2.6 如何设置CSS渐变效果？ .97
2.6.1 设置网格图案 .97
2.6.2 设置波点图案 .97
2.6.3 设置棋盘图案 .98
2.7 如何实现背景的随机效果？ 100
2.8 如何设置装饰性的图片边框？ 102
2.9 如何设置灵活的椭圆？ 103
2.9.1 设置自适应椭圆 104
2.9.2 设置自适应半椭圆 105
2.9.3 设置四分之一椭圆 106
2.10 什么是伪类？ 107
2.10.1 :hover 伪类 107
2.10.2 :nth-child(n)伪类 107
2.10.3 :nth-of-type(n)伪类 108
2.11 什么是伪元素？ 108
2.11.1 ::first-line伪元素 109
2.11.2 ::first-letter伪元素 109
2.11.3 ::before和::after伪元素 109
2.12 如何根据子元素的数量来设置样式？ .110
2.13 如何将矩形框修改为平行四边形框？ .113
2.14 如何将图片裁剪成菱形？ .115
2.15 如何实现文本的连字符断行？ .118
2.16 如何插入换行？ .118
2.17 如何实现文本行条纹背景？ 121
2.18 如何调整Tab的宽度？ 122
2.19 如何扩大区域范围？ 123
2.20 如何设置CSS元素宽度自适应内部元素？ 124
2.21 如何准确控制表格列宽？ 127
2.22 如何设置连字的字形？ 129
2.23 什么是图标字体？ 130
2.24 如何对＆字符进行美化？ 132
2.25 如何自定义文本下画线？ 133
2.26 如何实现多种文字效果？ 135
2.26.1 凸起效果 135
2.26.2 描边效果 136
2.26.3 发光效果 137
2.26.4 3D效果 138
2.27 什么是JavaScript的顺序结构？ 139
2.28 什么是JavaScript的分支结构？ 139
2.28.1 if语句 139
2.28.2 if…else语句 140
2.28.3 多重if…else语句 140
2.28.4 嵌套if…else语句 141
2.28.5 switch case语句 141
2.29 什么是Java Script的循环结构？ 142
2.29.1 for循环 143
2.29.2 while循环 143
2.29.3 do…while循环 143
2.29.4 for…in循环 144
2.29.5 break和continue 144
2.30 什么是定时器？ 145
2.30.1 setTimeout (Expression , DelayTime ) .145
2.30.2 setInterval ( Expression,DelayTime ) .145
2.30.3 clearTimeout (对象) 146
2.30.4 clearInteval (对象) 146
2.31 canvas绘图技术有哪些？ 147
2.31.1 ＜canvas＞标签的基本绘图步骤 147
2.31.2 canvas 绘图中的基本方法 148
2.31.3 线型相关属性 148
2.31.4 运用canvas绘图 149
2.32 canvas图像技术有哪些？ 153
2.32.1 drawImage ( ) 153
2.32.2 getImageData ( )和putImageData ( ) 156
第三部分 高级篇 157
3.1 如何实现环形文字效果？ 158
3.2 如何实现切角效果？ 159
3.2.1 CSS渐变方式 159
3.2.2 CSS裁剪路径方式 161
3.3 如何实现梯形标签页的效果？ 161
3.4 如何实现简单饼图效果？ 162
3.4.1 transform 163
3.4.2 SVG 167
3.5 如何添加多样式背景投影？ 170
3.5.1 背景的单侧投影 170
3.5.2 背景的邻边投影 171
3.5.3 背景的双侧投影 171
3.6 如何给不规则图形设置阴影？ 172
3.7 如何给图片添加染色效果？ 173
3.7.1 滤镜（filter） 173
3.7.2 混合模式 174
3.8 如何实现毛玻璃效果？ 175
3.9 如何实现模拟折角效果？ 179
3.9.1 45°折角 179
3.9.2 其他角度折角 180
3.10 如何实现自定义复选框？ 183
3.10.1 自定义复选框 183
3.10.2 开关按钮 185
3.11 如何实现轮播图？ 186
3.12 如何设置背景的遮罩效果？ 190
3.12.1 伪元素 190
3.12.2 box-shadow 191
3.12.3 backdrop 191
3.13 如何实现背景的弱化？ 192
3.14 什么是固定定位？ 194
3.15 如何设置背景图集（一图多用）？ 195
3.16 如何实现页面滚动提示？ 197
3.17 如何利用CSS实现图片对比？ 199
3.18 如何实现背景覆盖和内容定宽？ 202
3.19 如何实现元素垂直居中？ 204
3.20 如何设置页面页脚？ 206
3.21 如何实现动画的缓动效果？ 209
3.21.1 实现弹跳动画的缓动效果 209
3.21.2 实现弹性过渡效果 210
3.22 如何设置图片逐帧显示？ 212
3.23 如何设置文字的闪烁效果？ 214
3.23.1 CSS 动画实现 214
3.23.2 普通的闪烁效果 215
3.24 如何实现文本内容逐个显示？ 216
3.25 如何实现平滑的动画效果？ 217
3.26 如何实现沿环形路径平移的动画效果？ 219
3.27 什么是CSS变量？ 222
3.27.1 CSS 中声明一个变量 222
3.27.2 使用JavaScript操作CSS变量 223
3.28 如何编辑展示后的页面？ 225
3.29 如何利用CSS Grid实现响应式布局？ 226
第四部分 框架篇 231
4.1 ES6框架 232
4.1.1 ECMAScript是什么？它与JavaScript有什么关系？ 232
4.1.2 ES6中的let、const关键字有什么区别，如何使用它们？ 232
4.1.3 ES6用什么更简单的方法处理字符串？ 234
4.1.4 Set和Map是什么？有什么作用？ 236
4.1.5 ES6对Object类型做了哪些升级优化？ 241
4.1.6 ES6对函数有哪些扩展？ 243
4.1.7 解构赋值的规则是什么？有哪些用途？ 246
4.1.8 数组如何扩展？ 248
4.1.9 什么是Number？ 252
4.1.10 JavaScript中如何声明一个 “类”？ 254
4.1.11 如何优雅地处理异步操作？ 257
4.1.12 ES6中的Proxy有什么作用？ 263
4.1.13 什么是JavaScript Generator？ 266
4.2 Bootstrap框架 270
4.2.1 Bootstrap是什么？为什么使用它？ 270
4.2.2 如何开始使用Bootstrap? 271
4.2.3 如何运用Bootstrap进行自适应？ 273
4.2.4 如何使用Bootstrap的组件？ 276
4.2.5 如何使用Bootstrap工具类？ 289
4.3 React 框架 292
4.3.1 为什么要使用React？ 292
4.3.2 什么是JSX语法？ 293
4.3.3 如何创建React项目？ 294
4.3.4 React如何渲染元素? 296
4.3.5 什么是React组件？如何定义一个组件? 297
4.3.6 如何给React组件添加样式？ 299
4.3.7 state与props有何区别？ 301
4.3.8 React生命周期有哪些？ 302
4.3.9 React元素的事件处理有何不同？ 305
4.3.10 React条件渲染如何实现？ 307
4.3.11 key的作用是什么？ 309
4.3.12 受控组件与非受控组件有何区别？ 310