本书是根据《Web前端开发职业技能等级标准2.0版》（初级）编写的配套的实践教程，其中涉及的项目代码使用HBuilder开发工具编译，并且均可在主流浏览器中运行。 本书将中职、高职院校及应用型本科院校的计算机应用、软件技术等相关专业开设的Web前端开发方向的课程体系，与企业Web前端开发岗位能力模型相结合，依据《Web前端开发职业技能等级标准2.0版》（初级）的技能要求，形成三位一体的Web前端开发技术知识地图。本书以实践能力为导向，以开发企业真实应用为目标，遵循企业软件工程标准和技术开发要求，采用任务驱动方式，将Web前端开发（初级）所涉及的HTML+HTML5、CSS+CSS3、JavaScript、jQuery相关知识单元，充分融入实际案例和应用环境中。本书对《Web前端开发职业技能等级标准2.0版》（初级）涉及的重要知识单元都进行了详细的介绍，帮助读者掌握Web前端开发的技术技能要求。 本书依托实验项目对知识单元进行介绍，并且针对不同的知识单元设计了多个实验项目，帮助读者掌握每个知识单元的核心内容。 本书适合作为《Web前端开发职业技能等级标准2.0版》（初级）实践教学的参考用书，也可作为有意成为Web前端开发工作者的学习指导用书。

北京新奥时代科技有限责任公司于2006年04月12日在石景山分局登记成立。公司经营范围包括技术开发、技术推广、技术转让、技术咨询、技术服务等。

目 录




