本书是“十四五”高等职业教育新形态一体化教材，介绍了 Web 应用程序前端开发的基

础技能。全书采用项目驱动式编写，共包括 12 个项目：项目 1 到项目 4 介绍 HTML（超文本

标记语言）的基础语法和使用，帮助读者学习如何使用 HTML 搭建网页结构；项目 5 到项目

7 介绍 CSS（层叠样式表）的基础语法和使用，让读者可以通过 CSS 修饰美化网页；项目 8

到项目 12 讲解 JavaScript 的基本语法和在网页中的使用，赋予网页与用户进行交互的能力。

通过学习本书，读者可以掌握前端网页开发的基础技能，为后续前端相关框架的学习奠定基础。

本书适合作为高等职业院校计算机及相关专业基础课教材，也可作为 Web 应用程序开发

初学者的参考书。

2018 年 2 月 5 日，教育部、国家发展和改革委员会、工业和信息化部、财政部、人

力资源和社会保障部、国家税务总局印发《职业学校校企合作促进办法》，全国高等职业

院校纷纷响应，积极开展校企合作。各行业的代表企业也积极参与高职院校的校企合作，

共同推进校企合作实施，以新的形式进行人才培养，为社会和企业提供优质的人才而努力。

党的二十大报告明确提出“加快构建新发展格局，着力推动高质量发展”。其中明确

提出“建设现代化产业体系”“推动战略性新兴产业融合集群发展，构建新一代信息技术、

人工智能、生物技术、新能源、新材料、高端装备、绿色环保等一批新的增长引擎”。与

此同时，要求“统筹职业教育、高等教育、继续教育协同创新，推进职普融通、产教融合、

科教融汇，优化职业教育类型定位”。

在这样的背景下，科大讯飞股份有限公司（以下简称“科大讯飞”）作为国内人工智

能语音处理的龙头企业，积极参与校企合作。在校企合作的实践过程中，科大讯飞联合曲

靖职业技术学院等高职院校的专家共同研发大数据、人工智能专业群的高职层次专业人才

培养方案和培养体系，更好地为社会培养人工智能、大数据相关专业的技术人才。

在人才培养过程中，科大讯飞与曲靖职业技术学院专家共同组织研发了基于大数据、

人工智能专业高等职业教育人才培养体系的配套教材。其中，本书是大数据、人工智能专

业群的专业基础课程教材。在本书的编写过程中，汲取了科大讯飞在高职人才培养的经验

和曲靖职业技术学院专家的意见，结合人才培养项目式教学理念，按照新形态一体化教材

的开发标准，由浅入深、循序渐进地引导读者学习 Web 前端开发的基础技能（HTML、

CSS、JavaScript）。本书可以帮助读者完成网页结构搭建、网页外观设计与美化、网页交

互行为的实现等工作。

本书每个项目都以一个项目案例作为核心，在此基础上通过项目导入、学习目标、相

关知识、项目实施、小结、练习题等多方面培养 Web 前端开发的基础技能。同时每个项

目配有大量的实践案例，以便于读者更好地学习和实践。本书每个项目的实践案例均提供

了项目源代码以及配套的项目学习微视频，以更好地帮助读者学习。

读者通过学习本书，既能了解 Web 前端开发基础理论知识和概念，又能学习前端开

发的技能和企业实践技巧，还能独立实践 Web 前端开发的技术知识，为后续进阶课程的

学习打下基础。

本书由曲靖职业技术学院余量、霍红艳任主编，由曲靖职业技术学院金正任副主

编，科大讯飞公司工程师张盛泉、彭波、舒东、蔡兵、姜玮、刘良琨和曲靖职业技术学院

杨继婷、周林娥、甘华烨、毛亚妮、黄显丽参与编写。具体编写分工如下：项目 1 由杨继婷、

周林娥编写；项目 2 由甘华烨、毛亚妮编写；项目 3 由张盛泉、黄显丽编写；项目 4 由

彭波编写；项目 5 由舒东编写；项目 6 和项目 7 由余量编写；项目 8 和项目 9 由霍红艳编

写；项目 10 由金正编写；项目 11 由蔡兵编写；项目 12 由姜玮、刘良琨编写。余量负责

全书统稿定稿。

由于编者水平有限，书中不足与疏漏之处在所难免，敬请广大专家读者批评指正。

编者

2023 年 3 月

项目1 个人图片展示项目 . 1

1.1项目导入.1

1.2学习目标.2

1.2.1职业能力 2

1.2.2知识目标 2

1.2.3职业素养 2

1.3相关知识.2

1.3.1 HTML的产生和发展历史 2

1.3.2 HTML语法基础 3

1.3.3图片标签的使用 5

1.3.4图片的引用 5

1.3.5常用Web前端开发工具 .6

1.4项目实施.11

小结 .14

练习题.14

项目2 春节简介网页制作 . 15

2.1项目导入.15

2.2学习目标.16

2.2.1职业能力 16

2.2.2知识目标 16

2.2.3职业素养 16

2.3相关知识.16

2.3.1段落标签的使用 16

2.3.2文本格式化 17

2.3.3链接标签的使用 19

2.4项目实施.21

小结 .24

练习题.25

项目3 网页计划表制作  26

3.1项目导入.26

