本书详细介绍了Web前端开发中的三大基础技术：HTML5、CSS3和JavaScript，以及由JavaScript衍生出来的jQuery（包含jQuery UI和jQuery mobile），并在此基础上全面引入Bootstrap开发框架，将Bootstrap各项技术分散在各个章节之中。

主要内容包括：Web前端开发技术概述、文本样式、盒子模型、超链接与导航、图像与多媒体、容器元素、元素定位与桌面端排版、移动端页面布局、CSS动态效果、JavaScript互动页面、jQuery页面特效、响应式布局与Bootstrap框架。

本书以任务为导向，结合了Web前端开发工作领域的最前沿技术，将Web前端开发中需要掌握的知识系统地分布在各个任务之中。学生在操作中真正体会到Web前端开发的思路和技巧，具有很强的操作性。

        随着互联网技术的蓬勃兴起，从桌面端到移动端到元宇宙，无论载体如何变化，互联网内容产品的需求始终巨大。Web 前端开发面向互联网产品，具有巨大的发展潜力，前景方兴未艾，人才需求旺盛。为适应当前职业教育的需要，培养符合 Web 前端开发岗位的专门人才，本书面向高职高专计算机数字媒体技术相关专业的学生，立足“以服务为宗旨，以就业为导向”的国家职业教育发展目标，基于 Web 前端开发的工作过程而编写，突出在知识、能力、素质等方面的培养。
        本书以 Web 前端开发工作领域为主线组织章节，将 Web 前端开发的三大技术：HTML5、CSS3、JavaScript（包含 jQuery、jQuery UI 和 jQuery mobile）连同 Bootstrap 开发框架分散在各个章节之中。全书共 12 章，除第 0 章 Web前端开发技术概述外，其余 11 章分别对应 Web 前端开发工作岗位的 11 个工作领域。本书以任务为导向，将每一章分为四个小节，前三小节按知识点介绍、案例讲解、任务实践进行组织，第四小节“小试牛刀”为课后实践的内容。每一小节的任务在进行工作过程具体步骤之前都有任务描述、任务要求和任务分析，把本任务体现的主题、实现方式和涉及的新技能、新知识融入其中。从而达到深入浅出、循序渐进引导学生学习的目的。
        本书由吴斌新、杨琴、蔡洧轩主编，吴斌新、杨琴具有在职业院校从事数字媒体技术教学的丰富经验，蔡洧轩为数字媒体企业负责人，具有丰富的媒体开发和运营经验。本书由吴斌新负责全书的统稿，以及第 0 章、第 8 章至第 11 章的编写，杨琴负责本书第 1 章至第 6 章的编写，蔡洧轩负责第 7 章的编写。书中部分内容参考了网络资料，由于参考内容来源广泛，篇幅有限，恕不一一列出，在此一并表示感谢。本书在编写过程中，由于时间仓促，疏漏和不足在所难免，希望广大读者批评指正。意见反馈和交流邮箱：wubx@sziit.edu.cn。

第 0 章 Web 前端开发技术概述......................... 1
0.1 Web 的基本概念............................................... 2
0.1.1 浏览器........................................................2
0.1.2 网页（Web pages）..................................2
0.1.3 网站（Web site）......................................2
0.1.4 网址（URL）............................................2
0.1.5 Web 前端（Front-end）与后端

（Back-end） ............................................3

