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

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

第三篇 HTML5和CSS3开发
基础与应用
第7章 HTML5简介 2
7.1 HTML5的出现 2
7.2 浏览器对HTML5的兼容性 4
7.3 HTML5和HTML4的区别 4
7.3.1 DTD的变化 4
7.3.2 字符编码的变化 5
7.3.3 HTML5语法的变化 5
7.4 HTML5的优势 6
7.5 本章小结 7
第8章 HTML5常用元素和属性 8
8.1 HTML5保留的常用元素 8
8.1.1 基本元素 9
8.1.2 文本格式化元素 11
8.1.3 超链接和锚点 14
8.1.4 列表相关元素 15
8.1.5 表格相关元素 17
8.2 HTML5新增的常用元素 20
8.2.1 文档结构元素 20
8.2.2 文本格式化元素 28
8.2.3 页面增强元素 29
8.2.4 多媒体元素 30
8.3 HTML5的通用属性（全局
属性） 32
8.3.1 HTML5保留的通用属性 32
8.3.2 contenteditable属性和designMode属性 33
8.3.3 hidden属性 35
8.3.4 spellcheck属性 36
8.4 HTML5废弃的元素 36
8.5 HTML5废弃的属性 37
8.6 本章小结 38
第9章 HTML5表单相关元素和属性 39
9.1 HTML5原有的表单元素及
表单控件 40
9.1.1 表单元素＜form＞ 40
9.1.2 表单控件＜input＞ 41
9.1.3 表单控件＜label＞ 42
9.1.4 表单控件＜select＞、＜option＞
和＜optgroup＞ 43
9.1.5 表单控件＜button＞ 44
9.1.6 表单控件＜textarea＞ 45
9.2 HTML5表单新增的元素 46
9.2.1 input元素新增功能类型 46
9.2.2 HTML5新增的表单控件＜output＞ 55
9.3 HTML5表单控件新增的属性 55
9.3.1 form属性 56
9.3.2 formaction属性 56
9.3.3 formmethod属性 57
9.3.4 formenctype属性 58
9.3.5 formtarget属性 58
9.3.6 placeholder属性 59
9.3.7 autocomplete属性 60
9.3.8 autofocus属性 61
9.3.9 list属性 61
9.3.10 pattern属性 62
9.3.11 novalidate属性 63
9.3.12 required属性 64
9.3.13 ＜textarea＞新增maxlength
属性和wrap属性 65
9.4 本章小结 65
第10章 CSS3新增选择器 66
10.1 CSS3简介 66
10.2 兄弟选择器 67
10.3 新增的属性选择器 68
10.4 新增的伪类选择器 72
10.5 新增的伪元素选择器 74
10.6 本章小结 76
第11章 CSS3新增属性 77
11.1 CSS3新增背景属性 77
11.1.1 background-clip 77
11.1.2 background-origin 78
11.1.3 background-size 80
11.1.4 多背景图片 81
11.2 CSS3新增字体文本相关
属性 82
11.2.1 CSS3新增使用服务器
字体 82
11.2.2 CSS3新增文本属性 82
11.3 CSS3新增盒模型属性 85
11.3.1 圆角边框 85
11.3.2 box-shadow 86
11.3.3 resize 88
11.3.4 outline-offset 89
11.4 CSS3新增变形动画属性 89
11.4.1 CSS3的变形属性 90
11.4.2 CSS3的3D变形属性 95
11.4.3 CSS3的过渡属性 101
11.4.4 CSS3的动画属性 105
11.5 CSS3新增多列属性 107
11.6 本章小结 111
第四篇 轻量级框架应用
第12章 jQuery基础 114
12.1 jQuery框架概述 114
12.1.1 jQuery简介 115
12.1.2 jQuery优势 115
12.1.3 jQuery安装 116
12.1.4 jQuery语法 119
12.2 jQuery选择器 120
12.2.1 id选择器 120
12.2.2 类选择器 122
12.2.3 标记选择器 123
12.2.4 属性选择器 124
12.2.5 位置选择器 127
12.2.6 后代选择器 130
12.2.7 子代选择器 130
12.2.8 选择器对象 131
12.2.9 选择器对象遍历应用
及页面初始化 133
12.3 jQuery中的DOM操作 134
12.3.1 查找HTML元素 135
12.3.2 创建HTML元素 136
12.3.3 插入HTML元素 137
12.3.4 删除HTML元素 141
12.3.5 复制HTML元素 143
12.3.6 替换HTML元素 144
12.4 jQuery事件 145
12.4.1 事件绑定 146
12.4.2 鼠标事件 147
12.4.3 键盘事件 152
12.4.4 表单事件 155
12.4.5 窗口事件 159
12.4.6 事件冒泡 161
12.4.7 事件解除 165
12.5 本章小结 169
第13章 jQuery效果 171
13.1 jQuery容器适应 171
13.1.1 元素及浏览器窗口的宽
和高 171
13.1.2 div自适应窗口高度 174
13.2 jQuery标签操作 176
13.2.1 标签内容操作 176
13.2.2 标签属性操作 180
13.2.3 图片轮换效果 181
13.2.4 标签样式操作 183
13.2.5 选项卡效果 188
13.3 jQuery动画 190
13.3.1 隐藏和显示 190
13.3.2 遮罩层 192
13.3.3 淡入和淡出 194
13.3.4 动画效果滑动 195
13.3.5 页面右下角弹层 196
13.3.6 自定义动画方法 198
13.3.7 鼠标位置获取 200
13.3.8 两级联动 201
13.4 jQuery弹窗案例 203
13.4.1 弹窗移动分析 203
13.4.2 弹窗移动实现 203
13.5 图片左右滚动案例 206
13.5.1 图片左右滚动分析 206
13.5.2 图片左右滚动实现 207
13.6 图片放大效果案例 209
13.6.1 图片放大效果分析 209
13.6.2 图片放大效果实现 210
13.7 本章小结 214
第14章 jQuery AJAX 215
14.1 AJAX简介 215
14.1.1 AJAX工作原理 216
14.1.2 AJAX原生写法 216
14.1.3 jQuery中AJAX语法 217
14.2 JSON对象 217
14.3 XML使用 219
14.4 load() 221
14.5 get()和post() 223
14.6 AJAX跨域 225
14.7 本章小结 226