“十三五”高等职业教育计算机类专业规划教材：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月

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

      罗剑，中山大学硕士研究生毕业并获得硕士学位。原在武汉信息传播职业技术学院工作，自2019年至今在武汉晴川学院担任软件工程教师、高级工程师。主讲课程：《JavaEE综合应用开发》、《Android综合应用开发》、《大型应用软件开发综合实训》、《大数据案例实践》。学术成果：主持全国高等院校计算机基础教育研究会项目：在线课程、课程整体解决方案的优质教学资源建设融合的研究；主编 “十三五”高等职业教育规划教材《C语言程序设计》、主编普通高等教育“十三五”规划教材《Java基础案例教程》、主编《Python程序设计基础教程》，近年来申请软件著作权4项，以作者发表论文4篇。主要荣誉：指导学生参加“2019年全国高校计算机能力挑战赛”获得Python程序设计全国决赛三等奖，被评为优秀指导教师。尹薇婷，女，汉族，高级工程师，中共党员，现任武汉信息传播职业技术学院信息工程学院教师。持有信息系统项目管理师证书。主要从事软件开发前端开发。高职院校任职多年，主要讲授软件技术专业核心专业课，负责软件技术专业人才培养的课程规划与专业建设工作。公开发表论文多篇。廖春琼，女，汉族，高级工程师，中共党员，现任武汉信息传播职业技术学院软件技术教研室主任。持有信息系统项目管理师证书。主要从事软件开发前端开发。2005年毕业于长江大学计算科学与技术专业；在企业一线工作2年，在软件培训机构任教4年，高职院校任职多年，主要讲授软件技术专业核心专业课，负责软件技术专业人才培养的课程规划与专业建设工作。公开发表论文7篇，出版教材2本，完成科研项目2个，参与教研项目2个，4个专业著作权，4个科技成果奖。

目　录

第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　<iframe> 的使用....................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】 超链接伪类样式的.

使用...........