目录
任务单元01……搭建项目开发环境 6
任务概述 6
素质目标 6
知识目标 6
技能目标 6
知识结构（图） 7
知识链接 8
Web概述 8
主流Web浏览器 8
常用Web开发工具 10
Web标准 13
HTML5的优势 14
1.1 任务：安装Chrome浏览器 15
1.2 任务：安装HBuilderX开发IDE 18
1.3 任务：使用HBuilderX创建项目 21
单元小结 25
知识巩固 25
扩展实践 25
任务单元02……制作课程基础页面 26
任务概述 26
素质目标 26
知识目标 26
技能目标 26
知识结构（图） 26
知识链接 29
HTML5基础语法 29
HTML5语义化结构标签 32
HTML5常用标签 34
HTML5实体字符 37
HTML5超链接、框架标签 39
HTML5标签分类 41
2.1任务：制作页面通用尾部 42
2.2任务：制作页面通用头部 44
2.3任务：制作课程说明页面 45
单元小结 47
知识巩固 47
拓展实践 48
任务单元03……制作课程播放页面 49
任务概述 49
素质目标 49
知识目标 49
技能目标 49
知识结构（图） 50
知识链接 51
HTML5列表 51
HTML5表格 52
HTML5媒体元素 57
3.1任务：制作课程视频列表 60
3.2任务：制作课程推荐列表 61
3.3任务：制作课程资源表格 63
3.4任务：制作课程播放区域 65
单元小结 66
知识巩固 66
拓展实践 66
学习单元04……使用表单制作页面 69
任务概述 69
素质目标 69
知识目标 69
技能目标 69
知识结构（图） 70
知识链接 71
表单概述 71
表单发送方式 72
常用表单控件 73
表单验证的作用 87
表单验证的方法 87
4.1任务：制作信息登记页面 95
4.2任务：制作用户登录页面 97
4.3任务：制作用户注册页面 98
单元小结 99
知识巩固 100
拓展实践 100
学习单元05……向项目中引入CSS 103
任务概述 103
素质目标 103
知识目标 103
技能目标 103
知识结构（图） 104
知识链接 105
CSS3概述 105
CSS3基础语法 106
CSS3引入方式 107
CSS3基础选择器 111
CSS3高级选择器 115
CSS3选择器权重问题 122
5.1任务：美化课程说明页面 124
5.2任务：美化课程播放页面 127
单元小结 130
知识巩固 131
拓展实践 131
学习单元06……使用CSS3美化页面 132
任务概述 132
素质目标 132
知识目标 132
技能目标 132
知识结构（图） 133
知识链接 134
文字样式 134
文本样式 137
超链接样式 144
列表样式 146
背景样式 148
背景渐变 157
6.1任务：美化页面通用尾部 159
6.2任务：美化页面通用头部 162
6.3任务：美化课程资源表格 165
6.4任务：制作课程推荐部分 167
单元小结 168
知识巩固 168
拓展实践 169
学习单元07……使用盒子模型布局页面 171
任务概述 171
素质目标 171
知识目标 171
技能目标 171
知识结构（图） 172
知识链接 173
盒子模型结构 173
计算盒子模型的尺寸 179
IE盒子模型 179
边框圆角 181
盒子阴影 187
7.1任务：制作课程视频列表 189
7.2任务：美化用户登陆页面 191
7.3任务：美化用户注册页面 193
单元小结 196
知识巩固 196
拓展实践 196
学习单元08……使用CSS3浮动布局页面 197
任务概述 197
素质目标 198
知识目标 198
技能目标 198
知识结构(图) 199
知识链接 199
标准文档流 199
display 200
浮动 200
清除浮动 204
8.1任务：使用浮动左右布局 213
8.2任务：使用浮动单行布局 215
8.3任务：使用浮动多行布局 218
单元小结 221
知识巩固 221
拓展实践 221
学习单元09……使用CSS3定位布局页面 224
任务概述 224
素质目标 224
知识目标 224
技能目标 224
知识结构（图） 225
知识链接 225
定位 225
相对定位 227
绝对定位 228
固定定位 229
粘性定位 230
z-index 230
9.1任务：制作课程层叠角标 232
9.2任务：绝对定位实现登陆页面居中 236
9.3任务：固定定位置顶按钮 239
9.4任务：粘性定位页面通用头部 242
单元小结 244
知识巩固 244
拓展实践 244
学习单元10……利用CSS3动画美化页面 246
任务概述 246
素质目标 246
知识目标 246
技能目标 246
知识结构（图） 247
知识链接 248
变形 248
过渡 254
动画 257
10.1 任务：制作鼠标悬浮过渡效果 262
10.2 任务：使用动画制作轮播图 265
单元小结 268
知识巩固 268
拓展实践 268
学习单元11……使用CSS3弹性盒子布局页面 270
任务概述 270
素质目标 270
知识目标 270
技能目标 270
知识结构（图） 271
知识链接 272
弹性盒子 272
弹性盒子容器属性 273
弹性盒子 283
项目属性 283
11.1任务：使用弹性盒子布局推荐页面 286
11.2任务：使用弹性盒子布局课程页面 292
单元小结 295
知识巩固 296
拓展实践 296
学习单元12……使用CSS3媒体查询实现页面响应式 298
任务概述 298
素质目标 298
知识目标 298
技能目标 298
知识结构（图） 299
知识链接 300
媒体查询 300
响应式布局 300
媒体查询的引入方式 302
12.1任务：用户登录页面增加响应式 305
12.2任务：课程推荐页面增加响应式 308
单元小结 314
知识巩固 314
拓展实践 314