HTML5+CSS3 WEB前端开发技术(任务式)(微课版)(第2版)

任务01　搭建项目开发环境　1

1.1　任务概述　1

1.2　任务目标　2

1.3　知识图谱　2

1.4　任务准备　2

1.4.1　Web概述　2

1.4.2　主流Web浏览器　3

1.4.3　常用Web开发工具　4

1.4.4　Web标准　5

1.4.5　HTML5的优势　6

1.5　任务实战　7

任务1：安装Chrome浏览器　7

任务2：安装HBuilderX　IDE　9

任务3：使用HBuilderX创建项目　11

1.6　任务小结　15

1.7　知识巩固　15

1.8　任务拓展　15

任务02　制作课程基础页面　16

2.1　任务概述　16

2.2　任务目标　16

2.3　知识图谱　17

2.4　任务准备　17

2.4.1　HTML5基础语法　17

2.4.2　HTML5语义化结构标签　20

2.4.3　HTML5常用标签　21

2.4.4　HTML5实体字符　24

2.4.5　HTML5超链接、框架标签　26

2.4.6　HTML5元素分类　29

2.5　任务实战　29

任务1：制作页面通用尾部　29

任务2：制作页面通用头部　30

任务3：制作课程说明页面　31

2.6　任务小结　32

2.7　知识巩固　32

2.8　任务拓展　33

任务03　制作课程播放页面　34

3.1　任务概述　34

3.2　任务目标　34

3.3　知识图谱　35

3.4　任务准备　35

3.4.1　HTML5列表　35

3.4.2　HTML5表格　36

3.4.3　HTML5媒体元素　40

3.5　任务实战　42

任务1：制作课程播放页面“视频列表”列表　42

任务2：制作课程推荐页面“成长路线”列表　43

任务3：制作课程播放页面“课程资料”表格　44

任务4：制作课程播放页面播放区域　45

3.6　任务小结　46

3.7　知识巩固　47

3.8　任务拓展　47

任务04　使用表单制作页面　50

4.1　任务概述　50

4.2　任务目标　50

4.3　知识图谱　51

4.4　任务准备　51

4.4.1　表单概述　51

4.4.2　表单发送方式　52

4.4.3　常用表单控件　53

4.4.4　表单验证的作用　64

4.4.5　表单验证的方法　65

4.5　任务实战　71

任务1：制作信息登记页面　71

任务2：制作用户登录页面　72

任务3：制作用户注册页面　73

4.6　任务小结　74

4.7　知识巩固　75

4.8　任务拓展　75

任务05　在项目中引入CSS　77

5.1　任务概述　77

5.2　任务目标　77

5.3　知识图谱　78

5.4　任务准备　78

5.4.1　CSS3概述　78

5.4.2　CSS3基础语法　79

5.4.3　CSS3引入方式　79

5.4.4　CSS3基础选择器　83

5.4.5　CSS3高级选择器　85

5.4.6　CSS3选择器权重问题　90

5.5　任务实战　92

任务1：美化课程说明页面　92

任务2：美化课程播放页面　93

5.6　任务小结　96

5.7　知识巩固　96

5.8　任务拓展　96

任务06　使用CSS3美化页面　97

6.1　任务概述　97

6.2　任务目标　97

6.3　知识图谱　98

6.4　任务准备　98

6.4.1　文字样式　98

6.4.2　文本样式　101

6.4.3　超链接样式　108

6.4.4　列表样式　110

6.4.5　背景样式　112

6.4.6　背景渐变　118

6.5　任务实战　120

任务1：美化页面通用尾部　120

任务2：美化页面通用头部　121

任务3：美化课程播放页面中的“课程资料”表格　123

任务4：制作课程推荐页面“更多好课”部分　125

6.6　任务小结　126

6.7　知识巩固　126

6.8　任务拓展　127

任务07　使用盒子模型布局页面　129

7.1　任务概述　129

7.2　任务目标　129

7.3　知识图谱　130

7.4　任务准备　130

7.4.1　盒子模型结构　130

7.4.2　盒子模型的组成　130

7.4.3　计算盒子模型的尺寸　135

7.4.4　IE盒子模型　135

7.4.5　使用Chrome调试工具检查盒子尺寸　136

7.4.6　边框圆角　137

7.4.7　使用border-radius属性制作特殊图形　139

7.4.8　盒子阴影　142

7.5　任务实战　144

任务1：美化课程播放页面中的“视频列表”列表　144

任务2：美化用户登录页面　146

任务3：美化用户注册页面　148

7.6　任务小结　150

7.7　知识巩固　150

7.8　任务拓展　151

任务08　使用CSS3浮动布局页面　152

8.1　任务概述　152

8.2　任务目标　152

8.3　知识图谱　153

8.4　任务准备　153

8.4.1　标准文档流　153

8.4.2　display属性　153

8.4.3　浮动　154

8.4.4　清除浮动　157

8.5　任务实战　163

任务1：使用浮动左右布局　163

任务2：使用浮动单行布局　166

任务3：使用浮动多行布局　168

8.6　任务小结　170

8.7　知识巩固　170

8.8　任务拓展　171

任务09　使用CSS3定位布局页面　173

9.1　任务概述　173

9.2　任务目标　173

9.3　知识图谱　174

9.4　任务准备　174

9.4.1　定位概述　174

9.4.2　相对定位　175

9.4.3　绝对定位　176

9.4.4　固定定位　177

9.4.5　黏性定位　178

9.4.6　z-index　178

9.5　任务实战　179

任务1：制作课程层叠角标　179

任务2：使用绝对定位实现用户登录页面居中　184

任务3：固定定位置顶按钮　186

任务4：黏性定位页面通用头部　188

9.6　任务小结　189

9.7　知识巩固　190

9.8　任务拓展　190

任务10　利用CSS3动画美化页面　191

10.1　任务概述　191

10.2　任务目标　191

10.3　知识图谱　192

10.4　任务准备　192

10.4.1　变形　192

10.4.2　过渡　198

10.4.3　动画　200

10.5　任务实战　203

任务1：制作鼠标指针悬浮过渡效果　203

任务2：使用动画制作轮播区域　205

10.6　任务小结　208

10.7　知识巩固　208

10.8　任务拓展　208

任务11　使用CSS3弹性盒子布局页面　210

11.1　任务概述　210

11.2　任务目标　210

11.3　知识图谱　211

11.4　任务准备　211

11.4.1　弹性盒子　211

11.4.2　弹性盒子容器属性　212

11.4.3　弹性盒子项目属性　218

11.5　任务实战　220

任务1：使用弹性盒子布局课程推荐页面　220

任务2：使用弹性盒子布局课程播放页面　224

11.6　任务小结　228

11.7　知识巩固　228

11.8　任务拓展　228

任务12　使用CSS3媒体查询实现页面响应式布局　230

12.1　任务概述　230

12.2　任务目标　230

12.3　知识图谱　231

12.4　任务准备　231

12.4.1　媒体查询与响应式布局　231

12.4.2　媒体查询语法　232

12.4.3　媒体查询的引入方式　233

12.4.4　em与rem　235

12.5　任务实战　235

任务1：为用户登录页面应用响应式布局　235

任务2：为课程推荐页面应用响应式布局　238

12.6　任务小结　243

12.7　知识巩固　243

12.8　任务拓展　244