面向职业院校和应用型本科院校开展1+X证书制度试点工作是落实《国家职业教育改革实施方案》的重要内容之一，为了便于X证书标准融入院校学历教育，工业和信息化部教育与考试中心组织编写了《Web前端开发（高级）》教材。本教材以《Web前端开发职业技能等级标准》（高级）为编写依据，分上、下两册，包括前端高效开发框架技术与应用、移动Web设计与开发、性能优化与自动化技术三篇，分别对应《Web前端开发职业技能等级标准》（高级）涉及的三门核心课程：“前端高效开发框架技术与应用”“移动Web设计与开发”“性能优化与自动化技术”。本教材以模块化的结构组织各篇及其章节，以任务驱动的方式安排教材内容，选取移动Web典型应用作为教学案例。本教材可用于1+X证书制度试点工作中的Web前端开发职业技能等级证书教学和培训，也可以作为期望从事Web前端开发职业的应届毕业生和社会在职人员的自学参考用书。

谭志彬，北京大学无线电电子学系硕士毕业，曾在高科技企业从事办公自动化系统的开发应用，是国家计算机和通信专业技术资格考试标准的主要起草或审定者，主持开发过考务管理系统、上机考试系统、阅卷系统。

无第二篇 移动Web设计与开发
第9章 多媒体与绘图 2
9.1 多媒体 3
9.1.1 图片格式 3
9.1.2 音频格式 4
9.1.3 视频格式 5
9.2 HTML5的多媒体支持 6
9.2.1 ＜audio＞和＜video＞ 6
9.2.2 HTMLAudioElement和HTMLVideoElement 8
9.2.3 ＜audio＞和＜video＞的事件 12
9.3 HTML5的绘图支持 13
9.3.1 ＜canvas＞元素 13
9.3.2 绘制图形 14
9.3.3 绘制几何图形 17
9.3.4 绘制路径 18
9.3.5 绘制字符串 32
9.3.6 清除绘制内容 38
9.3.7 绘制阴影 39
9.3.8 绘制位图 40
9.3.9 变形 41
9.4 SVG 43
9.4.1 在HTML5中使用SVG 43
9.4.2 SVG的基本语法 44
9.4.3 ＜svg＞标签 45
9.4.4 ＜svg＞内部标签 46
9.4.5 几何图形标签 47
9.4.6 路径标签 51
9.4.7 文字标签 53
9.5 本章小结 54
第10章 HTML5新特性 55
10.1 HTML5新增元素 56
10.2 HTML5新增全局属性 56
10.3 HTML5废弃的元素 56
10.4 HTML5废弃的属性 57
10.5 Web Storage 58
10.6 本章小结 61
第11章 Less 62
11.1 Less简介 63
11.2 Less的安装 63
11.2.1 服务器端 63
11.2.2 客户端 63
11.3 Less的使用 64
11.3.1 变量 64
11.3.2 嵌套 67
11.3.3 混合 67
11.3.4 继承 71
11.3.5 函数 72
11.3.6 导入 73
11.3.7 其他 74
11.4 本章小结 74
第12章 jQuery Mobile 75
12.1 jQuery Mobile的诞生 76
12.2 jQuery Mobile的安装 76
12.3 jQuery Mobile的使用 77
12.3.1 页面 77
12.3.2 过渡 80
12.3.3 定位 81
12.3.4 按钮 82
12.3.5 图标 87
12.3.6 导航栏 90
12.3.7 折叠 93
12.3.8 列布局 98
12.3.9 列表 99
12.4 jQuery Mobile表单 106
12.4.1 单选按钮 108
12.4.2 复选框 110
12.4.3 选择菜单 111
12.4.4 范围滑块 114
12.4.5 切换开关 116
12.5 jQuery Mobile主题 117
12.6 jQuery Mobile实战 118
12.7 jQuery Mobile事件 120
12.7.1 页面事件 120
12.7.2 触摸事件 121
12.7.3 滚动事件 123
12.7.4 方向事件 124
12.8 网页设计平台差异性 126
12.9 本章小结 128
第三篇 性能优化与自动化技术
第13章 Web前端开发概述 130
13.1 Web前端开发认知 131
13.1.1 Web发展历程 131
13.1.2 Web前端开发技术 132
13.1.3 Web前端开发常见问题 134
13.2 Web前端开发与调试工具 136
13.2.1 常用Web前端开发工具 136
13.2.2 常用Web前端调试工具 143
13.3 本章小结 148
第14章 HTML与CSS代码优化 149
14.1 HTML优化 150
14.1.1 网页文档结构规范 150


14.1.2 HTML5新特性 151
14.1.3 HTML代码优化及
写法规范 154
14.2 CSS优化 154
14.2.1 CSS3新特性 155
14.2.2 浏览器样式重置 157
14.2.3 CSS样式选择器与
优先级 158
14.2.4 CSS去冗余 158
14.2.5 CSS浏览器兼容性 158
14.3 本章小结 159
第15章 前端资源优化 160
15.1 Sprite拼合图 161
15.1.1 CSS Sprite的原理 161
15.1.2 CSS Sprite制作工具的
方式 163
15.2 代码压缩技术 164
15.2.1 YUI Compressor 165
15.2.2 gzip 165
15.2.3 打包工具 166
15.3 预加载和懒加载技术 168
15.3.1 预加载 168
15.3.2 懒加载 169
15.4 本章小结 171
第16章 JavaScript代码优化 172
16.1 JavaScript代码可维护性 173
16.1.1 代码与结构分离 173
16.1.2 样式与结构分离 175
16.1.3 数据与代码分离 176
16.2 JavaScript代码可扩展性 177
16.3 JavaScript代码可调试性 178
16.4 JavaScript DOM优化 180
16.4.1 提升文件加载速度 180
16.4.2 JavaScript DOM
操作优化 181
16.4.3 JavaScript DOM脚本
加载优化 184
16.5 本章小结 185

第17章 webpack工具 186
17.1 Web前端安全性 187
17.1.1 常见安全性问题 187
17.1.2 安全性解决方案 191
17.2 npm及模块化 192
17.2.1 npm安装配置 192
17.2.2 npm基本指令 193
17.2.3 package.json文件 196
17.2.4 node模块化 198
17.3 webpack概述 198
17.4 webpack安装与配置 200
17.4.1 安装webpack 200
17.4.2 webpack配置详解 201
17.5 webpack常用Loader 206
17.5.1 babel-loader编译ES6 206
17.5.2 less-loader处理less文件 207
17.5.3 css-loader与style-loader
打包CSS 209
17.5.4 file-loader与url-loader
引入图片 210
17.6 webpack常用Plugin 212
17.6.1 HtmlWebpackPlugin
插件 213
17.6.2 ExtractTextWebpackPlugin
插件 213
17.6.3 其他Plugin 214
17.7 本章小结 215
第18章 ES6基础 217
18.1 ECMAScript概述 218
18.2 Symbol数据类型 218
18.3 let和const 219
18.3.1 let 219
18.3.2 const 220
18.4 变量的解构赋值 221
18.4.1 默认值 221
18.4.2 解构赋值分类 221
18.5 Set与Map 223
18.5.1 声明 223
18.5.2 操作方法 224
18.5.3 遍历方法 228
18.6 箭头函数 231
18.7 ES6相对于ES5扩展 233
18.7.1 函数的扩展 233
18.7.2 对象的扩展 234
18.7.3 数组的扩展 234
18.8 ES6高级操作 235
18.8.1 Promise对象 235
18.8.2 Iterator 236
18.8.3 Generator 237
18.8.4 Class 238
18.9 本章小结 239
附录 Web前端命名与格式规范 240