Web前端开发技术

本书系统地介绍了Web前端开发的基础知识和实际应用。全书共分7章，内容包括Web开发概述及环境搭建、使用HTML标签组织页面内容、使用CSS样式设置页面外观、网站页面布局、JavaScript与jQuery、HTML5新增功能和常用Web前端开发框架的使用。本书以实际应用为出发点，精心组织教材内容，每章都设计了典型案例，并配有习题及实验。与本书配套的教学网站，提供教学大纲、实验大纲、各种软件的下载链接、课件和案例源代码下载、在线测试等，极大地方便了教与学。 

本书系统地介绍了Web前端开发的基础知识和实际应用。全书共分7章，内容包括Web开发概述及环境搭建、使用HTML标签组织页面内容、使用CSS样式设置页面外观、网站页面布局、JavaScript与jQuery、HTML5新增功能和常用Web前端开发框架的使用。本书以实际应用为出发点，精心组织教材内容，每章都设计了典型案例，并配有习题及实验。与本书配套的教学网站，提供教学大纲、实验大纲、各种软件的下载链接、课件和案例源代码下载、在线测试等，极大地方便了教与学。本书可以作为高等院校计算机及相关专业学生学习Web前端开发的教材，也可以作为Web开发爱好者的参考书。为了方便教学，本书还配有电子课件等教学资源包，任课教师和学生可以登录“我们爱读书”网（www.ibook4us.com）注册并浏览，任课教师还可以发邮件至[email protected]索取。

第1章Web开发概述及环境搭建1

1.1网站与网页概述1

1.1.1网站、网页与网址1

1.1.2网页组成2

1.1.3资源引用的相对路径与绝对路径2

1.1.4快速创建一个Web服务器2

1.1.5相关名词解释3

1.2基于B/S体系的网站系统4

1.2.1Web服务器与数据库服务器4

1.2.2动态网页的执行过程5

1.2.3应用层协议HTTP与HTTPS6

1.2.4Web客户端与浏览器内核7

1.2.5浏览器调试程序8

1.2.6Cookie信息与浏览器缓存9

1.3网页设计工具10

1.3.1高效的网页编辑器VS Code10

1.3.2流行的网页设计器——HBuilder12

1.3.3网页文档快速修改工具EditPlus和NotePad13

1.4使用网页三剑客制作网页素材15

1.4.1图形图像处理软件概述15

1.4.2使用Fireworks或Photoshop编辑图像15

1.4.3使用Flash制作动画16

1.4.4切图形成网页素材17

习题118

实验119

 

第2章使用HTML标签组织页面内容21

2.1HTML语言概述21

2.1.1HTML标签名称与属性21

2.1.2实体标签元素分类24

2.1.3网页文档编码与meta标签25

2.1.4特殊字符26

2.1.5HTML色彩与度量单位26

2.2简单的HTML标签28

2.2.1文本样式标签28

2.2.2文本格式化标签28

2.2.3滚动标签28

2.2.4列表标签29

2.2.5超链接与锚点链接标签30

2.2.6图像标签31

2.3表格31

2.3.1表格定义及属性设置31

2.3.2表格行定义及属性设置32

2.3.3表格单元格定义及属性设置33

2.3.4表格单元格合并33

2.4表单35

2.4.1表单及其工作原理35

2.4.2表单定义与基本使用36

2.4.3常用表单域37

2.4.4文件域与文件上传40

习题243

实验245

 

第3章使用CSS样式设置页面外观47

3.1CSS样式概述47

3.2CSS选择器48

3.2.1基本选择器48

3.2.2组合选择器50

3.3CSS样式的建立与使用51

3.3.1CSS样式的建立方式51

3.3.2CSS样式的使用方式51

3.3.3CSS高级特性53

3.4常用CSS样式的属性56

3.4.1文本外观56

3.4.2方框样式57

3.4.3元素显示与可见特性58

3.4.4设置按钮是否可用59

3.4.5滤镜样式59

3.5重新定义HTML元素外观60

3.6新样式标准CSS363

3.6.1CSS3新增选择器64

3.6.2CSS3 阴影效果66

3.6.3CSS3动画效果67

习题372

实验373

 

第4章网站页面布局75

4.1页面布局概述75

4.2CSS Div布局76

4.2.1div标签76

4.2.2盒子模型76

4.2.3元素定位的CSS样式属性83

4.2.4元素定位模式84

4.3页内框架与框架集88

4.3.1页内框架88

4.3.2框架集88

4.4综合项目：会员管理信息系统memmana189

4.5使用HTML5布局标签97

习题4101

实验4102

 

第5章JavaScript与jQuery104

5.1JavaScript基础104

5.1.1JavaScript概述104

5.1.2JavaScript数据类型与运算符106

5.1.3JavaScript流程控制语句110

5.1.4JavaScript对象的PEM模型111

5.1.5JavaScript脚本调试115

5.2JavaScript内置对象116

5.2.1数组对象Array116

5.2.2日期/时间对象Date117

5.2.3字符串对象String117

5.2.4数学对象Math118

5.2.5自定义JavaScript对象119

5.3浏览器对象120

5.3.1BOM与DOM120

5.3.2顶级对象window常用属性和方法121

5.3.3文档对象document与表单的elements集合127

5.3.4位置对象location136

5.3.5历史对象history136

5.3.6导航对象navigator137

5.4综合项目：会员管理信息系统memmana2a139

5.5jQuery147

