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

导言
课程性质描述
典型工作任务描述
课程学习目标
学习组织形式与方法
学习情境设计
学业评价
单元1 制作HTML5页面
学习情境1 制作HTML5欢迎页面
学习情境描述
学习目标
任务书
获取信息
工作计划
进行决策
知识准备
1.1.1 HBuilder工具下载、安装
1.1.2 HTML5
1.1.3 HTML5基本结构
1.1.4 HTML5标签
相关案例
工作实施
评价反馈
拓展思考
单元2 制作表单页面
学习情境2 制作招聘网站账号登录页面
学习情境描述
学习目标
任务书
获取信息
工作计划
进行决策
知识准备
2.1.1 区块元素
2.1.2 语义结构元素
2.1.3 文本标签
2.1.4 超链接元素＜a＞
2.1.5 图像元素＜img＞
2.1.6 表单元素
2.1.7 CSS文件导入
2.1.8 CSS基本选择器
2.1.9 CSS组合选择器
2.1.10 CSS伪类选择器
2.1.11 CSS盒模型
2.1.12 CSS文本对齐
2.1.13 CSS背景样式background
2.1.14 CSS圆角边框border-radius
2.1.15 CSS盒阴影box-shadow
2.1.16 CSS布局display
2.1.17 CSS定位position
相关案例
工作实施
评价反馈
拓展思考
2.2 学习情境3 制作招聘网站求职申请页面
学习情境描述
学习目标
任务书
获取信息
工作计划
进行决策
知识准备
2.2.1 HTML5新增类型输入元素＜input＞
2.2.2 输入元素＜input＞的特殊状态属性
2.2.3 表格元素＜table＞
2.2.4 CSS属性选择器
2.2.5 CSS伪元素选择器
2.2.6 CSS不透明度opacity
2.2.7 CSS溢出overflow
2.2.8 CSS浮动float
2.2.9 CSS浮动float实现左右布局
相关案例
工作实施
评价反馈
拓展思考
2.3 学习情境4 制作招聘网站用户注册页面
学习情境描述
学习目标
任务书
获取信息
工作计划
进行决策
知识准备
2.3.1 标签元素＜label＞
2.3.2 CSS行高属性line-height
2.3.3 CSS文本阴影属性text-shadow
2.3.4 CSS边距margin实现居中布局
相关案例
工作实施
评价反馈
拓展思考
单元3 制作列表页面
学习情境5 制作招聘网站职位列表页面
学习情境描述
学习目标
任务书
获取信息
工作计划
进行决策
知识准备
3.1.1 无序列表＜ul＞
3.1.2 列表项＜li＞
3.1.3 定义列表＜dl＞
3.1.4 ＜datalist＞标签
3.1.5 @font-face规则
3.1.6 white-space属性
3.1.7 overflow属性
3.1.8 text-overflow属性
3.1.9 cursor属性
3.1.10 position属性
相关案例
工作实施
评价反馈
拓展思考
单元4 制作详情页面
学习情境6 制作招聘网站职位详情页面
学习情境描述
学习目标
任务书
获取信息
工作计划
进行决策
知识准备
4.1.1 弹性布局Flex
4.1.2 视口viewport
4.1.3 媒体查询@media
相关案例
工作实施
评价反馈
拓展思考
单元5 制作网站首页
5.1 学习情境7 制作招聘网站首页
学习情境描述
学习目标
任务书
获取信息
工作计划
进行决策
知识准备
5.1.1 视频元素＜video＞
5.1.2 音频元素＜audio＞
5.1.3 关键帧动画规则@keyframes
5.1.4 CSS动画属性animation
相关案例
工作实施
评价反馈
拓展思考
5.2 学习情境8 制作企业网站首页
学习情境描述
学习目标
任 务 书
获取信息
工作计划
进行决策
知识准备
5.2.1 CSS变换属性transform
5.2.2 CSS过渡属性transition
5.2.3 CSS多列属性Column
相关案例
工作实施
评价反馈
拓展思考
单元6 知识扩展——在微信小 程序中应用HTML5
6.1 学习情境9 开发微型播放器
微信小程序
学习情境描述
学习目标
任务书
获取信息
工作计划
进行决策
知识准备
6.1.1 video组件的使用方式
6.1.2 按钮绑定事件
6.1.3 小程序的调试方式
相关案例
工作实施
评价反馈
拓展思考
6.2 学习情境10 开发网上店铺微信小程序
学习情境描述
学习目标
任务书
获取信息
工作计划
进行决策
知识准备
6.2.1 view组件
6.2.2 rich-text组件
6.2.3 scro