本书系统地介绍了Web前端开发的基础知识和实际应用，主要内容包括网页开发起步、CSS样式入门、排列网页内容、表单与框架、网页布局设计、CSS样式进阶、响应式网页设计、网页脚本编程。
本书采用理论与实践相结合的编写方式，每个重要知识都配有示例代码，每章最后一节为学生实践任务，采用任务驱动的方式完成实践内容。本书还配有大量的微课视频帮助学生理解知识点，方便学生预习和实践。
本书适合作为高职或应用型本科院校计算机及相关专业的教材，也可作为Web开发爱好者的入门参考用书。

随着前端技术的发展，越来越多的Web系统注重前端界面的漂亮、友好与易操作，企业对前端技术人才需求量逐年增加。目前很多高校都开设了HTML、JavaScript等技术相关的课程，随着技术的发展，特别是移动互联网的出现，促使移动设备大量增加，用手机上网的用户越来越多，为了适应技术的发展，本书以HTML5作为网页开发基础，还介绍了设计响应式开发框架Bootstrap，jQuery库的使用让学生从学习之初就对前端相关技术有一个概括的了解，为学生深入学习相关内容打下基础。
本书采用知识与案例结合的编写方式，首先介绍相关知识的理论内容，然后给出示例代码讲解知识的应用，最后通过实践任务让学生进行实践练习，完成知识的迁移。学生在看书的过程中还可以扫描二维码观看视频，直观地了解每个知识点的用法，这样避免了看书后不知道如何操作的弊端。本书涉及面广，在内容上对前端工程师所需要的基础技术都进行了介绍，还引入了一些比较常见的框架技术，使得学生能够快速地开发适应各种屏幕设备的网页。
本书分为4个模块8章，HTML模块（第1章）、CSS模块（第2 ~ 6章）、Bootstrap模块（第7章）、JavaScript与jQuery模块（第8章）。具体安排如下：
第1章为网页开发起步，包括VS Code介绍、HTML 5网页的基本结构、文本相关的标签、图片标签、超链接标签和标签的分类。最后能够制作一个个人简历页面。
第2章为CSS样式入门，包括CSS样式的语法、CSS的三种使用方式、文本修饰的样式、背景样式、盒子模型样式相关的属性等。最后学生要模仿制作出百度首页和登录页面。
第3章为排列网页内容，包括无序列表、有序列表、定义列表、基本的表格与表格的美化。最后要完成销售报表页面的制作。
第4章为表单与框架，包括form标签、文本框、密码框、单选按钮、复选框、下拉列表、按钮等表单元素，还介绍了iframe内嵌框架的使用。最后需要完成SHOPMALL的登录与注册页面。
第5章为网页布局设计，包括标准文档流、网页元素的定位、盒子的浮动、常用的布局类型，这些知识是全书的重难点。最后需要完成网页整体布局与菜单的局部布局。
第6章为CSS样式进阶，包括并集选择器、交集选择器、属性选择器、层次选择器等，还介绍了CSS3中引入的新样式属性，最后需要完成照片墙和推荐商品列表的任务。
第7章为响应式网页设计，包括响应式页面设计的原理与方法、Bootstrap框架的使用、栅格系统、Bootstrap组件等内容。最后需要完成一个典型企业网站页面的设计。
第8章为网页脚本编程，包括JavaScript技术基础、函数与事件、DOM模型、jQuery库的使用。最后需要完成论坛发帖的案例。
本书配套有PPT电子课件、教学大纲、教学计划和参考代码，读者可以从中国铁道出版社有限公司网站（http://www.tdpress.com/51eds/）获取。本书由罗剑（武汉晴川学院）、尹薇婷（武汉信息传播职业技术学院）、廖春琼（武汉信息传播职业技术学院）、段巧灵（武汉晴川学院）编著。在编写的过程中，得到了中国铁道出版社有限公司、武汉晴川学院、武汉信息传播职业技术学院领导的支持，在此深表感谢。
本书是全国高等院校计算机基础教育研究会计算机基础教育教学研究项目（2019-AFCEC-319）的成果。
由于作者水平有限，技术更新较快，篇幅受限，书中难免有不妥之处，敬请读者指正。
编　者
2020年5月

目　录
第1章　网页开发起步...............1
1.1　HTML文档的结构...................................2
1.1.1　HTML的基本结构...................2
1.1.2　使用记事本开发HTML页面....3 
【示例1.1】使用记事本开发HTML........3
1.1.3　使用VS Code开发网页............4
1.1.4　设置页面背景色和背景图片....8 
【示例1.2】设置网页背景颜色...........9 
【示例1.3】设置背景图片...................9
1.2　基础标签........................................................10
1.2.1　文本类标签..............................10 
【示例1.4】标题标签的使用.............11 
【示例1.5】 p标签的使用................12 
【示例1.6】行内标签的使用.............13 
【示例1.7】换行标签的使用.............14
1.2.2　水平线标签..............................14
 【示例1.8】水平线的使用.................15
