Web前端技术基础 / 高等职业教育电子信息类专业新形态系列教材
定价：￥38.80
作者： 曹宇，熊小华，东苗
出版时间：2026-09
最新印次日期：2026-9
出版社：北京师范大学出版社
- 北京师范大学出版社
- 9787303322688
- 1版
- 2026-09
- 电子与信息大类
- 计算机类
- 计算机类
- 高职
作者简介
目录
第1章 Web技术基础 /1
1.1 Web基本概念
/2
1.1.1 技术演变:从 Web
1.0到 Web
3.0
/2
1.1.2 Web核心概念
/2
1.2 搭建开发环境 /4
1.2.1 Chrome安装与开发者工具调试 /4
1.2.2 VS
Code安装与配置 /6
1.2.3 XAMPP安装与使用
/9
1.3 动手实践:环境搭建与网页部署 /10
任务1 搭建与配置环境 /10
任务2 创建第一个网页 /12
任务3 部署与访问测试 /13
第2章 HTML组织网页结构 /14
2.1 HTML语法与结构 /15
2.1.1 标记语言与网页结构 /15
2.1.2 文本标签 /16
2.1.3 图片标签 /16
2.1.4 表单元素 /18
2.1.5 其他常用标签 /20
2.1.6 HTML实体 /23
2.2 HTML5新特性 /24
2.2.1 语义化标签
/25
2.2.2 多媒体标签 /27
2.3 动手实践:长城风景区介绍页 /29
任务1 页面整体结构设计 /29
任务2 核心内容模块设计 /31
任务3 多媒体展示模块设计 /33
第3章 CSS美化与布局网页 /35
3.1 CSS语法与选择器 /36 2
3.1.1 CSS样式规则 /36
3.1.2 引入 CSS /38
3.1.3 基础选择器 /38
3.1.4 伪类选择器
/39
3.1.5 常见属性单位 /41
3.2 布局与响应式设计 /44
3.2.1 盒子模型 /44
3.2.2 定位与浮动布局 /46
3.2.3 Flex和 Grid布局 /53
3.2.4 媒体查询 /58
3.3 CSS3新特性 /59
3.3.1 过渡与动画 /59
3.3.2 多列布局 /63
3.4 动手实践:国风旅鉴首页（HTML+CSS版） /68
任务1 头部导航模块制作 /68
任务2 Banner模块制作 /71
任务3 诗画江山模块制作 /73
任务4 文脉华典模块制作 /75
任务5 尾部版权模块制作 /77
第4章 JavaScript与网页动态交互 /80
4.1 JavaScript语法基础 /81
4.1.1 初识JavaScript /81
4.1.2 变量、数据类型与运算符 /83
4.1.3 分支与循环结构 /91
4.1.4 函数 /97
4.1.5 异步编程 /100
4.2 BOM、DOM 与事件处理 /102
4.2.1 BOM 与 DOM /102
4.2.2 节点操作 /106
4.2.3 事件处理 /108
4.3 客户端数据存储 /113
4.3.1 浏览器存储机制 /113
4.3.2 Cookie存储 /114
4.3.3 localStorage
/116
4.3.4 sessionStorage
/117目
录
3
4
.
4
异
步
数
据
交
互
/
1
1
9
4
.
4
.
1
A
J
A
X
技
术
/
1
1
9
4
.
4
.
2
F
e
t
c
h
A
P
I
技
术
/
1
2
3
4
.
4
.
3
A
x
i
o
s
技
术
/
1
2
6
4
.
5
动
手
实
践
:
W
e
b
计
算
器
/
1
2
8
任
务
1
计
算
器
界
面
设
计
/
1
2
8
任
务
2
计
算
器
主
体
功
能
实
现
/
1
3
1
第
5
章
j
Q
u
e
r
y
轻
量
级
J
a
v
a
S
c
r
i
p
t
框
架
/
1
3
3
5
.
1
j
Q
u
e
r
y
基
础
/
1
3
4
5
.
1
.
1
引
入
j
Q
u
e
r
y
/
1
3
4
5
.
1
.
2
j
Q
u
e
r
y
选
择
器
/
1
3
4
5
.
1
.
3
j
Q
u
e
r
y
操
作
D
O
M
/
1
3
7
5
.
2
事
件
处
理
/
1
4
0
5
.
2
.
1
j
Q
u
e
r
y
事
件
委
托
机
制
/
1
4
0
5
.
2
.
2
j
Q
u
e
r
y
自
定
义
事
件
/
1
4
3
5
.
3
数
据
交
互
/
1
4
3
5
.
3
.
1
j
Q
u
e
r
y
封
装
A
J
A
X
/
1
4
3
5
.
3
.
2
A
J
A
X
简
化
函
数
/
1
4
6
5
.
4
视
觉
呈
现
/
1
5
1
5
.
4
.
1
j
Q
u
e
r
y
操
作
C
S
S
动
画
/
1
5
1
5
.
4
.
2
C
S
S
3
过
渡
增
强
/
1
5
4
5
.
5
动
手
实
践
:
九
宫
格
抽
奖
系
统
项
目
/
1
5
7
任
务
1
抽
奖
界
面
设
计
/
1
5
7
任
务
2
抽
奖
主
体
功
能
实
现
/
1
6
2
第
6
章
B
o
o
t
s
t
r
a
p
响
应
式
前
端
框
架
/
1
6
7
6
.
1
B
o
o
t
s
t
r
a
p
基
础
/
1
6
8
6
.
1
.
1
引
入
B
o
o
t
s
t
r
a
p
/
1
6
8
6
.
1
.
2
栅
格
系
统
布
局
/
1
6
9
6
.
2
B
o
o
t
s
t
r
a
p
样
式
/
1
7
7
6
.
2
.
1
文
本
样
式
/
1
7
7
6
.
2
.
2
列
表
样
式
/
1
8
0
6
.
2
.
3
表
格
样
式
/
1
8
1
6
.
2
.
4
图
片
样
式
/
1
8
4
6
.
2
.
5
表
单
样
式
/
1
8
6 4
6.2.6 辅助样式 /190
6.3 Bootstrap组件 /193
6.3.1 导航栏（Navbar） /194
6.3.2 按钮（Button） /196
6.3.3 卡片（Card） /197
6.3.4 模态框（Modal） /199
6.3.5 轮播图（Carousel） /201
6.4 动手实践:首页设计-发现中国之美 /203
任务1 导航与视觉框架构建 /203
任务2 广告栏区域与分类系统 /205
任务3 精选内容展示 /208
任务4 页脚与订阅功能 /210
第7章 旅游网站主功能全流程开发 /214
7.1 项目需求分析与规划
/215
7.1.1 功能需求
/215
7.1.2 技术选型 /215
7.2 界面设计 /215
7.2.1 首页设计 /216
7.2.2 景区详情页设计 /220
7.3 后端 API开发（PHP实现） /224
7.3.1 数据库设计 /224
7.3.2 后端 API整体架构 /227
7.3.3 获取景点列表数据 /228
7.3.4 获取景点详情数据 /229
7.4 前端功能开发（jQuery实现） /231
7.4.1 首页动态开发 /231
7.4.2 景区详情页开发 /233
参考文献 /23
1.1 Web基本概念
/2
1.1.1 技术演变:从 Web
1.0到 Web
3.0
/2
1.1.2 Web核心概念
/2
1.2 搭建开发环境 /4
1.2.1 Chrome安装与开发者工具调试 /4
1.2.2 VS
Code安装与配置 /6
1.2.3 XAMPP安装与使用
/9
1.3 动手实践:环境搭建与网页部署 /10
任务1 搭建与配置环境 /10
任务2 创建第一个网页 /12
任务3 部署与访问测试 /13
第2章 HTML组织网页结构 /14
2.1 HTML语法与结构 /15
2.1.1 标记语言与网页结构 /15
2.1.2 文本标签 /16
2.1.3 图片标签 /16
2.1.4 表单元素 /18
2.1.5 其他常用标签 /20
2.1.6 HTML实体 /23
2.2 HTML5新特性 /24
2.2.1 语义化标签
/25
2.2.2 多媒体标签 /27
2.3 动手实践:长城风景区介绍页 /29
任务1 页面整体结构设计 /29
任务2 核心内容模块设计 /31
任务3 多媒体展示模块设计 /33
第3章 CSS美化与布局网页 /35
3.1 CSS语法与选择器 /36 2
3.1.1 CSS样式规则 /36
3.1.2 引入 CSS /38
3.1.3 基础选择器 /38
3.1.4 伪类选择器
/39
3.1.5 常见属性单位 /41
3.2 布局与响应式设计 /44
3.2.1 盒子模型 /44
3.2.2 定位与浮动布局 /46
3.2.3 Flex和 Grid布局 /53
3.2.4 媒体查询 /58
3.3 CSS3新特性 /59
3.3.1 过渡与动画 /59
3.3.2 多列布局 /63
3.4 动手实践:国风旅鉴首页（HTML+CSS版） /68
任务1 头部导航模块制作 /68
任务2 Banner模块制作 /71
任务3 诗画江山模块制作 /73
任务4 文脉华典模块制作 /75
任务5 尾部版权模块制作 /77
第4章 JavaScript与网页动态交互 /80
4.1 JavaScript语法基础 /81
4.1.1 初识JavaScript /81
4.1.2 变量、数据类型与运算符 /83
4.1.3 分支与循环结构 /91
4.1.4 函数 /97
4.1.5 异步编程 /100
4.2 BOM、DOM 与事件处理 /102
4.2.1 BOM 与 DOM /102
4.2.2 节点操作 /106
4.2.3 事件处理 /108
4.3 客户端数据存储 /113
4.3.1 浏览器存储机制 /113
4.3.2 Cookie存储 /114
4.3.3 localStorage
/116
4.3.4 sessionStorage
/117目
录
3
4
.
4
异
步
数
据
交
互
/
1
1
9
4
.
4
.
1
A
J
A
X
技
术
/
1
1
9
4
.
4
.
2
F
e
t
c
h
A
P
I
技
术
/
1
2
3
4
.
4
.
3
A
x
i
o
s
技
术
/
1
2
6
4
.
5
动
手
实
践
:
W
e
b
计
算
器
/
1
2
8
任
务
1
计
算
器
界
面
设
计
/
1
2
8
任
务
2
计
算
器
主
体
功
能
实
现
/
1
3
1
第
5
章
j
Q
u
e
r
y
轻
量
级
J
a
v
a
S
c
r
i
p
t
框
架
/
1
3
3
5
.
1
j
Q
u
e
r
y
基
础
/
1
3
4
5
.
1
.
1
引
入
j
Q
u
e
r
y
/
1
3
4
5
.
1
.
2
j
Q
u
e
r
y
选
择
器
/
1
3
4
5
.
1
.
3
j
Q
u
e
r
y
操
作
D
O
M
/
1
3
7
5
.
2
事
件
处
理
/
1
4
0
5
.
2
.
1
j
Q
u
e
r
y
事
件
委
托
机
制
/
1
4
0
5
.
2
.
2
j
Q
u
e
r
y
自
定
义
事
件
/
1
4
3
5
.
3
数
据
交
互
/
1
4
3
5
.
3
.
1
j
Q
u
e
r
y
封
装
A
J
A
X
/
1
4
3
5
.
3
.
2
A
J
A
X
简
化
函
数
/
1
4
6
5
.
4
视
觉
呈
现
/
1
5
1
5
.
4
.
1
j
Q
u
e
r
y
操
作
C
S
S
动
画
/
1
5
1
5
.
4
.
2
C
S
S
3
过
渡
增
强
/
1
5
4
5
.
5
动
手
实
践
:
九
宫
格
抽
奖
系
统
项
目
/
1
5
7
任
务
1
抽
奖
界
面
设
计
/
1
5
7
任
务
2
抽
奖
主
体
功
能
实
现
/
1
6
2
第
6
章
B
o
o
t
s
t
r
a
p
响
应
式
前
端
框
架
/
1
6
7
6
.
1
B
o
o
t
s
t
r
a
p
基
础
/
1
6
8
6
.
1
.
1
引
入
B
o
o
t
s
t
r
a
p
/
1
6
8
6
.
1
.
2
栅
格
系
统
布
局
/
1
6
9
6
.
2
B
o
o
t
s
t
r
a
p
样
式
/
1
7
7
6
.
2
.
1
文
本
样
式
/
1
7
7
6
.
2
.
2
列
表
样
式
/
1
8
0
6
.
2
.
3
表
格
样
式
/
1
8
1
6
.
2
.
4
图
片
样
式
/
1
8
4
6
.
2
.
5
表
单
样
式
/
1
8
6 4
6.2.6 辅助样式 /190
6.3 Bootstrap组件 /193
6.3.1 导航栏（Navbar） /194
6.3.2 按钮（Button） /196
6.3.3 卡片（Card） /197
6.3.4 模态框（Modal） /199
6.3.5 轮播图（Carousel） /201
6.4 动手实践:首页设计-发现中国之美 /203
任务1 导航与视觉框架构建 /203
任务2 广告栏区域与分类系统 /205
任务3 精选内容展示 /208
任务4 页脚与订阅功能 /210
第7章 旅游网站主功能全流程开发 /214
7.1 项目需求分析与规划
/215
7.1.1 功能需求
/215
7.1.2 技术选型 /215
7.2 界面设计 /215
7.2.1 首页设计 /216
7.2.2 景区详情页设计 /220
7.3 后端 API开发（PHP实现） /224
7.3.1 数据库设计 /224
7.3.2 后端 API整体架构 /227
7.3.3 获取景点列表数据 /228
7.3.4 获取景点详情数据 /229
7.4 前端功能开发（jQuery实现） /231
7.4.1 首页动态开发 /231
7.4.2 景区详情页开发 /233
参考文献 /23