0.2 HTML 概述........................................................ 4
0.2.1 HTML 标签 ...............................................4
0.2.2 页面元素....................................................5
0.2.3 网页的基本结构........................................5
0.2.4 标签属性....................................................6
0.3 CSS 概述 ............................................................ 7
0.3.1 CSS 的作用................................................7
0.3.2 CSS 基本结构............................................8
0.3.3 CSS 基本规则............................................8
0.3.4 CSS 的控制方式........................................9
0.4 JavaScript 概述 ................................................ 10
0.4.1 JavaScript 的作用....................................10
0.4.2 网页中使用 JavaScript 的方式...............11
0.5 Web 前端开发工具简介................................. 12
0.5.1 Dreamweaver ...........................................12
0.5.2 HbuilderX.................................................12
0.5.3 Visual Studio Code ..................................12
小结........................................................................... 12
思考与练习............................................................... 12
第 1 章 文本样式 ............................................ 13
1.1 HTML 文本元素.............................................. 14
1.1.1 HTML 文本控制标签 .............................14
1.1.2 特殊字符..................................................15
1.1.3 行元素与块元素......................................15
1.1.4 HTML 文本控制标签应用案例............. 16
1.1.5 任务 1-1：制作循环展示的三个网页 ... 16
1.2 CSS 选择器...................................................... 18
1.2.1 基本选择器............................................. 18
1.2.2 选择器的组合......................................... 20
1.2.3 选择器的级联......................................... 20
1.2.4 属性选择器............................................. 21
1.2.5 伪类......................................................... 21
1.2.6 伪元素..................................................... 23
1.2.7 选择器应用综合案例............................. 23
1.2.8 任务 1-2：使用 CSS 选择器制作网页... 25
1.3 CSS 文字样式.................................................. 27
1.3.1 字体属性................................................. 27
1.3.2 文本属性................................................. 29
1.3.3 Bootstrap 文字排版................................. 31
1.3.4 文字样式案例......................................... 32
1.3.5 任务 1-3：制作诗歌网页的文字样式 ... 33
1.4 小试牛刀.......................................................... 34
小结........................................................................... 35
思考与练习............................................................... 35
第 2 章 盒子模型............................................. 37
2.1 盒子模型基本属性 ......................................... 38
2.1.1 内边距 padding 属性.............................. 38
2.1.2 外边距 margin 属性................................ 38
2.1.3 边框 border 属性..................................... 40
2.1.4 盒子空间................................................. 41
2.1.5 轮廓 outline 属性.................................... 42
2.1.6 Bootstrap 下的盒子................................. 43
2.1.7 盒子模型案例......................................... 44
2.1.8 任务 2-1：用 Bootstrap 边距类和边框
类制作页面............................................. 45
2.2 盒子美化.......................................................... 47
2.2.1 盒子边框美化......................................... 47