3.2学习目标.26

3.2.1职业能力 26

3.2.2知识目标 27

3.2.3职业素养 27

3.3相关知识.27

3.3.1表格标签的使用 27

3.3.2列表标签的使用 30

3.4项目实施.31

小结 .35

练习题.36

项目4 注册页面制作 . 37

4.1项目导入.37

4.2学习目标.37

4.2.1职业能力 37

4.2.2知识目标 38

4.2.3职业素养 38

4.3相关知识.38

4.3.1标签的使用 38

4.3.2表单标签的使用39

4.4项目实施.46

小结 .49

练习题.49

项目5 “某趣阁”网站注册表单制作 . 50

5.1项目导入.50

5.2学习目标.51

5.2.1职业能力 51

5.2.2知识目标 51

5.2.3职业素养 51

5.3相关知识.51

5.3.1 CSS的相关概念 .51

5.3.2 CSS行内样式表的使用 .52

5.3.3 CSS字体常用属性的使用 .53

5.3.4 CSS背景相关属性的使用 .60

5.3.5 CSS边框相关属性的使用 .66

5.4项目实施.72

小结 .76

练习题.77

项目6 某招聘网站登录网页制作. 78

6.1项目导入.78

6.2学习目标.79

6.2.1职业能力 79

6.2.2知识目标 79

6.2.3职业素养 79

6.3相关知识.79

6.3.1 CSS内嵌样式表的使用 .79

6.3.2 CSS盒子模型的概念 .85

6.3.3 DIV+CSS布局的原理 .86

6.3.4盒子模型相关的CSS属性的使用 .86

6.3.5绝对定位和相对定位的CSS的使用 .88

6.3.6 HTML5中提供的新的布局元素 91

6.4项目实施.91

小结 .102

练习题.102

项目7 某网上商城体验店网页制作  103

7.1项目导入.103

7.2学习目标.104

7.2.1职业能力 104

7.2.2知识目标 104

7.2.3职业素养 104

7.3相关知识.104

7.3.1 CSS外部样式表的使用 .104

7.3.2 CSS的子选择器和组合选择器的使用 .107

7.3.3 CSS的伪类选择器的使用 .108

7.3.4 display属性的使用  110

7.4项目实施.113

小结 .121

练习题.122

项目8 简易网页计算器  123

8.1项目导入.123

8.2学习目标.125

8.2.1职业能力 125

8.2.2知识目标 125

8.2.3职业素养 125

8.3相关知识.125

8.3.1在网页中使用JavaScript程序 .125

8.3.2变量 127

8.3.3数据类型概念 128

8.3.4常用的JavaScript数据类型 .128

8.3.5运算符 129

8.3.6程序流程控制结构 131

8.3.7简单的输入和输出 135

8.3.8程序注释 136

8.4项目实施.137

小结 .140

练习题.140

项目9 统计成绩单 142

9.1项目导入.142

9.2学习目标.142

9.2.1职业能力 142

9.2.2知识目标 142

9.2.3职业素养 143

9.3相关知识.143

9.3.1 JavaScript常用内置对象 .143

9.3.2 Math对象的使用 .143

9.3.3 Date对象的使用 143

9.3.4 String对象的使用 144

9.3.5 Array对象的使用 145

9.3.6函数的使用 146

9.4项目实施.148

小结 .152

练习题.153

项目10 调色板 . 154

10.1项目导入.154

10.2学习目标.155

10.2.1职业能力 155

10.2.2知识目标 155

10.2.3职业素养 155

10.3相关知识.155

10.3.1事件类型 155

10.3.2事件处理程序 156

10.3.3事件对象 157

10.3.4事件流 158

10.4项目实施.160

小结 .164

练习题.164

项目11 随机菜单生成器制作. 165

11.1项目导入.165

11.2学习目标.166

11.2.1职业能力 166

11.2.2知识目标 166

11.2.3职业素养 166

11.3相关知识.166

11.3.1 DOM的相关概念 .166

11.3.2获取DOM元素 .167

11.3.3操作元素内容 168

11.3.4操作元素属性 168

11.3.5 DOM节点操作 .173

11.4项目实施.174

小结 .177

练习题.178

项目12 整点报时时钟 . 179

12.1项目导入.179

12.2学习目标.179

12.2.1职业能力 179

12.2.2知识目标 179

12.2.3职业素养 180

12.3相关知识.180

12.3.1浏览器对象模型的简介 180

12.3.2常用浏览器对象模型 182

12.3.3定时器 184

12.4项目实施.186

小结 .189

练习题.189

余量，中共党员，在读博士。1999年起先后在中学、中专、高职院校任教和任职。主持、参与8项课题研究，发表论文30余篇，主编或独撰8本书籍，获教育体育工作先进个人、优秀共产党员等40余项殊荣。

霍红艳，计算机网络技术硕士学位、副教授，中共党员，主要从事大数据专业程序设计、计算机动漫设计、陶瓷设计与工艺专业平面设计教学工作，公开发表十余篇教学论文，参与课题：4个，出版教材4本。任学院招生就业处处长、对外合作交流处处长，工会副主席、第三党支部书记。

本书适合作为高等职业院校计算机及相关专业基础课教材，也可作为 Web 应用程序开发

初学者的参考书。