项目1 从零构建HTML5页面
【任务1-1】创建HTML5页面
任务目标
任务分析
知识储备
1.	认识网页
2.	浏览器
3.	Web标准
4.	网页制作工具
5.	Visual Studio Code的安装、设置
6.	Visual Studio Code的使用
任务实现
【任务1-2】个人简介
任务目标
任务分析
知识储备
1.	认识HTML
2.	HTML文档结构
3.	标签分类
4.	标签属性
5.	HTML文档头部相关标签
6.	文本格式化标签
7.	文本样式标签
任务实现
【任务1-3】风云人物
任务目标
任务分析
知识储备
1.	常见图像格式
2.	图像标签
3.	相对路径和绝对路径
4.	特殊字符
任务实现
【任务1-4】电商页面
任务目标
任务分析
知识储备
1.	创建超链接
2.	锚点链接
3.	链接伪类控制超链接
任务实现
【任务1-5】植物科普
任务目标
任务分析
知识储备
1.	无序列表标签
2.	有序列表标签
3.	定义列表标签
4.	列表的嵌套应用
任务实现
项目总结
课下作业


项目2  运用CSS3美化网页
【任务2-1】数字变色
任务目标
任务分析
知识储备
1.	认识CSS
2.	CSS样式规则
3.	引入CSS样式表
4.	CSS基础选择器
任务实现
【任务2-2】新闻报道
任务目标
任务分析
知识储备
1.	字体样式属性
2.	文本外观属性
3.	列表样式属性
任务实现
【任务2-3】黑马知道
任务目标
任务分析
知识储备
1.	CSS复合选择器
2.	CSS层叠性和继承性
3.	CSS优先级
任务实现
【任务2-4】人物介绍
任务目标
任务分析
知识储备
1.	结构化伪类选择器
2.	伪元素选择器
任务实现
项目总结
课下作业


项目3  运用盒子模型划分网页模块
【任务3-1】音乐模块
任务目标
任务分析
知识储备
1.	认识盒子模型
2.	<div>标签
3.	边框属性
任务实现
【任务3-2】用户中心
任务目标
任务分析
知识储备
1.	内边距属性
2.	外边距属性
3.	盒子的宽与高
任务实现
【任务3-3】背景拼图
任务目标
任务分析
知识储备
1.	设置背景颜色
2.	设置背景图像
3.	设置背景图像平铺
4.	设置背景图像的位置
5.	设置背景图像固定
6.	设置背景图像的大小
7.	设置背景的显示区域
8.	设置背景的裁剪区域
9.	设置多重背景图像
10.	综合设置元素的背景
任务实现
【任务3-4】图标导航栏
任务目标
任务分析
知识储备
1.	元素类型
2.	<span>标签
3.	元素类型的转换
任务实现
【任务3-5】相框
任务目标
任务分析
知识储备
1.	颜色透明度
2.	阴影
3.	渐变
任务实现
项目总结
课下作业


项目4  运用float、position和flex属性完成网页布局
【任务4-1】商品展示
任务目标
任务分析
知识储备
1.	布局概述
2.	浮动属性
3.	清除浮动
任务实现
【任务4-2】手机页面展示
任务目标
任务分析
知识储备
1.	overflow属性
任务实现
【任务4-3】行程定位
任务目标
任务分析
知识储备
1.	元素的定位
2.	静态定位
3.	相对定位
4.	绝对定位
5.	固定定位
6.	层叠等级属性
任务实现
【任务4-4】浮动布局网页
任务目标
任务分析
知识储备
1.	单列布局
2.	两列布局
3.	三列布局
4.	网页模块命名规范
任务实现
【任务4-5】弹性布局导航
任务目标
任务分析
知识储备
1.	认识弹性布局
2.	Flex容器属性
3.	Flex元素属性
任务实现
项目总结
课下作业


项目5 为网页添加表格和表单
【任务5-1】简历表
任务目标
任务分析
知识储备
1.	创建表格
2.	表格标签的属性
3.	表格的结构
4.	CSS控制表格样式
任务实现
【任务5-2】用户调研表
任务目标
任务分析
知识储备
1.	认识表单
2.	创建表单
3.	<input />标签
4.	<textarea>标签
5.	<select>标签
任务实现
【任务5-3】信息登记表
任务目标
任务分析
知识储备
1.	新的input控件类型
2.	新的表单标签
3.	新的<input />标签属性
4.	新的<form>标签属性
5.	CSS控制表单样式
任务实现
项目总结
课下作业



项目6 为网页添加视频、音频和动画
【任务6-1】电影播放界面
任务目标
任务分析
知识储备
1.	视频、音频嵌入技术概述
2.	嵌入视频
3.	嵌入音频
4.	浏览器对视频、音频文件的兼容性
5.	控制视频宽度和高度
任务实现
【任务6-2】导航栏渐变
任务目标
任务分析
知识储备
1.	transition-property属性
2.	transition-duration属性
3.	transition-timing-function属性
4.	transition-delay属性
5.	transition属性
任务实现
【任务6-3】卡片翻转动画
任务目标
任务分析
知识储备
1.	2D变形
2.	3D变形
任务实现
【任务6-4】宝石旋转
任务目标
任务分析
知识储备
1.	@keyframes规则
2.	animation-name属性
3.	animation-duration属性
4.	animation-timing-function属性
5.	animation-delay属性
6.	animation-iteration-count属性
7.	animation-direction属性
8.	animation属性
任务实现
动手实践


项目7  运用canvas在网页中绘图
【任务7-1】M字母
任务目标
任务分析
知识储备
1.	引入JavaScript文件
2.	变量
3.	document对象
4.	认识画布
5.	使用画布
6.	绘制线
任务实现
【任务7-2】火柴人
任务目标
任务分析
知识储备
1.	线的样式
2.	线的路径
3.	填充路径
4.	绘制圆
任务实现
项目总结
课下作业

项目8 HTML5+CSS3网页制作的综合运用
【任务8-1】网站设计规划
1.	确定网站的主题
2.	规划网站结构
3.	收集素材
4.	设计网页效果图
【任务8-2】建立项目文件夹
【任务8-3】切图
【任务8-4】搭建首页
任务分析
首页制作
1.	页面布局
2.	定义公共样式
3.	制作首页的头部和导航
4.	制作banner
5.	制作主体内容
6.	制作底部版权信息部分
【任务8-5】配置用户代码片段
1.	设置公共样式代码
2.	安装和使用Snippet Generator插件
3.	设置公共结构代码
【任务8-6】搭建注册页
任务分析
注册页制作
【任务8-7】搭建个人中心页
任务分析
个人中心页制作
【任务8-8】搭建视频播放页
任务分析
视频播放页制作
项目总结
课下作业