5.5.1jQuery使用基础147

5.5.2综合项目：会员管理信息系统memmana2b156

5.5.3jQuery插件开发160

5.6jQuery Ajax161

5.6.1jQuery Ajax概述161

5.6.2JSON数据格式161

5.6.3jQuery Ajax应用实例163

习题5167

实验5169

 

第6章HTML5新增功能171

6.1HTML5概述171

6.1.1从HTML4到HTML5171

6.1.2使用标签〈details〉和〈summary〉隐藏详细内容172

6.2HTML5对表单的新增功能173

6.2.1字段输入提示173

6.2.2为文本域添加下拉列表选择输入173

6.2.3字段必填验证174

6.2.4电子邮件格式验证174

6.2.5日期与时间输入175

6.2.6range类型175

6.3HTML5音频与视频176

6.3.1音频标签audio176

6.3.2视频标签video177

6.4HTML5绘图功能178

6.4.1画布标签canvas178

6.4.2HTML5绘图API178

6.5HTML5地理定位与百度地图180

6.5.1HTML5地理定位实现180

6.5.2第三方工具百度地图的应用182

6.6HTML5响应式布局与媒体查询184

6.6.1响应式布局184

6.6.2关于视口viewport185

6.6.3媒体查询185

6.7HTML5 Web存储190

6.7.1本地存储localStorage191

6.7.2会话存储sessionStorage192

6.7.3WebSQL数据库192

习题6194

实验6195

 

第7章常用Web前端开发框架的使用197

7.1Web前端框架Bootstrap197

7.1.1概述197

7.1.2Bootstrap使用基础197

7.1.3CSS组件198

7.1.4响应式设计201

7.2模块化前端框架Layui 203

7.2.1在Web项目里引入Layui框架203

7.2.2网页轮播特效203

7.2.3表格模块与分页模块的使用204

7.3富文本编辑器Baidu UE208

7.4JS运行时环境Node.js211

7.4.1Node.js概述、下载及安装211

7.4.2Node.js模块安装器npm与cnpm211

7.4.3使用mysql模块访问MySQL数据库212

7.4.4使用http模块创建HTTP服务器216

7.4.5服务端框架Express217

7.4.6静态资源打包工具WebPack219

7.5渐进式框架Vue.js220

7.5.1Vue.js概述220

7.5.2快速创建、部署、运行和打包一个Vue.js项目222

7.5.3Vue组件224

7.5.4前端路由配置225

习题7227

实验7228

 

参考文献230

近几年来，Web前端开发技术飞速发展，许多高校Web前端教学中已经打破了只讲HTML4 CSS2 JavaScript的传统格局。随着互联网行业（特别是移动互联网）的持续发展，企业开发平台开始在界面友好性和操作方便性方面投入更多的精力，Web前端从业人员数量猛增，待遇大幅度提升。移动互联网的迅速发展，带来了Web前端开发的新问题：能否只开发一套自动适应PC端和移动端的Web系统？使用HTML5的媒体查询功能可实现响应式布局，能圆满地解决这个问题。此外，HTML5相对于HTML4增加了许多实用的标签，如对文本框增加列表输入功能的〈details〉和〈summary〉标签等。通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，为元素从一种样式变换为另一种样式时添加动画效果，这比采用传统的引入方式（在页面里嵌入动画文件）有更好的用户体验。此外，boxreflect（实现倒影或镜像）和borderradius（实现边框圆角）等都是非常实用的CSS3新增样式。前端框架jQuery是经典框架，方便对JavaScript脚本的使用；Bootstrap是一个关于HTML、CSS和JS的Web前端框架，用于开发响应式布局、移动设备优先的 Web 项目；Layui是一个模块化的前端UI框架。引人注目的是JavaScript的运行时环境Node.js及使用MVVM模式真正实现页面与数据逻辑分离的前端渐进式框架Vue.js。本书系统地介绍了Web前端开发的基础知识和实际应用。全书共分7章，内容包括Web开发概述及环境搭建、使用HTML标签组织页面内容、使用CSS样式设置页面外观、网站页面布局、JavaScript与jQuery、使用HTML5新增功能和常用Web前端开发框架的使用。本书写作特色鲜明：一是教材结构合理，对教材内容的设置进行了深思熟虑、多次推敲，在行文时指出了相关章节知识点之间的联系；二是知识点介绍简明，作者精心设计的案例紧扣理论；三是采用大量的截图，清晰地反映了页面的浏览效果；四是通过使用不同知识点设计的同一综合案例，让学生辨析不同的知识点；五是有配套的上机实验网站，方便教与学；六是使用Web服务器WAMP来实现对静态网页的访问。本书以实用为出发点，精心设计了许多案例，以说明相关知识点及其用法。为了便于学生复习，每章配有习题及实验。与本书配套的教学网站，提供教学大纲、实验大纲、各种软件的下载链接、课件和案例源代码下载、在线测试等，极大地方便了教与学。总之，这是一本适合于以培养应用型本科人才为目标的教材。本书可作为高等院校计算机及相关专业学生学习Web前端开发的教材，也可以作为Web开发爱好者的参考书。为了方便教学，本书还配有电子课件等教学资源包，任课教师和学生可以登录“我们爱读书”网（www.ibook4us.com）注册并浏览，任课教师还可以发邮件至[email protected]索取。由于编者水平有限，书中错漏之处在所难免，在此真诚欢迎读者多提宝贵意见，读者可与出版社联系，以便再版时更正。