本选题全面介绍了Web前端开发基础的核心内容，并融合了以当前主流网站内容为设计原型的实例，介绍其实现的技术细节，例如京东的页面布局、商品列表展示、登录界面、轮播图、水平和垂直导航、侧边栏和购物车等，让读者掌握基础理论知识的同时具备实际的Web前端实际开发能力。本选题分为11章，第1~5章主要介绍HTML相关内容，包含常用格式化标签、列表、表格、表单和多媒体标签等；第6~8章主要介绍CSS基础、页面布局和CSS3新特性，重点介绍选择器、盒子模型和元素定位，以此为基础来介绍页面各种局部设计效果和整体布局，以及使用过渡、转换和动画效果来提升UI设计能力；第9~11章介绍JavaScript基础知识、DOM与BOM，以及JSON和存储对象，掌握交互性页面设计的关键技术；第11章是一个项目开发案例，贯穿全书的知识点来介绍典型商城网站的设计与实现，强调综合运用能力。

党的二十大报告明确提出：“加快发展数字经济，促进数字经济和实体经济深度融合，打造具有国际竞争力的数字产业集群。”互联网的蓬勃兴起，标志着我们已迈进全新的数字化时代。在这个时代，Web 前端开发扮演着不可或缺的角色。Web 前端工程师不仅负责设计、开发和优化基于浏览器的各种应用，更致力于打造用户友好的界面，确保网站的性能、跨平台兼容性和安全性。随着互联网应用的快速涌现和用户需求的持续变化，Web 前端开发也已成为备受追捧的热门职业。然而，要跻身Web 前端工程师的行列，首要条件是拥有坚实的相关知识基础。
本书全面系统地介绍了Web 前端开发的核心基础知识，涵盖HTML5、CSS3 和JavaScript。全书共12 章，第1～3 章重点介绍HTML 标签，包括常见的格式化标签、列表、表格、表单和多媒体标签等；第4～8 章主要涵盖CSS 基础、页面布局和CSS3 新特性，着重介绍选择器、盒子模型、元素定位以及弹性布局，并通过局部和整体布局、过渡、转换和动画效果提升读者的UI 设计能力；第9～11 章介绍JavaScript 基础、HTML DOM 与BOM，重点介绍交互性页面设计的关键技术；第12章为项目实战，以全书知识点贯穿项目始终，展示典型商城网站的设计与实现，强调综合运用能力。
本书凝聚了一支经验丰富的编写团队的智慧和努力。团队成员通过深入研究和比较当前市面同类教材的内容和特点，结合团队成员的实际项目开发经验和基于“OBE”理念的教学成果的反馈，探求Web 最佳的实践途径，致力于打造一本与众不同的教材。本书独具特色，以通俗易懂的语言和实战性强的案例为亮点，侧重实际应用能力的培养。在内容的选取上，侧重于UI 设计和交互性设计，为此精选了国内主流网站的设计实例，详细介绍了其实现的技术细节，如京东商城的页面布局、商品展示、登录界面、轮播图、导航栏、侧边栏和购物车等，帮助读者在掌握理论知识的同时培养实际的Web 前端开发能力，从而设计出具有良好用户体验和符合现代审美的交互性页面。
本书适合作为普通高等院校计算机及相关专业“Web 前端开发基础”课程的教材，也可作为Web 前端开发爱好者的参考书。
本书由严健武、秦宗蓉和李新燕任主编，何小平、杨红飞、任灵平、陈小健任副主编。全书由严健武统稿和定稿。
由于编者水平有限，书稿虽然几经修改，仍难免有疏漏之处，望同行和读者批评指正。