2.2.2 背景图像..................................................47
2.2.3 背景颜色与渐变......................................49
2.2.4 盒子美化案例..........................................50
2.2.5 任务 2-2：运用多图像背景制作页面 ....52
2.3 盒子溢出处理 ................................................. 54
2.3.1 行内块 inline-block .................................54
2.3.2 溢出处理相关属性..................................55
2.3.3 溢出处理案例..........................................56
2.3.4 任务2-3：运用 inline-block 制作网页 ....57
2.4 小试牛刀.......................................................... 59
小结........................................................................... 60
思考与练习............................................................... 60
第 3 章 超链接与导航...................................... 61
3.1 超链接标签 ..................................................... 61
3.1.1 超链接标签.......................................62
3.1.2 超链接案例..............................................63
3.1.3 任务 3-1：用锚点链接和:target 伪类
制作单页面网站......................................67
3.2 超链接的美化 ................................................. 70
3.2.1 锚伪类......................................................70
3.2.2 项目列表标签..........................................70
3.2.3 项目列表的样式......................................71
3.2.4 超链接样式美化案例..............................72
3.2.5 任务 3-2：制作“方寸神游”页面
超链接样式..............................................73
3.3 Bootstrap 导航.................................................. 77
3.3.1 Bootstrap 导航类 .....................................77
3.3.2 Bootstrap 面包屑导航.............................78
3.3.3 Bootstrap 分页导航.................................78
3.3.4 Bootstrap 导航应用案例.........................79
3.3.5 任务 3-3：使用 Bootstrap 导航制作
选项卡面板..............................................80
3.4 小试牛刀.......................................................... 83
小结........................................................................... 84
思考与练习............................................................... 84
第 4 章 图像与多媒体...................................... 86
4.1 网页图像.......................................................... 86
4.1.1 网页图像标签.............................. 87
4.1.2 图像热区................................................. 87
4.1.3 图像相关样式......................................... 88
4.1.4 Bootstrap 图片类..................................... 88
4.1.5 图像应用案例......................................... 88
4.1.6 任务 4-1：运用图像热区制作地图
链接页面................................................. 89
4.2 CSS 雪碧图（Sprite） .................................... 91
4.2.1 雪碧图技术概述..................................... 91
4.2.2 雪碧图技术应用案例............................. 92
4.2.3 任务 4-2：使用雪碧图技术制作页面 ... 93
4.3 多媒体网页 ..................................................... 98
4.3.1 音频视频相关标签................................. 98
4.3.2 多媒体元素应用案例............................. 99
4.3.3 任务 4-3：制作音视频多媒体网页..... 100
4.4 小试牛刀........................................................102
小结.........................................................................104
思考与练习.............................................................104
第 5 章 容器元素........................................... 105
5.1 表格................................................................106
5.1.1 表格相关标签....................................... 106
5.1.2 表格边框重叠 CSS 样式属性
border-collapse ...................................... 108
5.1.3 Bootstrap 表格预定义类....................... 108
5.1.4 使用 Bootstrap 制作表格案例.............. 109
5.1.5 任务 5-1：在网页中使用表格............. 109
5.2 表单................................................................113
5.2.1 表单标签................................... 113
5.2.2 表单域................................................... 113
5.2.3 表单按钮............................................... 118
5.2.4 表单元素相关的其他属性................... 119
5.2.5 Bootstrap 表单元素样式....................... 120
5.2.6 使用 Bootstrap 制作一个网上调查
表单案例............................................... 120
5.2.7 任务 5-2：运用 HTML5 表单标签
制作注册页面....................................... 121
5.3 窗口容器........................................................125
5.3.1 浮动框架标签........................ 125
5.3.2 Bootstrap 窗口容器...............................125
5.3.3 Bootstrap 模态框应用案例...................127
5.3.4 任务 5-3：运用 iframe 制作子窗口
网页........................................................127
5.4 小试牛刀........................................................ 129
小结......................................................................... 131
思考与练习............................................................. 131
第 6 章 元素定位与桌面端排版...................... 132
6.1 CSS 浮动定位................................................ 132
6.1.1 CSS 浮动相关样式................................133
6.1.2 图文混排................................................134
6.1.3 浮动定位实现图文混排案例................134
6.1.4 任务 6-1：运用浮动定位制作左中右
版式电子相册........................................135
6.2 position 位置定位.......................................... 138
6.2.1 元素位置 position 属性.........................138
6.2.2 z-index 属性...........................................139
6.2.3 位置定位应用案例................................139
6.2.4 任务 6-2：运用元素位置定位属性
制作个人页面........................................141
6.3 页面结构元素及桌面端排版....................... 145
6.3.1 页面结构元素标签................................145
6.3.2 元素居中排版........................................145
6.3.3 页面元素居中排版案例........................146
6.3.4 任务 6-3：运用 HTML5 页面结构
元素标签进行居中排版........................147
6.4 小试牛刀........................................................ 150
小结......................................................................... 151
思考与练习............................................................. 152
第 7 章 移动端页面布局 ................................ 153
7.1 Flex 弹性盒子布局 ....................................... 153
7.1.1 Flex 作用在容器上的属性....................154
7.1.2 Flex 作用在项目上的属性....................156
7.1.3 弹性盒子布局案例................................157
7.1.4 任务 7-1：使用 Flex 制作“公司简介”
移动端页面............................................159
7.2 Grid 网格布局 ............................................... 162
7.2.1 Grid 作用在容器上的属性 ...................163
7.2.2 Grid 作用在项目上的属性................... 165
7.2.3 网格布局案例....................................... 166
7.2.4 任务 7-2：使用 Grid 布局制作“联系
我们”移动端页面............................... 167
7.3 分栏布局实现瀑布流...................................170
7.3.1 分栏及相关属性................................... 171
7.3.2 使用分栏布局实现瀑布流案例........... 173
7.3.3 任务 7-3：使用分栏布局制作瀑布流
页面....................................................... 174
7.4 小试牛刀........................................................175
小结.........................................................................177
思考与练习.............................................................177
第 8 章 CSS 动态效果................................... 179
8.1 CSS3.0 变形 ...................................................179
8.1.1 CSS3.0 变形属性.................................. 180
8.1.2 变形基准点 transform-origin 属性....... 182
8.1.3 CSS3.0 变形效果案例.......................... 183
8.1.4 任务 8-1：基于 CSS3.0 变形制作
页面....................................................... 185
8.2 CSS3.0 过渡 ...................................................188
8.2.1 CSS3.0 过渡相关属性.......................... 188
8.2.2 CSS3.0 过渡效果案例.......................... 190
8.2.3 任务 8-2：基于 CSS3.0 过渡制作
照片墙动态效果页面........................... 191
8.3 CSS3.0 动画 ...................................................197
8.3.1 CSS3.0 动画相关属性.......................... 197
8.3.2 CSS3.0 动画效果案例.......................... 198
8.3.3 任务 8-3：基于 CSS3.0 动画制作
页面....................................................... 200
8.4 小试牛刀........................................................204
小结.........................................................................206
思考与练习.............................................................206
第 9 章 JavaScript 互动页面 ......................... 207
9.1 JavaScript 基础 .............................................. 208
9.1.1 在网页中插入脚本程序的方式........... 208
9.1.2 JavaScript 语法...................................... 208
9.1.3 JavaScript 函数...................................... 211
9.1.4 JavaScript 对象......................................212
9.1.5 JavaScript 的计时方法..........................215
9.1.6 JavaScript 应用案例..............................215
9.1.7 任务 9-1：用 JavaScript 制作购物节
宣传页面................................................217
9.2 流程控制........................................................ 218
9.2.1 条件语句................................................219
9.2.2 循环语句................................................219
9.2.3 JavaScript 流程案例..............................220
9.2.4 任务 9-2：制作给图像打分评价的
页面........................................................221
9.3 文档对象模型（DOM） .............................. 224
9.3.1 DOM 属性与方法 ................................224
9.3.2 JavaScript 的对象事件处理程序..........226
9.3.3 window 对象..........................................227
9.3.4 基于 DOM 编程的表单事件案例 ........229
9.3.5 任务 9-3：制作音乐在线选歌和播放
页面........................................................230
9.4 小试牛刀........................................................ 233
小结......................................................................... 234
思考与练习............................................................. 234
第 10 章 jQuery 页面特效 ............................. 236
10.1 jQuery 基础.................................................. 237
10.1.1 jQuery 工厂函数与选择器..................237
10.1.2 jQuery 基本操作..................................238
10.1.3 jQuery 动画效果..................................241
10.1.4 jQuery 事件方法..................................241
10.1.5 下拉菜单制作案例..............................242
10.1.6 任务 10-1：运用 jQuery 制作动画
页面......................................................244
10.2 jQuery UI...................................................... 246
10.2.1 jQuery UI 的内核文件 ........................246
10.2.2 jQuery UI 小部件 ................................248
10.2.3 jQuery UI 特效 ....................................251
10.2.4 jQuery UI 交互 ....................................252
10.2.5 jQuery UI 应用案例 ............................253
10.2.6 任务 10-2：运用 jQuery UI 制作
页面特效..............................................255
10.3 jQuery mobile ...............................................258
10.3.1 jQuery mobile 的内核......................... 258
10.3.2 jQuery mobile 常用组件..................... 259
10.3.3 jQuery mobile 事件............................. 263
10.3.4 jQuery mobile 组件使用案例............. 264
10.3.5 任务 10-3：使用 jQuery mobile 制作
移动端页面......................................... 266
10.4 小试牛刀......................................................269
小结.........................................................................270
思考与练习.............................................................270
第 11 章 响应式布局与 Bootstrap 框架 .......... 272
11.1 响应式网页 .................................................272
11.1.1 视口 viewport...................................... 273
11.1.2 媒体查询 Media Query....................... 273
11.1.3 自适应的尺寸单位............................. 275
11.1.4 横屏竖屏响应式页面案例................. 276
11.1.5 任务 11-1：通过媒体查询实现
响应式页面......................................... 277
11.2 Bootstrap 栅格系统实现响应式页面.........280
11.2.1 Bootstrap 栅格系统............................. 280
11.2.2 响应式隐藏、响应式显示、响应式
图片..................................................... 282
11.2.3 Bootstrap 栅格系统案例..................... 282
11.2.4 任务 11-2：使用 Bootstrap 栅格系统
进行页面布局..................................... 284
11.3 Bootstrap 响应式组件与插件.....................290
11.3.1 响应式组件......................................... 290
11.3.2 Bootstrap 插件..................................... 293
11.3.3 Bootstrap 插件应用案例..................... 297
11.3.4 任务 11-3：使用 Bootstrap 插件制作
轮播页面............................................. 299
11.4 小试牛刀......................................................302
小结.........................................................................303
思考与练习.............................................................303
参考文献 ......................................................... 304

吴斌新，深圳信息职业技术学院副教授。杨琴，深圳信息职业技术学院副教授。蔡洧轩，南斗星文化传媒（深圳）有限公司负责人。

本书适合作为高等职业院校各专业“网页设计与制作”课程的教材，也可作为前端开发的培训教材，还可作为相关技术人员的参考用书