本书以《Web前端开发职业技能等级标准》为指导进行编写，满足了高等职业教育软件技术专业网页设计与制作、Web前端开发等课程教学需要。全书分为制作HTML5页面、制作表单页面、制作列表页面、制作详情页面、制作网站首页、知识扩展（在微信小程序中应用HTML5）6个单元。本书结合真实的企业案例，内容涵盖了HTML5和CSS3常用标签及样式的应用，各单元以具体的网页任务为驱动，按学习情境描述、学习目标、任务书、获取信息、工作计划、进行决策、知识准备、相关案例、工作实施、评价反馈、拓展思考的顺序组织内容，引导读者逐步进行学习。本书主要面向软件技术专业Web前端开发方向的学生，同时也可作为软件技术专业其他方向或计算机相关专业的教材，也可作为IT行业软件开发从业人员能力提升的自学参考用书。

徐晨，女，讲师，多媒体应用设计师，硕士研究生，毕业于北京大学软件与微电子学院，软件工程专业（交互媒体艺术方向），就职于重庆工商职业学院，从事软件技术专业Web前端开发方向课程教学7年。公开发表论文5篇，主编、参编教材3本，出版专著1本。主研省厅级教改项目2项，参与重庆市教学成果奖二等奖1项。主持和参与建设网络课程5门，其中重庆市一流课程1门。多次在教学技能大赛中获得奖项，并多次指导学生在专业竞赛中获奖。

导言 1
课程性质描述 1
典型工作任务描述 1
课程学习目标 1
学习组织形式与方法 2
学习情境设计 3
学业评价 4
单元1 制作HTML5页面 5
学习情境1 制作HTML5欢迎页面 5
学习情境描述 5
学习目标 6
任务书 6
获取信息 6
工作计划 7
进行决策 8
知识准备 8
1.1.1 HBuilder工具下载、安装 9
1.1.2 HTML5 9
1.1.3 HTML5基本结构 9
1.1.4 HTML5标签 10
相关案例 10
工作实施 14
评价反馈 14
拓展思考 16
单元2 制作表单页面 17
学习情境2 制作招聘网站账号登录页面 18
学习情境描述 18
学习目标 19
任务书 19
获取信息 19
工作计划 19
进行决策 20
知识准备 21
2.1.1 区块元素 23
2.1.2 语义结构元素 23
2.1.3 文本标签 23
2.1.4 超链接元素＜a＞ 25
2.1.5 图像元素＜img＞ 25
2.1.6 表单元素 25
2.1.7 CSS文件导入 27
2.1.8 CSS基本选择器 27
2.1.9 CSS组合选择器 29
2.1.10 CSS伪类选择器 29
2.1.11 CSS盒模型 30
2.1.12 CSS文本对齐 31
2.1.13 CSS背景样式background 31
2.1.14 CSS圆角边框border-radius 33
2.1.15 CSS盒阴影box-shadow 33
2.1.16 CSS布局display 33
2.1.17 CSS定位position 34
相关案例 35
工作实施 41
评价反馈 42
拓展思考 43
2.2 学习情境3 制作招聘网站求职申请页面 43
学习情境描述 43
学习目标 44
任务书 44
获取信息 44
工作计划 44
进行决策 45
知识准备 46
2.2.1 HTML5新增类型输入元素＜input＞ 46
2.2.2 输入元素＜input＞的特殊状态属性 47
2.2.3 表格元素＜table＞ 48
2.2.4 CSS属性选择器 49
2.2.5 CSS伪元素选择器 49
2.2.6 CSS不透明度opacity 50
2.2.7 CSS溢出overflow 50
2.2.8 CSS浮动float 50
2.2.9 CSS浮动float实现左右布局 52
相关案例 53
工作实施 64
评价反馈 64
拓展思考 65
2.3 学习情境4 制作招聘网站用户注册页面 66
学习情境描述 66
学习目标 66
任务书 67
获取信息 67
工作计划 67
进行决策 68
知识准备 68
2.3.1 标签元素＜label＞ 69
2.3.2 CSS行高属性line-height 69
2.3.3 CSS文本阴影属性text-shadow 69
2.3.4 CSS边距margin实现居中布局 70
相关案例 71
工作实施 77
评价反馈 77
拓展思考 79
单元3 制作列表页面 80
学习情境5 制作招聘网站职位列表页面 80
学习情境描述 80
学习目标 82
任务书 82
获取信息 82
工作计划 82
进行决策 84
知识准备 84
3.1.1 无序列表＜ul＞ 84
3.1.2 列表项＜li＞ 85
3.1.3 定义列表＜dl＞ 85
3.1.4 ＜datalist＞标签 85
3.1.5 @font-face规则 86
3.1.6 white-space属性 87
3.1.7 overflow属性 87
3.1.8 text-overflow属性 88
3.1.9 cursor属性 88
3.1.10 position属性 88
相关案例 89
工作实施 107
评价反馈 108
拓展思考 109
单元4 制作详情页面 110
学习情境6 制作招聘网站职位详情页面 110
学习情境描述 110
学习目标 111
任务书 112
获取信息 112
工作计划 112
进行决策 113
知识准备 113
4.1.1 弹性布局Flex 114
4.1.2 视口viewport 116
4.1.3 媒体查询@media 117
相关案例 118
工作实施 128
评价反馈 129
拓展思考 130
单元5 制作网站首页 131
5.1 学习情境7 制作招聘网站首页 131
学习情境描述 131
学习目标 133
任务书 133
获取信息 133
工作计划 133
进行决策 134
知识准备 135
5.1.1 视频元素＜video＞ 135
5.1.2 音频元素＜audio＞ 136
5.1.3 关键帧动画规则@keyframes 136
5.1.4 CSS动画属性animation 137
相关案例 138
工作实施 171
评价反馈 172
拓展思考 173
5.2 学习情境8 制作企业网站首页 173
学习情境描述 173
学习目标 175
任 务 书 175
获取信息 175
工作计划 175
进行决策 176
知识准备 177
5.2.1 CSS变换属性transform 178
5.2.2 CSS过渡属性transition 179
5.2.3 CSS多列属性Column 180
相关案例 180
工作实施 219
评价反馈 220
拓展思考 221
单元6 知识扩展——在微信小 程序中应用HTML5 222
6.1 学习情境9 开发微型播放器
微信小程序 222
学习情境描述 222
学习目标 223
任务书 223
获取信息 224
工作计划 224
进行决策 225
知识准备 225
6.1.1 video组件的使用方式 225
6.1.2 按钮绑定事件 226
6.1.3 小程序的调试方式 228
相关案例 229
工作实施 234
评价反馈 235
拓展思考 236
6.2 学习情境10 开发网上店铺微信小程序 236
学习情境描述 236
学习目标 237
任务书 237
获取信息 238
工作计划 238
进行决策 239
知识准备 239
6.2.1 view组件 239
6.2.2 rich-text组件 240
6.2.3 scroll-view组件 241
相关案例 242
工作实施 250
评价反馈 250
拓展思考 251
附录1 1+X对照表 252
附录2 HTML5常用标签字典 254
参考文献 256