第1 章 Web 前端概述1
1.1 Web 前端开发的概念 1
1.2 Web 的工作过程 1
1.3 Web 相关基本概念 2
1.4 Web 前端核心技术介绍. 3
1.5 Web 前端开发工具 4
小结. 6
习题. 6
第2 章 HTML 基础.7
2.1 HTML 文档基本结构 7
2.2 文档头部head 8
2.2.1 title 标签 9
2.2.2 meta 标签 .9
2.2.3 link 标签 10
2.3 文档主体body 11
2.3.1 HTML 基础标签 . 11
2.3.2 标签属性 13
2.4 文档格式化 15
2.4.1 文本修饰标签 15
2.4.2 字体标签 16
2.4.3 特殊字符 17
2.5 应用实例—商品展示 18
小结20
习题20
第3 章 HTML 常用标签21
3.1 列 表 21
3.1.1 无序列表 21
3.1.2 有序列表 23
3.1.3 定义列表 24
3.1.4 列表嵌套 25
3.2 超 链 接 27
3.2.1 网页链接 27
3.2.2 锚点链接 30
3.2.3 其他链接 33
3.2.4 嵌入式框架 33
3.3 图片热点 36
3.4 视频、音频播放. 38
3.4.1 视频播放 .38
3.4.2 音频播放 39
3.5 表 格 40
3.5.1 表格结构和表格属性 40
3.5.2 行、单元格属性 45
3.5.3 单元格合并 47
3.5.4 嵌套表格 48
3.6 应用实例—制作个人信息表格. 51
3.7 表 单 53
3.7.1 表单概述 53
3.7.2 表单元素 54
3.8 应用实例—制作注册表单. 63
小结66
习题66
第4 章 CSS 基础.69
4.1 认识CSS. 69
4.1.1 内联样式 70
4.1.2 内部样式表 71
4.1.3 外部样式表 71
4.2 CSS 基础选择器 72
4.2.1 标签选择器 72
4.2.2 id 选择器 73
4.2.3 类选择器 73
4.2.4 属性选择器 74
4.2.5 伪类、伪元素选择器 76
4.3 CSS 组合选择器 80
4.4 样式继承、层叠和优先级 84
4.5 应用实例—图文样式 85
小结86
习题87
第5 章 盒子模型、文本样式和背景.89
5.1 盒子模型 89
5.2 块元素和行内元素. 92
5.3 单位与文本样式. 94
5.3.1 CSS 的单位 94
5.3.2 文本样式 96
5.4 应用实例—分组链接 102
5.5 颜色与背景 106
5.5.1 背景色 106
5.5.2 背景图 107
5.6 应用实例—数据看板 115
小结 120
习题 120
第6 章 定位与浮动.122
6.1 相对定位 123
6.2 绝对定位 124
6.3 固定定位 132
6.4 z-index 属性 133
6.5 粘性定位 137
6.6 浮 动 139
6.7 应用实例—下拉二级导航. 144
小结147
习题148
第7 章 页面布局150
7.1 页面布局基础 150
7.1.1 行布局 151
7.1.2 列布局 152
7.1.3 混合布局 156
7.2 应用实例—页面顶部结构设计. 158
7.3 弹性布局 162
7.3.1 flex 容器属性 .163
7.3.2 flex 项目属性 .171
7.4 应用实例—商品列表的布局设计 175
小结178
习题178
第8 章 CSS3 新特性.180
8.1 边框、阴影和圆角. 180
8.1.1 边框 180
8.1.2 阴影 181
8.1.3 圆角 182
8.2 转 换 184
8.2.1 位移 184
8.2.2 旋转 185
8.2.3 缩放 187
8.2.4 倾斜 188
8.3 过 渡 190
8.4 动 画 192
小结 197
习题 197
第9 章 JavaScript 基础199
9.1 代码书写位置和注释. 199
9.2 数据类型 202
9.3 变量和类型转换. 206
9.3.1 变量声明和使用 206
9.3.2 类型转换 207
9.4 运算符和表达式. 208
9.4.1 算术运算符和表达式 208
9.4.2 赋值、复合赋值运算符和表达式 209
9.4.3 比较运算符和表达式 210
9.4.4 逻辑运算符和表达式  211
9.4.5 问号表达式  211
9.5 程序结构 212
9.5.1 顺序结构 212
9.5.2 分支结构 212
9.5.3 循环结构 215
9.6 字符串和数组的常用方法 218
9.6.1 字符串常用的属性和方法 218
9.6.2 数组常用的属性和方法 220
9.6.3 Math 对象的方法 224
小结224
习题224
第10 章 HTML DOM227
10.1 事件与事件处理. 227
10.1.1 事件分类 227
10.1.2 事件处理的方式 228
10.1.3 事件处理函数的参数 230
10.2 DOM 元素属性 231
10.2.1 内容属性 232
10.2.2 样式属性 233
10.2.3 表单元素属性 236
10.3 DOM 元素查询 240
10.3.1 getElementsByTagName() 方法 240
10.3.2 getElementsByClassName() 方法 .241
10.3.3 querySelector() 和querySeletorAll() 方法 242
10.3.4 其他方法获取元素 243
10.4 应用实例—轮播图. 243
10.5 DOM 元素操作 249
10.5.1 创建元素 249
10.5.2 追加子元素 249
10.5.3 插入子元素 249
10.5.4 在任意位置插入元素 251
10.5.5 移除元素 252
10.5.6 替换子元素 252
10.5.7 复制元素 253
10.6 应用实例—制作动态图书列表. 254
小结 260
习题 261
第11 章 BOM.263
11.1 window 对象 263
11.2 location 对象. 265
11.3 navigator 对象. 266
11.4 history 对象. 267
11.5 screen 对象. 267
11.6 浏览器事件对象event. 268
11.7 Web Storage. 271
11.8 应用实例—实现登录功能. 272
小结 276
习题 276
第12 章 项目实战—图书商城网站.278
12.1 项目分析 278
12.1.1 需求分析 278
12.1.2 功能模块 278
12.1.3 网站整体操作流程 282
12.1.4 文件清单 282
12.2 详细设计 283
12.2.1 登录和注册 283
12.2.2 商品展示 294
12.2.3 商品详情 300
12.2.4 购物清单和支付 306
参考文献.318

严健武， 男， 硕士， 广州航海学院 讲师， 主讲WEB前端开发及相关课程， 主编教材多本，其中一本为普通高等教育“十一五”国家级规划教材。

秦宗蓉，博士研究生，广州航海学院讲师，主讲算法、大数据课程。

李新燕，硕士毕业，广州航海学院副教授，主讲算法、大数据课程。

1. 凝聚编写团队理论梳理与多年实践项目开发经验。

2.以通俗易懂的语言和实战性强的案例为亮点，侧重实际应用能力的培养。

3.侧重UI设计和交互性设计，辅以国内主流网站的技术实现细节。