本书是根据《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前端开发工作者的学习指导用书。

第1章 实践概述
1.1 实践目标
1.2 实践知识地图
1.3 实施安排
第2章 开发环境：HBuilder开发工具
2.1 实验目标
2.2 实验任务
2.3 设计思路
2.4 实验实施（跟我做）
2.4.1 步骤一：下载和安装HBuilder
2.4.2 步骤二：启动HBuilder
2.4.3 步骤三：创建Web项目
2.4.4 步骤四：创建HTML文件
2.4.5 步骤五：编辑HTML文件
2.4.6 步骤六：运行HTML文件
第3章 HTML/HTML5：文库网站
3.1 实验目标
3.2 实验任务
3.3 设计思路
3.4 实验实施（跟我做）
3.4.1 步骤一：创建首页和文档详情页
3.4.2 步骤二：添加首页的内容
3.4.3 步骤三：添加文档详情页的内容
第4章 HTML/HTML5：网址导航
4.1 实验目标
4.2 实验任务
4.3 设计思路
4.4 实验实施（跟我做）
4.4.1 步骤一：创建项目，搭建页面主体结构
4.4.2 步骤二：添加form表单内容
4.4.3 步骤三：创建大分类导航
4.4.4 步骤四：制作分类详情页
4.4.5 步骤五：使用iframe加载分类详情页
第5章 HTML/HTML5：影评网
5.1 实验目标
5.2 实验任务
5.3 设计思路
5.4 实验实施（跟我做）
5.4.1 步骤一：适配移动端视口
5.4.2 步骤二：搭建页面主体结构
5.4.3 步骤三：创建影评网首页的页头
5.4.4 步骤四：创建影评网首页的正文部分
5.4.5 步骤五：创建影评网首页的页脚
5.4.6 步骤六：创建提交评论页面
第6章 HTML/HTML5：音乐网站
6.1 实验目标
6.2 实验任务
6.3 设计思路
6.4 实验实施（跟我做）
……
第7章 HTML/HTML5+CSS/CSS3：招聘网站
第8章 HTML/HTML5+CSS/CSS3：旅游网站
第9章 HTML/HTML5+CSS/CSS3：企业门户网站
第10章 HTML/HTML5+CSS/CSS3：动物园网站
第11章 HTML/HTML5+CSS/CSS3：开源社区
第12章 HTML/HTML5+CSS/CSS3：动漫视频网站
第13章 HTML/HTML5+CSS/CSS3：外卖网
第14章 HTML/HTML5+CSS/CSS3：摄影网站
第15章 HTML/HTML5+CSS/CSS3：线上点单网站
第16章 HTML/HTML5+CSS/CSS3：魔方相册
第17章 HTML/HTML5+CSS/CSS3：简易地球仪
第18章 HTML/HTML5+CSS/CSS3：个人播客
第19章 JavaScript+jQuery：Banner轮播图
第20章 JavaScript+jQuery：商品选项卡
第21章 JavaScript+jQuery：盲盒小游戏
第22章 JavaScript+jQuery：大转盘抽奖
第23章 JavaScript+jQuery：网页便签
第24章 JavaScript+jQuery：拼图
第25章 JavaScript+jQuery：视频弹幕
第26章 JavaScript+jQuery：网页调色器