本教材具有以下特色：

　　（1）校企合作，内容与时俱进：编写团队由行业企业专家、一线技术骨干和职业院校骨干教师组成。编写团队通过深入企业调研、召开研讨会等方式，准确把握行业发展趋势和企业用人需求，将企业的新技术、新工艺、新规范融入教材内容，确保教材的实用性和前瞻性。

　　（2）任务驱动，激发学习热情：本教材分为HTML基础篇、CSS应用篇、JavaScript应用篇、综合案例篇共四部分，细化为十一个项目单元。每个项目单元均采用“项目导读、学习目标、任务设计、项目任务、项目小结、本项目习题”六段式体例编写，使读者能够从整体上把握每个项目单元的学习目标与学习任务，怀揣着完成任务案例的迫切心情进行知识与技能的学习，激发学习兴趣。此外，教材还设置了“想一想”“多学一招”等思考实践环节，引导学生在阅读时深入思考问题、拓展思维，提升认知水平。 

　　（3）思政融入，培育职业素养：教材中所有案例的文字、图片素材均围绕思政元素精心设计，将思想政治教育元素有机融入教材内容，培养学生的职业道德、工匠精神和爱国情怀。通过案例分析、讨论等方式，引导学生树立正确的价值观和职业观，增强社会责任感和使命感。

　　（4）数字赋能，助力高效学习：本书将“互联网+”思想融入教材，配套了丰富的数字化资源，如教学视频、电子课件、习题参考答案等。学习者可以通过扫描二维码方式获取这些资源，帮助读者更好地理解和掌握相关知识和技能，提高学习效果。

项目1 Web前端开发概述 ……………………………………………… 1

任务1.1 认识网页和网站 ………………………………………………………………… 1

任务1.2 浏览器与 Web服务器 ………………………………………………………… 5

任务1.3 Web前端开发技术及标准……………………………………………………… 6

任务1.4 网页制作工具 …………………………………………………………………… 8

项目2 使用 HTML5组织页面内容 …………………………………… 15

任务2.1 HTML基础 …………………………………………………………………… 16

任务2.2 文本控制标签 ………………………………………………………………… 20

任务2.3 图像标签 ……………………………………………………………………… 26

任务2.4 超链接标签 …………………………………………………………………… 28

任务2.5 列表标签 ……………………………………………………………………… 32

任务2.6 表格标签 ……………………………………………………………………… 36

任务2.7 <div>标签 …………………………………………………………………… 38

任务2.8 项目案例 ……………………………………………………………………… 39

项目3 使用 HTML5新增的标签 ……………………………………… 46

任务3.1 HTML5新增的语义标签 …………………………………………………… 47

任务3.2 HTML5视频、音频标签 ……………………………………………………… 58

任务3.3 项目案例 ……………………………………………………………………… 61

项目4 HTML表单的使用 ……………………………………………… 68

任务4.1 HTML表单标签 ……………………………………………………………… 69

任务4.2 HTML基础表单元素 ………………………………………………………… 70

任务4.3 HTML5新增表单元素 ……………………………………………………… 81

任务4.4 项目案例 ……………………………………………………………………… 87

项目5 使用 CSS设置网页样式 ……………………………………… 93

任务5.1 认识 CSS ……………………………………………………………………… 94

任务5.2 CSS选择器 …………………………………………………………………… 99

任务5.3 CSS文本与字体样式属性 …………………………………………………… 107

任务5.4 CSS背景样式 ………………………………………………………………… 115

任务5.5 CSS的层叠性、继承性和优先级 …………………………………………… 120

任务5.6 项目案例 ……………………………………………………………………… 122

项目6 网页布局与定位 ……………………………………………… 130

任务6.1 网页布局与盒子模型 ………………………………………………………… 131

任务6.2 元素类型与转换 ……………………………………………………………… 136

任务6.3 元素的定位方式 ……………………………………………………………… 137

任务6.4 CSS布局 ……………………………………………………………………… 146

任务6.5 弹性盒子 ……………………………………………………………………… 151

任务6.6 项目案例 ……………………………………………………………………… 159

项目7 制作网页导航条和新闻列表 ………………………………… 167

任务7.1 CSS列表样式 ………………………………………………………………… 168

任务7.2 CSS边框样式 ………………………………………………………………… 174

任务7.3 CSS边距样式 ………………………………………………………………… 179

任务7.4 项目案例 ……………………………………………………………………… 181

项目8 使用 CSS3美化页面 ………………………………………… 196

任务8.1 CSS3边框属性 ……………………………………………………………… 197

任务8.2 文本阴影与文本溢出 ………………………………………………………… 205

任务8.3 图标字体 ……………………………………………………………………… 208

任务8.4 CSS3的2D转换、过渡与动画 ……………………………………………… 211

任务8.5 项目案例 ……………………………………………………………………… 218

项目9 JavaScript基本使用 ………………………………………… 225

任务9.1 JavaScript概述 ……………………………………………………………… 226

任务9.2 JavaScript语言基础 ………………………………………………………… 229

任务9.3 JavaScript程序结构 ………………………………………………………… 234

任务9.4 JavaScript函数 ……………………………………………………………… 238

任务9.5 JavaScript对象 ……………………………………………………………… 240

任务9.6 事件处理 ……………………………………………………………………… 250

任务9.7 项目案例 ……………………………………………………………………… 252

项目10 使用jQuery实现动态效果 …………………………………… 260

任务10.1 jQuery概述 ………………………………………………………………… 261

任务10.2 jQuery的使用 ……………………………………………………………… 262

任务10.3 jQuery选择器 ……………………………………………………………… 265

任务10.4 jQuery的事件绑定与处理 ………………………………………………… 270

任务10.5 jQuery的 DOM 操作 ……………………………………………………… 272

任务10.6 jQuery动画特效 …………………………………………………………… 277

任务10.7 项目案例 …………………………………………………………………… 285

项目11 综合案例 ……………………………………………………… 291

任务11.1 制作页面内容 ……………………………………………………………… 293

任务11.2 完善页面内容 ……………………………………………………………… 314

参考文献 ………………………………………………………………… 319