目 录
项目1 了解Web 基础知识..............................................................
1
任务1.1 创建简单的HTML5 页面........................................................
1
1.1.1 Web 相关概念........................................................................
1
1.1.2 HTML5 概述..........................................................................
4
1.1.3 CSS3 概述 ..............................................................................
5
1.1.4 HTML5 开发工具..................................................................
6
项目2 构建HTML5 网页结构 .....................................................12
任务2.1 制作图文混排页面 .................................................................12
2.1.1 HTML5 的文档结构............................................................12
2.1.2 HTML5 标记及属性............................................................14
2.1.3 HTML 文本段落标记..........................................................15
2.1.4 HTML 图片标记..................................................................20
2.1.5 HTML 列表标记..................................................................23
2.1.6 超链接标记 ..........................................................................27
项目3 应用CSS3 样式..................................................................34
任务3.1 使用CSS3 美化网页元素......................................................34
3.1.1 CSS 书写规则 ......................................................................34
3.1.2 CSS 样式的引入方式 ..........................................................35
3.1.3 CSS 基础选择器 ..................................................................37
3.1.4 CSS 常用的文本属性 ..........................................................42
3.1.5 CSS 列表样式属性 ..............................................................48
3.1.6 超链接伪类选择器 ..............................................................52
3.1.7 CSS 的三大特性 ..................................................................53
项目4 认识CSS 盒子模型............................................................60
任务4.1 理解盒子模型 .........................................................................60
4.1.1 盒子模型理论 ......................................................................60
4.1.2 盒子边框属性 ......................................................................62
4.1.3 内边距属性 ..........................................................................65
4.1.4 外边距属性 ..........................................................................66
Htczw.indd 3
2025/10/23 16:36:04
任务4.2 使用CSS3 新增盒子模型属性............................................................................. 71
4.2.1 box-sizing 属性 ................................................................................................... 71
4.2.2 圆角属性 ............................................................................................................. 73
4.2.3 图片边框 ............................................................................................................. 77
4.2.4 盒子阴影 ............................................................................................................. 78
任务4.3 设置盒子背景 ........................................................................................................ 83
4.3.1 常用背景属性 ..................................................................................................... 83
4.3.2 CSS3 新增背景属性 ........................................................................................... 89
任务4.4 设置渐变效果 ........................................................................................................ 98
4.4.1 线性渐变 ............................................................................................................. 98
4.4.2 径向渐变 ............................................................................................................. 99
4.4.3 重复线性渐变 ................................................................................................... 100
4.4.4 重复径向渐变 ................................................................................................... 101
项目5 使用CSS3 高级选择器............................................................................... 106
任务5.1 使用属性、关系选择器选择元素 ...................................................................... 106
5.1.1 属性选择器 ....................................................................................................... 106
5.1.2 关系选择器 ....................................................................................................... 108
任务5.2 使用结构化伪类选择器选择元素 ......................................................................112
5.2.1 :root 选择器........................................................................................................113
5.2.2 :not 选择器 .........................................................................................................113
5.2.3 :only-child 选择器..............................................................................................114
5.2.4 :empty 选择器 ....................................................................................................115
5.2.5 :target 选择器 .....................................................................................................115
5.2.6 :first-child
和:last-child 选择器.........................................................................116
5.2.7 :nth-child(n) 和:nth-last-child(n) 选择器..........................................................117
5.2.8 :nth-of-type(n) 和:nth-last-of-type(n) 选择器...................................................118
任务5.3 使用伪元素选择器选择元素.............................................................................. 123
5.3.1 ::before 选择器.................................................................................................. 123
5.3.2 ::after 选择器..................................................................................................... 124
5.3.3 ::first-letter
和::first-line
选择器 ...................................................................... 125
5.3.4 ::selection 选择器.............................................................................................. 126
项目6 设置浮动与定位........................................................................................... 131
任务6.1 转换元素的类型.................................................................................................. 131
6.1.1 元素的类型 ....................................................................................................... 131
6.1.2 元素类型的转换 ............................................................................................... 135
任务6.2 设置元素的浮动.................................................................................................. 139
6.2.1 元素的浮动 ....................................................................................................... 139
6.2.2 清除元素的浮动 ............................................................................................... 141
IV
Htczw.indd 4
2025/10/23 16:36:04
6.2.3 overflow
属性.................................................................................................... 145
任务6.3 设置元素的定位.................................................................................................. 150
6.3.1 定位的相关属性 ............................................................................................... 151
6.3.2 静态定位 ........................................................................................................... 151
6.3.3 相对定位 ........................................................................................................... 151
6.3.4 绝对定位 ........................................................................................................... 152
6.3.5 固定定位 ........................................................................................................... 154
6.3.6 黏性定位 ........................................................................................................... 157
6.3.7 z-index 属性 ...................................................................................................... 158
项目7 实现网页布局............................................................................................... 167
任务7.1 实现常见的页面布局.......................................................................................... 167
7.1.1 网页布局类型 ................................................................................................... 167
7.1.2 HTML5 新增结构元素..................................................................................... 173
7.1.3 HTML5 页面交互元素..................................................................................... 178
任务7.2 实现弹性布局 ...................................................................................................... 189
7.2.1 Flex 容器和项目 ............................................................................................... 189
7.2.2 Flex 容器的属性 ............................................................................................... 190
7.2.3 Flex 项目的属性 ............................................................................................... 197
项目8 制作表单和表格........................................................................................... 205
任务8.1 创建表单 .............................................................................................................. 205
8.1.1 表单标记 ........................................................................................................... 205
8.1.2 input 控件.......................................................................................................... 206
8.1.3 textarea 控件...................................................................................................... 214
8.1.4 select 控件 ......................................................................................................... 214
任务8.2 使用HTML5 新增input 类型及属性 ................................................................ 220
8.2.1 HTML5 新增的input 类型............................................................................... 220
8.2.2 HTML5 新增的input 属性............................................................................... 227
8.2.3 pattern 表单验证属性 ....................................................................................... 231
任务8.3 制作表格 .............................................................................................................. 235
8.3.1 表格的创建与美化 ........................................................................................... 235
8.3.2 合并单元格 ....................................................................................................... 237
8.3.3 表格的结构标记 ............................................................................................... 240
项目9 实现过渡、转换与动画效果....................................................................... 246
任务9.1 实现过渡效果 ...................................................................................................... 246
9.1.1 参与过渡的属性 ............................................................................................... 246
9.1.2 过渡持续的时间 ............................................................................................... 246
9.1.3 过渡的时间曲线 ............................................................................................... 249
V
Htczw.indd 5
2025/10/23 16:36:04
9.1.4 过渡的延迟时间 ............................................................................................... 249
9.1.5 过渡复合属性 ................................................................................................... 251
任务9.2 实现2D 转换效果 ............................................................................................... 254
9.2.1 transform 属性................................................................................................... 255
9.2.2 2D 平移 ............................................................................................................. 255
9.2.3 2D 缩放 ............................................................................................................. 256
9.2.4 2D 旋转 ............................................................................................................. 257
9.2.5 2D 倾斜 ............................................................................................................. 259
9.2.6 改变转换原点 ................................................................................................... 260
任务9.3 实现3D 转换效果 ............................................................................................... 265
9.3.1 3D 转换属性 ..................................................................................................... 265
9.3.2 3D 转换方法 ..................................................................................................... 268
任务9.4 实现复杂动画...................................................................................................... 275
9.4.1 @keyframes 规则.............................................................................................. 275
9.4.2 定义动画名称 ................................................................................................... 275
9.4.3 定义动画播放的时长 ....................................................................................... 276
9.4.4 定义动画的速度曲线 ....................................................................................... 276
9.4.5 定义动画延迟 ................................................................................................... 277
9.4.6 定义动画播放次数 ........................................................................................... 278
9.4.7 定义动画播放的方向 ....................................................................................... 278
9.4.8 定义动画播放的状态 ....................................................................................... 278
9.4.9 动画复合属性 ................................................................................................... 279
项目10 插入音频与视频......................................................................................... 285
任务10.1 实现在线视听 .................................................................................................... 285
10.1.1 音频和视频文件格式 ..................................................................................... 285
10.1.2 插入音频 ......................................................................................................... 287
10.1.3 插入视频 ......................................................................................................... 289
10.1.4 音频和视频的使用方法与事件 ..................................................................... 290
项目11 绘制HTML5 画布..................................................................................... 296
任务11.1 绘制机器人 ........................................................................................................ 296
11.1.1 创建及使用画布 ............................................................................................. 296
11.1.2 绘制直线 ......................................................................................................... 297
11.1.3 绘制三角形 ..................................................................................................... 299
11.1.4 绘制矩形 ......................................................................................................... 300
11.1.5 绘制圆形 ......................................................................................................... 301
11.1.6 绘制文字 ......................................................................................................... 302
参考文献...................................................................................................................... 307
