目 录
任务1
创建第 一个HTML5网页 1
1.1 任务描述 1
1.2 知识准备 1
1.2.1 认识Web前端开发 2
1.2.2 Web相关概念 2
1.2.3　HTML5概述 3
1.2.4　常用的浏览器 4
1.2.5　网页编辑软件 4
1.3 任务实现 5
任务小结 7
习题1 8
实训1 9
技能拓展　利用人工智能大模型
（DeepSeek）获得学习
建议 9

任务2
搭建简单学院网站 11
2.1 任务描述 11
2.2 知识准备 12
2.2.1 HTML5文档的基本结构 12
2.2.2 HTML标记及其属性 13
2.2.3 HTML文本标记 14
2.2.4 HTML列表标记 19
2.2.5 HTML超链接标记 23
2.2.6 HTML图像标记 26
2.3 任务实现 29
2.3.1 创建项目 29
2.3.2 创建网站首页 30
2.3.3 创建学院简介页面 30
2.3.4 创建学院新闻页面 31
2.3.5 创建新闻详情页面 32
任务小结 33
习题2 34
实训2 35
技能拓展　HTML5代码书写规范 36

任务3
美化简单学院网站 38
3.1 任务描述 38
3.2 知识准备 39
3.2.1 什么是CSS 39
3.2.2 引入CSS样式 39
3.2.3 CSS常用选择器 43
3.2.4 CSS常用文本属性 48
3.2.5 CSS的高级特性 54
3.3 任务实现 56
3.3.1 美化网站首页 56
3.3.2 美化学院简介页面 57
3.3.3 美化学院新闻页面 58
3.3.4 美化新闻详情页面 59
任务小结 61
习题3 62
实训3 64
技能拓展　利用文心大模型了解CSS的
发展历史 64

任务4
制作学院介绍页面 66
4.1 任务描述 66
4.2 知识准备 67
4.2.1 盒子模型的概念 67
4.2.2 盒子模型的相关属性 68
4.2.3 背景属性 75
4.3 任务实现 83
4.3.1 搭建学院介绍页面的结构 83
4.3.2 定义学院介绍页面的CSS样式 84
任务小结 85
习题4 86
实训4 87
技能拓展　在HBuilderX中添加智能
编程助手 87

任务5
制作学院网站导航条 89
5.1 任务描述 89
5.2 知识准备 90
5.2.1 无序列表样式设置 90
5.2.2 超链接样式设置 91
5.2.3 元素的类型与转换 92
5.3 任务实现 95
5.3.1 搭建学院网站导航条的结构 95
5.3.2 定义学院网站导航条的CSS
样式 97
任务小结 99
习题5 99
实训5 100
技能拓展　使用智能编程助手添加
代码注释 101

任务6
制作学院新闻块 102
6.1 任务描述 102
6.2 知识准备 103
6.2.1 元素的浮动 103
6.2.2 元素的定位 106
6.2.3 块元素间的外边距 111
6.3 任务实现 118
6.3.1 搭建学院新闻块的页面结构 118
6.3.2 定义学院新闻块的CSS样式 119
任务小结 122
习题6 122
实训6 123
技能拓展　网页文字排版 124

任务7
制作学生信息表 125
7.1 任务描述 125
7.2 知识准备 125
7.2.1 表格标记 126
7.2.2 合并单元格 127
7.2.3 使用CSS定义表格样式 129
7.3 任务实现 131
7.3.1 搭建学生信息表结构 131
7.3.2 定义学生信息表的CSS
样式 133
任务小结 134
习题7 135
实训7 135
技能拓展　Flex弹性布局 136
任务8
制作学生信息注册表单 137
8.1 任务描述 137
8.2 知识准备 138
8.2.1 认识表单 138
8.2.2 表单标记 138
8.2.3 表单控件 139
8.2.4 使用CSS定义表单样式 145
8.3 任务实现 147
8.3.1 搭建学生信息注册表单的结构 147
8.3.2 使用CSS定义学生信息注册表单的
样式 149
任务小结 151
习题8 151
实训8 153
技能拓展　利用豆包查询正则表达式的
使用方法 154

任务9
布局学院网站主页 155
9.1 任务描述 155
9.2 知识准备 156
9.2.1 HTML5新增的结构标记 156
9.2.2 HTML5+CSS3布局 160
9.3 任务实现 167
9.3.1 搭建布局块结构 167
9.3.2 定义布局块CSS样式 169
任务小结 172
习题9 172
实训9 173
技能拓展　响应式布局 174

任务10
制作校园照片墙页面 175
10.1 任务描述 175
10.2 知识准备 176
10.2.1 过渡属性 176
10.2.2 变形属性 181
10.2.3 动画属性 190
10.3 任务实现 195
10.3.1 搭建照片墙结构 195
10.3.2 定义照片墙的CSS样式 196
任务小结 197
习题10 198
实训10 199
技能拓展　了解Vue框架 200

任务11
完整项目：制作未来信息学院
网站 201
11.1 任务描述 201
11.2 网站设计与规划 202
11.3 效果图设计 203
11.3.1 效果图设计原则 203
11.3.2 效果图设计步骤 204
11.3.3 效果图切片与导出 208
11.4 制作网站主页 208
11.5 制作新闻列表页 227
11.6 制作新闻详情页 233
11.7 制作视频宣传页 235
11.8 添加网页动态效果 236
任务小结 237
技能拓展　网页的配色原则 237

任务12
完整项目：制作爱心助农水果商城网站 238
12.1 任务描述 238
12.2 网站规划 239
12.2.1 网站需求分析 239
12.2.2 网站风格定位 240



























12.2.3 规划草图 240
12.2.4 素材准备 240
12.3 制作网站主页 241
12.4 制作网站登录页面 256
12.5 制作网站注册页面 259
任务小结 262
技能拓展　iconfont是什么？ 263