1.2.3　HTML文档注释和特殊符号....15 
【示例1.9】 在网页底部添加
版权部分........................16
1.3　图像标签........................................................17
1.3.1　图像标签的使用......................17 
【示例1.10】图片的使用...................18
1.3.2　图片的相对路径与绝对路径..19
1.4　超链接标签..................................................20
1.4.1　页面间链接..............................20 
【示例1.11】超链接的使用...............21 
【示例1.12】网站内页面间的链接....22
1.4.2　锚点链接..................................23 
【示例1.13】锚点链接......................23
1.4.3　电子邮件链接..........................25 
【示例1.14】邮箱链接的使用...........25
1.5　块级标签与行内标签.............................26
1.5.1　div标签和span标签...............26 
【示例1.15】div标签的使用.............26 
【示例1.16】span 标签的使用...........27
1.5.2　 HTML的标签分类................27
实践任务....................................................................28
小　　结....................................................................29
习　　题....................................................................29
第2章　CSS样式入门.............31
2.1　CSS的基本语法.......................................32
2.1.1　CSS样式表概述......................32
2.1.2　样式表的基本语法..................34
2.1.3　样式表的选择器......................34
 【示例2.1】标签选择器应用.............35 
【示例2.2】类样式选择器案例.........37 
【示例2.3】ID样式选择器示例........38
2.2　常见的样式属性及其应用..................39
2.2.1　文本及字体属性......................39 
【示例2.4】文本及字体样式设置.....40
2.2.2　盒子模型..................................41 
【示例2.5】边框样式设置.................44 
【示例2.6】填充样式设置.................45 
【示例2.7】 块级元素和行内元素
设置宽与高....................47
2.2.3　背景属性..................................49 
【示例2.8】背景相关样式设置.........50
2.3　样式使用分类.............................................51
2.3.1　行内样式表..............................51

【示例2.9】行内样式设置................. 52
2.3.2　内嵌样式表..............................52
2.3.3　外部样式表..............................52
实践任务.................................................................... 55
小　　结.................................................................... 63
习　　题.................................................................... 64
第3 章　排列网页内容..............66
3.1　列表标签........................................................ 67
3.1.1　无序列表..................................67
【示例3.1】无序列表标签的使用..... 68
3.1.2　有序列表..................................69
【示例3.2】有序列表标签的使用..... 69
3.1.3　定义列表..................................70
【示例3.3】定义列表标签的使用..... 71
【示例3.4】定义列表混合布局......... 72
3.2　表格标签........................................................ 73
3.2.1　表格的基本结构......................73
3.2.2　表格的使用..............................74
【示例3.5】表格标签的应用............. 75
3.2.3　合并单元格..............................76
【示例3.6】colspan 属性的用法........ 77
【示例3.7】rowspan 属性的用法....... 79
【示例3.8】跨行与跨列的同时应用.... 81
3.2.4　表格的高级用法......................82
【示例3.9】表格高级标签的应用..... 83
3.3　表格的美化与布局.................................. 85
3.3.1　表格的美化..............................85
【示例3.10】 表格宽度、高度、.
边框属性的用法........... 85
【示例3.11】表格背景和对齐设置.... 87
【示例3.12】 设置表格单元格的.
间距与填充................... 89
3.3.2　表格布局..................................90
实践任务.................................................................... 94
小　　结.................................................................... 95
习　　题.................................................................... 96
第4 章　表单与框架................98
4.1　表单................................................................... 99
4.1.1　表单概述..................................99
4.1.2　表单的基本语法....................100
【示例4.1】用户登录...................... 101
4.2　表单元素..................................................... 102
4.2.1　表单元素的基本格式............102
4.2.2　表单元素介绍........................103
4.3　表单的综合应用..................................... 110
4.4　内嵌框架..................................................... 114
4.4.1　的使用....................114
【示例4.2】内嵌框架的使用........... 114
4.4.2　超链接与内嵌框架关联........115
【示例4.3】内嵌框架的使用........... 116
实践任务................................................................. 117
小　　结................................................................. 127
习　　题................................................................. 128
第5 章　网页布局设计............ 130
5.1　盒子的定位................................................ 131
5.1.1　标准文档流............................131
【示例5.1】display 属性的使用....... 132
【示例5.2】 行内块inline-block.
属性值的使用............... 135
5.1.2　盒子的定位............................136
【示例5.3】固定定位的使用........... 142
5.2　盒子的浮动................................................ 144
5.2.1　float 属性................................144
【示例5.4】 使用float 实现文字.
绕排图片...................... 145
5.2.2　inline-block 与浮动的区别....153
5.3　页面整体布局.......................................... 153




