本书系统地介绍了Web前端开发的基础知识和实际应用。全书共8章，内容包括Web应用概述及开发环境、使用HTML5标签组织页面内容、使用CSS3修饰页面元素、元素定位与页面布局、客户端脚本JavaScript与jQuery库、基于Node.js环境的Vue3项目开发、Vue3 UI组件库Element Plus和基于Vue3+PHP7的项目前后端分离开发。本书以实际应用为出发点，精心组织内容，每章都设计了典型案例，并配有习题及实验。本书配套的课程网站提供了教学大纲、PPT课件、项目源代码、学习视频、在线测试和工具软件包，极大地方便了教与学。本书可以作为高等院校计算机及相关专业本科生教材，也可以作为Web开发爱好者的参考书。

吴志祥，教授，项目教学法名师，长期从事Web方向和Java方向序列课程的教学，先后主编了《Web前端开发技术》、《Java程序设计》、《软件设计模式—Java版》、《Java企业级应用开发》和《Android Studio移动应用开发》等教材。指导学生在“蓝桥杯”全国软件和信息技术专业人才大赛、全国软件设计大赛等高水平赛事中多次获奖。

第1章 Web应用概述及开发环境 1
1.1 B/S架构与网站技术 1
1.1.1 网站与网页 1
1.1.2 B/S架构 2
1.1.3 客户端浏览器 5
1.1.4 相关名词解释 8
1.2 服务器端集成开发环境phpstudy_pro 9
1.2.1 关于phpstudy_pro 9
1.2.2 Web服务器Apache 10
1.2.3 数据库服务器MySQL及其管理工具phpMyAdmin 10
1.2.4 PHP语言特点、新版本的安装与切换 13
1.3 Web集成开发环境IDEA 2023 14
1.3.1 IDEA 2023概述 14
1.3.2 IDEA 2023的基本使用 15
1.3.3 IDEA 2023常用快捷操作 17
习题1 18
实验1 18
第2章 使用HTML5标签组织页面内容 19
2.1 HTML语言概述 19
2.1.1 HTML标签名与属性 19
2.1.2 实体元素分类 22
2.1.3 网页文档编码与＜meta＞标签 23
2.1.4 特殊字符 24
2.1.5 HTML色彩与度量单位 24
2.2 简单的HTML标签 25
2.2.1 文本样式标签 25
2.2.2 文本格式化标签 26
2.2.3 滚动标签 27
2.2.4 列表标签 27
2.2.5 超链接与锚点链接标签 28
2.2.6 图像标签 29
2.3 HTML5音频与视频 29
2.3.1 音频标签＜audio＞ 29
2.3.2 视频标签＜video＞ 30
2.4 表格 30
2.4.1 表格定义及属性设置 30
2.4.2 表格行属性设置 31
2.4.3 表格单元格属性设置 31
2.4.4 表格单元格合并 32
2.5 表单 33
2.5.1 表单及其工作原理 33
2.5.2 表单定义与基本使用 33
2.5.3 常用表单域 35
2.5.4 文件域与文件上传 38
习题2 40
实验2 40
第3章 使用CSS3修饰页面元素 41
3.1 CSS概述 41
3.2 基本选择器与组合选择器 42
3.2.1　基本选择器 42
3.2.2 组合选择器 44
3.3 CSS样式的使用 45
3.3.1 行内式（内联样式） 45
3.3.2 内嵌式（内部样式） 45
3.3.3 链入式（使用外部样式文件） 46
3.3.4 样式冲突与样式优先级 46
3.3.5 CSS高级特性 47
3.4 常用CSS属性 47
3.4.1 CSS盒子模型 47
3.4.2 文本外观 48
3.4.3 方框样式属性 49
3.4.4 元素可见与显示特性 50
3.4.5 设置按钮是否可用 50
3.4.6 阴影效果与不透明度 50
3.4.7 重新定义HTML元素外观 51
3.5 CSS高级技术演进 54
3.5.1 CSS3新特性 54
3.5.2 CSS3阴影效果 57
3.5.3 CSS3动画效果 58
3.5.4 CSS3媒体查询功能 61
习题3 62
实验3 62
第4章 元素定位与页面布局 63
4.1 页面布局概述 63
4.2 元素定位 64
4.2.1 静态定位 64
4.2.2 相对定位 64
4.2.3 绝对定位 64
4.2.4 固定定位 67
4.2.5 堆叠顺序 67
4.3 CSS+Div布局 67
4.4 页内框架 71
4.5 弹性布局 75
4.6 HTML5布局标签 76
4.7 使用Bootstrap实现响应式布局 79
4.8 综合项目：会员管理项目memmana1 82
习题4 89
实验4 89
第5章 客户端脚本JavaScript与jQuery库 90
5.1 JavaScript基础 90
5.1.1 JavaScript概述 90
5.1.2 JavaScript脚本的定义与使用 91
5.1.3 JavaScript数据类型 93
5.1.4 JavaScript字面量、变量与常量声明、运算符 95
5.1.5 JavaScript流程控制语句 97
5.1.6 JavaScript对象的PEM模型 99
5.1.7 JavaScript脚本调试 101
5.2 JavaScript内置对象 103
5.2.1 日期/时间对象 103
5.2.2 数组对象 103
5.2.3 字符串对象 104
5.2.4 正则对象 105
5.2.5 数学对象 106
5.2.6 JSON对象 106
5.3 浏览器对象 108
5.3.1 BOM与DOM 108
5.3.2 顶级对象window的常用属性和方法 110
5.3.3 文档对象document与表单的elements集合 113
5.3.4 位置对象location 117
5.3.5 历史对象history 118
5.3.6 导航对象navigator 118
5.4 综合项目：会员管理项目memmana2a 119
5.4.1 页面头部的实时时间显示 120
5.4.2 登录页面设计 120
5.4.3 注册页面设计 122
5.5 JavaScript 高级特性 124
5.5.1 原型与原型链 124
5.5.2 异步编程：Promise、fetch与async/await 125
5.6 jQuery库与jQuery AJAX 128
5.6.1 jQuery库使用基础 128
5.6.2 综合项目：会员管理项目memmana2b 133
5.6.3 jQuery AJAX概述 135
5.6.4 jQuery AJAX应用实例 136
5.7 HTML5 Web存储 140
5.7.1 本地存储localStorage与会话存储sessionStorage 141
5.7.2 WebSQL数据库IndexedDB 143
习题5 144
实验5 144
第6章 基于Node.js环境的Vue3项目开发 145
6.1 JavaScript服务器端运行时环境Node.js 145
6.1.1 Node.js概述 145
6.1.2 Node.js下载与安装 145
6.1.3 库、模块、函数与包 146
6.1.4 包管理器npm与cnpm 147
6.1.5 Node.js使用示例（访问MySQL数据库、创建HTTP服务器） 148
6.2 Vue.js框架及其基本语法 149
6.2.1 Vue.js概述 149
6.2.2 在HTML页面中使用Vue3 150
6.2.3 Vue3基本语法 151
6.3 Vue3项目开发基础 154
6.3.1 Vue3项目创建与运行 154
6.3.2 Vue3项目结构分析 156
6.4 Vue3组件语法 158
6.4.1 Vue3组件的一般结构 158
6.4.2 选项式API与组合式API 159
6.4.3 组件导出/导入、props属性与Vue组件调用 160
6.4.4 通用属性ref与$refs 162
6.4.5 watch与数据属性监听 163
6.4.6 Vue3延迟回调方法$nextTick() 164
6.5 Vue3项目配套库 164
6.5.1 路由库Vue Router 164
6.5.2 异步请求库axios 166
6.5.3 状态管理库Vuex 170
6.5.4 使用百度地图包 173
6.5.5 使用图表库ECharts 174
习题6 176
实验6 176
第7章 Vue3 UI组件库Element Plus 177
7.1 从Element UI到Element Plus 177
7.2 在Vue3项目中使用Element Plus 178
7.3 Element Plus常用基础组件 178
7.3.1 布局容器组件 178
7.3.2 菜单组件 179
7.3.3 轮播组件 183
7.3.4 下拉列表与下拉菜单 184
7.3.5 消息框、确认框与对话框 187
7.3.6 表格组件与数据的分页显示 190
7.3.7 输入组件、按钮组件、表单组件及其表单元素验证 194
7.3.8 选项卡组件 197
7.4 文件上传与下载 198
7.4.1 文件上传 198
7.4.2 文件下载 202
7.5 富文本编辑器Quill 204
习题7 213
实验7 213
第8章 基于Vue3+PHP7的项目前后端分离开发 214
8.1 Web项目前后端分离开发技术要点 214
8.1.1 前后端分离的核心概念与技术架构 214
8.1.2 RESTful API设计原则 216
8.1.3 PHP7后端设置允许跨域访问与预检请求 217
8.1.4 Vue3前端与PHP7后端的数据格式 218
8.1.5 项目测试 220
8.2 综合项目：高校专业信息管理系统 221
8.2.1 需求分析 221
8.2.2 项目数据库设计 221
8.2.3 PHP后端项目WebBackend-php7 222
8.2.4 编写Vue3项目启动文件main.js 227
8.2.5 根组件、欢迎组件与主页设计 227
8.2.6 游客功能设计 233
8.2.7 管理员功能设计 239
8.3 Vue3项目打包与部署上线 252
8.3.1 Vue3项目打包 252
8.3.2 部署打包后的Vue3项目到Nginx服务器 253
习题8 255
实验8 255
参考文献 256