第1章 实践概述 1
1.1 实践目标 1
1.2 实践知识地图 2
1.3 实施安排 7
第2章 开发环境：HBuilder开发工具 9
2.1 实验目标 9
2.2 实验任务 9
2.3 设计思路 10
2.4 实验实施（跟我做） 10
2.4.1 步骤一：下载和安装HBuilder 10
2.4.2 步骤二：启动HBuilder 11
2.4.3 步骤三：创建Web项目 12
2.4.4 步骤四：创建HTML文件 13
2.4.5 步骤五：编辑HTML文件 14
2.4.6 步骤六：运行HTML文件 14
第3章 HTML/HTML5：文库网站 15
3.1 实验目标 15
3.2 实验任务 15
3.3 设计思路 17
3.4 实验实施（跟我做） 17
3.4.1 步骤一：创建首页和文档
详情页 17
3.4.2 步骤二：添加首页的内容 18
3.4.3 步骤三：添加文档详情页的
内容 21
第4章 HTML/HTML5：网址导航 24
4.1 实验目标 24
4.2 实验任务 25
4.3 设计思路 25
4.4 实验实施（跟我做） 26
4.4.1 步骤一：创建项目，搭建页面
主体结构 26
4.4.2 步骤二：添加form表单内容 27
4.4.3 步骤三：创建大分类导航 28
4.4.4 步骤四：制作分类详情页 28
4.4.5 步骤五：使用iframe加载
分类详情页 31
第5章 HTML/HTML5：影评网 34
5.1 实验目标 34
5.2 实验任务 35
5.3 设计思路 35
5.4 实验实施（跟我做） 36
5.4.1 步骤一：适配移动端视口 36
5.4.2 步骤二：搭建页面主体结构 37
5.4.3 步骤三：创建影评网首页的
页头 37
5.4.4 步骤四：创建影评网首页的正文
部分 38
5.4.5 步骤五：创建影评网首页的
页脚 40
5.4.6 步骤六：创建提交评论页面 40
第6章 HTML/HTML5：音乐网站 43
6.1 实验目标 43
6.2 实验任务 44
6.3 设计思路 44
6.4 实验实施（跟我做） 45
6.4.1 步骤一：创建项目，搭建页面
的主体结构 45
6.4.2 步骤二：创建正文部分 46
6.4.3 步骤三：搭建页脚 49
第7章 HTML/HTML5+CSS/CSS3：
招聘网站 50
7.1 实验目标 50
7.2 实验任务 51
7.3 设计思路 52
7.4 实验实施（跟我做） 54
7.4.1 步骤一：创建项目 54
7.4.2 步骤二：链接外部样式文件 55
7.4.3 步骤三：搭建导航栏 55
7.4.4 步骤四：搭建正文部分的框架 57
7.4.5 步骤五：设置公司简介板块 58
7.4.6 步骤六：设置招聘职位板块 59
7.4.7 步骤七：设置招聘流程板块 60
7.4.8 步骤八：搭建页脚 61
第8章 HTML/HTML5+CSS/CSS3：
旅游网站 63
8.1 实验目标 63
8.2 实验任务 64
8.3 设计思路 64
8.4 实验实施（跟我做） 66
8.4.1 步骤一：创建文件 66
8.4.2 步骤二：链接外部样式文件 66
8.4.3 步骤三：设置导航栏样式 66
8.4.4 步骤四：添加页面标语 69
8.4.5 步骤五：搭建游客点评栏 69
8.4.6 步骤六：搭建页脚 72
第9章 HTML/HTML5+CSS/CSS3：
企业门户网站 73
9.1 实验目标 73
9.2 实验任务 74
9.3 设计思路 74
9.4 实验实施（跟我做） 75
9.4.1 步骤一：创建企业门户网站的
首页 75
9.4.2 步骤二：添加CSS样式 77
第10章 HTML/HTML5+CSS/CSS3：
动物园网站 83
10.1 实验目标 83
10.2 实验任务 83
10.3 设计思路 84
10.4 实验实施（跟我做） 85
10.4.1 步骤一：搭建页面主体结构 85
10.4.2 步骤二：制作场馆子页面 86
10.4.3 步骤三：使用＜iframe＞标签
导入子页面 88
10.4.4 步骤四：创建场馆列表 88
10.4.5 步骤五：添加CSS样式 89
第11章 HTML/HTML5+CSS/CSS3：
开源社区 94
11.1 实验目标 94
11.2 实验任务 94
11.3 设计思路 95
11.4 实验实施（跟我做） 96
11.4.1 步骤一：创建项目 96
11.4.2 步骤二：搭建页面主体结构 97
11.4.3 步骤三：搭建页头 98
11.4.4 步骤四：搭建正文 99
11.4.5 步骤五：搭建页脚 104
第12章 HTML/HTML5+CSS/CSS3：
动漫视频网站 105
12.1 实验目标 105
12.2 实验任务 106
12.3 设计思路 106
12.4 实验实施（跟我做） 107
12.4.1 步骤一：创建项目 107
12.4.2 步骤二：搭建页面主体结构 108
12.4.3 步骤三：创建热播视频列表 109
12.4.4 步骤四：创建分类视频列表 111
12.4.5 步骤五：制作CSS3动画 113
12.4.6 步骤六：定义自定义字体 114
第13章 HTML/HTML5+CSS/CSS3：
外卖网 115
13.1 实验目标 115
13.2 实验任务 116
13.3 设计思路 117
13.4 实验实施（跟我做） 119
13.4.1 步骤一：创建项目 119
13.4.2 步骤二：搭建页面主体结构 119
13.4.3 步骤三：搭建页头 120
13.4.4 步骤四：搭建Banner图 121
13.4.5 步骤五：搭建产品分类列表 122
13.4.6 步骤六：搭建产品列表 122
13.4.7 步骤七：搭建页脚 124
第14章 HTML/HTML5+CSS/CSS3：
摄影网站 126
14.1 实验目标 126
14.2 实验任务 126
14.3 设计思路 127
14.4 实验实施（跟我做） 128
14.4.1 步骤一：创建网站首页 128
14.4.2 步骤二：添加CSS样式 129
第15章 HTML/HTML5+CSS/CSS3：
线上点单网站 133
15.1 实验目标 133
15.2 实验任务 133
15.3 设计思路 134
15.4 实验实施（跟我做） 135
15.4.1 步骤一：创建网站首页 135
15.4.2 步骤二：添加CSS样式 137
第16章 HTML/HTML5+CSS/CSS3：
魔方相册 142
16.1 实验目标 142
16.2 实验任务 142
16.3 设计思路 143
16.4 实验实施（跟我做） 143
16.4.1 步骤一：HTML布局 143
16.4.2 步骤二：搭建魔方相册主体 143
16.4.3 步骤三：添加CSS样式 144
第17章 HTML/HTML5+CSS/CSS3：
简易地球仪 147
17.1 实验目标 147
17.2 实验任务 147
17.3 设计思路 148
17.4 实验实施（跟我做） 148
17.4.1 步骤一：HTML布局 148
17.4.2 步骤二：搭建简易地球仪的
外部容器 148
17.4.3 步骤三：添加CSS样式 148
第18章 HTML/HTML5+CSS/CSS3：
个人博客 150
18.1 实验目标 150
18.2 实验任务 151
18.3 设计思路 151
18.4 实验实施（跟我做） 152
18.4.1 步骤一：创建个人博客首页 152
18.4.2 步骤二：添加CSS样式 154
第19章 JavaScript+jQuery：
Banner轮播图 158
19.1 实验目标 158
19.2 实验任务 159
19.3 设计思路 159
19.4 实验实施（跟我做） 161
19.4.1 步骤一：HTML布局 161
19.4.2 步骤二：添加CSS样式 162
19.4.3 步骤三：Banner广告图的
切换 164
19.4.4 步骤四：改变导航指示项 165
第20章 JavaScript+jQuery：
商品选项卡 167
20.1 实验目标 167
20.2 实验任务 168
20.3 设计思路 169
20.4 实验实施（跟我做） 170
20.4.1 步骤一：HTML布局 170
20.4.2 步骤二：添加CSS样式 172
20.4.3 步骤三：切换商品列表 173
20.4.4 步骤四：自动切换 175
第21章 JavaScript+jQuery：
盲盒小游戏 177
21.1 实验目标 177
21.2 实验任务 178
21.3 设计思路 179
21.4 实验实施（跟我做） 180
21.4.1 步骤一：HTML布局 180
21.4.2 步骤二：添加CSS样式 181
21.4.3 步骤三：切换选中的盲盒 182
21.4.4 步骤四：开启盲盒 184
第22章 JavaScript+jQuery：
大转盘抽奖 187
22.1 实验目标 187
22.2 实验任务 187
22.3 设计思路 188
22.4 实验实施（跟我做） 190
22.4.1 步骤一：构建页面 190
22.4.2 步骤二：下载和使用jQuery 191
22.4.3 步骤三：定义全局变量 192
22.4.4 步骤四：设置click事件 192
22.4.5 步骤五：创建operation()方法
执行抽奖操作 192
22.4.6 步骤六：关闭弹窗 194
第23章 JavaScript+jQuery：
网页便签 195
23.1 实验目标 195
23.2 实验任务 195
23.3 设计思路 196
23.4 实验实施（跟我做） 197
23.4.1 步骤一：HTML布局 197
23.4.2 步骤二：添加CSS样式 197
23.4.3 步骤三：使用JavaScript控制
网页便签 199
第24章 JavaScript+jQuery：拼图 201
24.1 实验目标 201
24.2 实验任务 201
24.3 设计思路 202
24.4 实验实施（跟我做） 202
24.4.1 步骤一：HTML布局 202
24.4.2 步骤二：添加CSS样式 203
24.4.3 步骤三：使用JavaScript控制
拼图 205
第25章 JavaScript+jQuery：视频弹幕 208
25.1 实验目标 208
25.2 实验任务 209
25.3 设计思路 209
25.4 实验实施（跟我做） 210
25.4.1 步骤一：HTML布局 210
25.4.2 步骤二：添加CSS样式 210
25.4.3 步骤三：实现弹幕功能 211
25.4.4 步骤四：扩展弹幕功能 212
第26章 JavaScript+jQuery：
网页调色器 215
26.1 实验目标 215
26.2 实验任务 216
26.3 设计思路 216
26.4 实验实施（跟我做） 217
26.4.1 步骤一：HTML布局 217
26.4.2 步骤二：添加CSS样式 218
26.4.3 步骤三：JavaScript调色 220