5.3.1　页面布局概述........................153
5.3.2　布局案例分析........................155
实践任务................................................................. 161
小　　结................................................................. 168
习　　题................................................................. 169
第6 章　CSS 样式进阶........... 170
6.1　CSS 样式选择器.................................... 171
6.1.1　基本选择器分类....................171
6.1.2　复合选择器分类....................171
【示例6.1】层次选择器的使用....... 173
6.1.3　伪类选择器............................175
【示例6.2】 超链接伪类样式的.
使用.............................. 175
【示例6.3】伪类选择器的使用....... 177
6.1.4　属性选择器............................178
【示例6.4】属性选择器的使用....... 179
6.2　CSS 样式的特性与常用属性......... 180
6.2.1　CSS 样式的特性....................180
【示例6.5】 CSS 的继承性.
与层叠性...................... 180
6.2.2　样式属性分类........................181
6.2.3　页面布局属性........................184
6.3　CSS3 的其他样式................................. 185
6.3.1　盒子模型的圆角....................185
【示例6.6】圆角边框的使用........... 185
6.3.2　盒子阴影................................186
【示例6.7】 盒子阴影box-.
shadow 的使用.............. 187
【示例6.8】 设置水平垂直偏移.
得到阴影效果............... 189
6.3.3　动画设置................................190
实践任务................................................................. 198
小　　结................................................................. 204
习　　题................................................................. 205
第7 章　响应式网页设计.......... 207
7.1　响应式网页概述..................................... 208
7.1.1　响应式网页的起源................208
7.1.2　响应式网页的技术手段........208
7.2　Bootstrap 概述..................................... 209
7.2.1　Bootstrap 的特点....................210
7.2.2　Bootstrap 的结构....................210
【示例7.1】 使用Bootstrap 框架.
开发第一个网页........... 211
7.3　栅格系统..................................................... 213
7.3.1　栅格系统原理........................213
【示例7.2】栅格系统的使用........... 213
7.3.2　栅格系统的其他用法............216
【示例7.3】列偏移.......................... 216
7.4　CSS 全局样式......................................... 218
7.4.1　基础排版................................218
7.4.2　表格.......................................220
7.4.3　按钮.......................................221
7.4.4　图像.......................................222
7.4.5　表单.......................................223
【示例7.4】基本表单的使用........... 223
7.5　Bootstrap 组件..................................... 225
7.5.1　图标.......................................226
【示例7.5】小图标的使用............... 226
7.5.2　下拉菜单................................227
7.5.3　按钮组...................................228
7.5.4　导航.......................................229
7.5.5　导航栏...................................230
【示例7.6】导航条的使用............... 230
【示例7.7】响应式导航栏的实现.... 232
7.5.6　缩略图...................................234
【示例7.8】缩略图的使用............... 234
实践任务................................................................. 235
小　　结................................................................. 242

习　　题................................................................. 243
第8 章　网页脚本编程............ 245
8.1　JavaScript 概述.................................... 246
8.1.1　JavaScript 简介.......................246
8.1.2　基本语法................................247
8.1.3　逻辑控制语句........................249
【示例8.1】 输出1~10 之间的.
奇数.............................. 250
8.2　函数与事件................................................ 251
8.2.1　函数的定义与调用................252
8.2.2　变量的作用域........................252
8.2.3　事件处理................................254
【示例8.2】验证邮箱格式............... 255
8.2.4　JavaScript 的内置对象............257
【示例8.3】显示系统时间............... 257
【示例8.4】动态时钟...................... 259
8.3　JavaScript 操作DOM 元素........ 261
8.3.1　浏览器对象模型....................261
8.3.2　文档对象模型........................263
【示例8.5】动态表格...................... 266
8.3.3　访问元素的CSS 样式...........269
8.4　jQuery.......................................................... 270
8.4.1　jQuery 库的导入....................270
【示例8.6】第一个jQuery 代码...... 271
8.4.2　jQuery 选择器........................271
8.4.3　jQuery 函数...........................273
【示例8.7】动画特效函数的使用.... 274
实践任务................................................................. 275
小　　结................................................................. 278
习　　题................................................................. 279
参 考 文 献............................................................. 280

罗剑，中山大学硕士研究生毕业并获得硕士学位。原在武汉信息传播职业技术学院工作，自2019年至今在武汉晴川学院担任软件工程教师、高级工程师。

本书采用理论与实践相机和的编写方式