本书从HTML、CSS、JavaScript最基本的概念开始，由浅至深地介绍这三种语言在网页开发中的应用，并挑选了网页开发技术中最精髓的部分进行讲解，让读者能够更高效地掌握网页开发技术。

　　本书的第一部分从宏观上介绍HTML、CSS、JavaScript在Web开发中的应用；第二部分着重介绍HTML语言，分析其搭建网页框架上的特点；第三部分讲解CSS语言如何控制页面的样式和风格；第四部分分析JavaScript在实现网页动态逻辑方面的运用；第五部分通过综合样例说明HTML、CSS、JavaScript在实际开发中的各类运用场景。

　　本书既适合作为网页开发的入门教程和工具书，也适合非计算机专业的学生及广大计算机爱好者    阅读。

　　随着信息技术的发展，计算机科学逐步融入到了人们的生活当中，人们已经习惯了通过各类电子设备，例如：手机电脑来获取需要的信息，而其中一个最重要的途径即是网页。HTML、CSS、JavaScript作为编写网页的基本语言，提供了极强的兼容性和灵活性，这是当前跨平台信息传递最方便、最灵活的一项技术，这套技术也是网页技术的发展方向。在信息时代HTML、CSS、JavaScript从某种程度上决定了人们获取信息的方式，它是一种可以改变世界的技术。

　　当下无论是电脑还是移动端，都装有浏览器，这就意味着几乎所有的用户端口都能接入网页。现在，常见的社交网络、电商、实时通信技术等，都与网页技术息息相关，甚至现代编程语言的发展也深受HTML、CSS、JavaScript语言的影响。可以说，HTML、CSS、JavaScript是当前用于展示信息、开发应用的最简单高效的一种技术，十分值得推广与学习。

　　我们阅读了市面上大量HTML、CSS、JavaScript的书籍，发现其中存在一些缺憾与不足。如使用规范过旧，逐渐被新HTML5，CSS3等标准淘汰；没有提供充足的样例，过多的概念讲解无法与实际结合；个别内容没有普遍性，不能较好地引导读者掌握学习HTML、CSS、JavaScript的本质，不能真正地教会读者自主解决问题的能力。

　　本书旨在让读者学会前端开发的通用法则，而不是仅仅学习一个前端开发工具或语言，因为技术的发展令任何技术都面临着淘汰的风险。本书希望读者不仅仅拘泥于技术细节的学习，更重要的是用心感受这种开发模式，感受工具特点，顺应语言的特质，令开发过程会更为轻松而高效。 

　　本书基本分为五部分，第一部分讲解前端开发的一些基本背景，让读者快速了解HTML、CSS、JavaScript三种语言的特点，同时了解它们三者之间的合作关系。希望读者通过第一部分阅读可以具有基本的前端开发能力，之后可以自行学习后面的章节或自行查阅资料学习。第二、三、四部分分别针对HTML、CSS、JavaScript展开介绍。笔者挑选了每种语言工具中最重要、最实用的部分进行讲解，通过使用模板、规范代码、讲解示例等形式，多方面展示这三种语言的特性及功能，并将其与实际应用联系，希望读者能够通过学习进一步深化对这几种语言的理解。

　　所有实例代码都可以从https://pan.baidu.com/s/1geNZoeZ进行下载。

　　本书的作者是吕云翔、欧阳植昊、徐硕，而曾洪立、吕彼佳、姜彦华对本书也进行了一些素材整理及配套资源制作等工作，在此对他们表示感谢。

　　由于我们的水平和能力有限，书中难免有疏漏之处。恳请各位同仁和广大读者给予批评指正，也希望各位能将实践过程中的经验和心得与我们交流（yunxianglu@hotmail.com）。

　　

　　编  者

　　2018年6月

　　第一部分  前端语言介绍

第1章  HTML、CSS、JavaScript的介绍 2

1.1  准备 2

1.2  HTML、CSS、JavaScript的介绍 4

1.3  HTML、CSS、JavaScript之间的协作关系 4

1.4  HTML、CSS、JavaScript的学习建议 5

1.5  HTML、CSS、JavaScript样例 5

 1.5.1  综合样例 5

 1.5.2  HTML样例 7

 1.5.3  CSS样例 8

 1.5.4  JavaScript样例 9

思考题 10

第2章  HTML入门 11

2.1  HTML背景及特点 11

 2.1.1  HTML背景 11

 2.1.2  HTML特点 11

2.2  HTML开发环境 12

2.3  HTML快速入门 13

思考题 14

第3章  CSS入门 15

3.1  CSS背景及特点 15

 3.1.1  CSS背景 15

 3.1.2  CSS特点 15

 3.1.3  CSS开发环境 15

3.2  CSS快速入门 16

 3.2.1  CSS基本语法 16

 3.2.2  如何插入样式表 17

思考题 19

第4章  JavaScript入门 20

4.1  JavaScript的背景及特点 20

 4.1.1  JavaScript的背景 20

 4.1.2  JavaScript的特点 20

4.2  JavaScript开发环境 21

4.3  JavaScript快速入门 21

 4.3.1  JavaScript基本语法 21

 4.3.2  JavaScript函数 22

 4.3.3  JavaScript对象 25

思考题 27

第5章  HTML、CSS、JavaScript样例 28

思考题 32

本部分小结 32

　　第二部分  HTML

第6章  HTML介绍 34

6.1  标记语言 34

6.2  HTML 35

思考题 35

第7章  基本概念 36

7.1  元素 36

 7.1.1  HTML元素语法 36

 7.1.2  常见元素 36

 7.1.3  HTML实例解析 38

 7.1.4  小知识 39

7.2  属性 39

 7.2.1  属性语法 40

 7.2.2  常见属性 40

 7.2.3  属性实例 41

7.3  样式 43

 7.3.1  简介 43

 7.3.2  内联样式 44

 7.3.3  内部样式表 46

 7.3.4  外部样式表 47

 7.3.5  HTML样式标签 49

 7.3.6  已弃用的标签和属性 49

7.4  注释 49

7.5  区块 50

 7.5.1  简介 50

 7.5.2  常见元素 50

思考题 51

第8章  常用控件 52

8.1  表单 52

 8.1.1  简介 52

 8.1.2  表单定义 52

 8.1.3  表单属性 53

 8.1.4  表单元素 54

 8.1.5  表单样例 60

8.2  媒体 63

 8.2.1  HTML音频（Audio） 63

 8.2.2  HTML视频（Videos） 65

8.3  DIV+CSS 66

 8.3.1  什么是DIV+CSS 67

 8.3.2  DIV+CSS产生背景 67

 8.3.3  DIV+CSS的优势 67

 8.3.4  DIV+CSS嵌入方式 68

 8.3.5  DIV+CSS布局优点 69

 8.3.6  DIV+CSS存在问题 69

 8.3.7  DIV+CSS常见错误 70

 8.3.8  DIV+CSS常用工具 70

思考题 71

第9章  代码规范 72

9.1  代码风格 72

 9.1.1  缩进与换行 72

 9.1.2  命名 72

 9.1.3  标签 73

 9.1.4  属性 76

9.2  通用 77

 9.2.1  DOCTYPE 77

 9.2.2  编码 77

 9.2.3  CSS和JavaScript引入 78

9.3  Head 79

9.4  图片 79

9.5  表单 80

9.6  按钮 80

9.7  模板中的HTML 82

9.8  模板使用 85

 9.8.1  为什么使用HTML模板 85

 9.8.2  如何获取HTML模板 85

思考题 86

第10章  HTML样例 87

思考题 94

本部分小结 94

　　第三部分  CSS

第11章  CSS介绍 96

11.1  简介 96

 11.1.1  CSS历史 96

 11.1.2  CSS语言特点 96

 11.1.3  CSS工作原理 97

11.2  语言基础 97

 11.2.1  属性和属性值 97

 11.2.2  选择器 98

11.3  技术应用 100

思考题 100

第12章  CSS基本概念 101

12.1  CSS语法 101

12.2  id和class选择器 102

 12.2.1  id选择器 102

 12.2.2  class选择器 102

12.3  CSS字体 102

 12.3.1  CSS字型 103

 12.3.2  字体系列 103

 12.3.3  字体样式 104

 12.3.4  字体大小 104

 12.3.5  设置字体大小像素 105

 12.3.6  使用百分比和EM组合 105

 12.3.7  所有CSS字体属性 106

12.4  颜色 107

 12.4.1  CSS颜色原理 107

 12.4.2  1600多万种不同的颜色 107

 12.4.3  灰阶 108

12.5  CSS3背景 109

 12.5.1  浏览器支持 109

 12.5.2  属性 110

 12.5.3  背景使用实例 113

思考题 114

第13章  CSS盒子模型 116

13.1  盒子模型简介 116

 13.1.1  元素的宽度和高度 116

 13.1.2  浏览器的兼容性问题 117

13.2  CSS边框 117

 13.2.1  边框样式 117

 13.2.2  边框宽度 118

 13.2.3  边框颜色 119

 13.2.4  边框-单独设置各边 120

 13.2.5  边框-简写属性 121

13.3  CSS轮廓 121

 13.3.1  轮廓属性 121

 13.3.2  轮廓实例 122

13.4  CSS margin 123

 13.4.1  margin单边外边距属性 123

 13.4.2  margin简写属性 124

 13.4.3  所有的CSS边距属性 124

 13.4.4  margin样例 124

13.5  CSS padding 125

 13.5.1  填充单边内边距属性 126

 13.5.2  填充简写属性 126

 13.5.3  CSS填充属性 126

 13.5.4  padding实例 127

思考题 128

第14章  CSS定位 129

14.1  position属性 129

 14.1.1  static定位 129

 14.1.2  fixed定位 129

 14.1.3  relative定位 129

 14.1.4  absolute定位 130

 14.1.5  重叠的元素 130

 14.1.6  CSS position属性总结 131

 14.1.7  position实例 132

14.2  float属性 133

 14.2.1  什么是CSS的float 133

 14.2.2  元素浮动方式 133

 14.2.3  彼此相邻的浮动元素 133

 14.2.4  清除浮动使用clear 133

 14.2.5  CSS中所有的浮动属性 134

 14.2.6  float实例 134

14.3  align属性 136

思考题 137

第15章  CSS3动画及响应式 138

15.1  什么是CSS3中的动画 138

15.2  CSS3的@keyframes规则 140

15.3  CSS3动画属性 142

15.4  CSS动画实例 142

15.5  响应式布局简介 143

15.6  viewpoint 145

15.7  网格视图 145

思考题 149

第16章  代码规范 150

16.1  CSS书写格式 150

16.2  选择器与属性缩写 152

 16.2.1  选择器 152

 16.2.2  属性缩写 153

 16.2.3  空行 154

16.3  值与单位 155

 16.3.1  文本 155

 16.3.2  数值 156

 16.3.3  url() 156

 16.3.4  长度 156

 16.3.5  颜色 157

 16.3.6  2D位置 158

16.4  文本编排 158

 16.4.1  字体族 158

 16.4.2  字号 160

 16.4.3  字体风格 160

 16.4.4  变换与动画 160

16.5  CSS注释 161

 16.5.1  普通注释 161

 16.5.2  区块注释 161

16.6  CSS命名规范 162

 16.6.1  命名组成 162

 16.6.2  命名前缀 162

16.7  CSS模板使用 162

思考题 164

本部分小结 164

　　第4部分  JavaScript

第17章  JavaScript介绍 166

17.1  简介 166

17.2  应用场景 168

思考题 169

第18章  JavaScript的基本概念 170

18.1  变量 170

 18.1.1  变量定义 170

 18.1.2  JavaScript数据类型 170

 18.1.3  创建JavaScript变量 171

 18.1.4  变量作用域 172

18.2  JavaScript保留关键字 172

18.3  函数 173

 18.3.1  函数语法 173

 18.3.2  调用带参数的函数 173

 18.3.3  带有返回值的函数 174

 18.3.4  函数使用样例 175

18.4  对象 178

 18.4.1  对象创建方法 178

 18.4.2  对象创建示例 181

 18.4.3  日期对象 182

 18.4.4  钟表示例 183

18.5  事件 185

 18.5.1  基本概念 185

 18.5.2  事件分类 185

 18.5.3  事件示例 187

思考题 188

第19章  常用功能 189

19.1  数组 189

 19.1.1  创建数组 189

 19.1.2  数组的索引与长度 190

 19.1.3  元素添加/删除 191

 19.1.4  常用方法 193

19.2  Date 195

 19.2.1  Date对象简介 195

 19.2.2  Date对象常见方法 196

19.3  表单 197

 19.3.1  提交表单 198

 19.3.2  重置表单 198

 19.3.3  表单字段 199

 19.3.4  表单样例 201

19.4  类库 202

 19.4.1  常见类库 203

 19.4.2  jQuery 205

19.5  jQuery详解 207

 19.5.1  jQuery选择器 207

 19.5.2  jQuery事件 209

 19.5.3  jQuery内容修改 213

 19.5.4  jQuery遍历 217

思考题 220

第20章  代码规范 221

20.1  文件及结构 221

 20.1.1  文件 221

 20.1.2  结构 221

20.2  命名和注释 227

 20.2.1  命名 227

 20.2.2  注释 229

思考题 230

第21章  JavaScript样例 231

21.1  俄罗斯方块 231

 21.1.1  代码及展示 231

 21.1.2  代码分析 233

21.2  计算器 234

 21.2.1  代码及展示 234

 21.2.2  代码分析 241

思考题 242

本部分小结 242

　　第五部分  综 合 样 例

第22章  管理系统 246

22.1  类库准备 246

22.2  主页 246

22.3  数据展示页面 249

22.4  用户管理页面 256

思考题 262

第23章  游戏2048 263

23.1  界面 263

23.2  代码 263

 23.2.1  HTML 263

 23.2.2  CSS 264

 23.2.3  JavaScript 266

思考题 273

第24章  个人网站 274

24.1  准备 274

24.2  WordPress部署 276

 24.2.1  服务器镜像安装 276

 24.2.2  WordPress初始化 279

24.3  个人网站使用 279

思考题 280

本部分小结 280

后记 281

参考文献 282

本书从实用角度出发，紧密联系教学实际。语法介绍简明清晰、实例内容丰富、重点突出。在基础知识章节后面均附有综合实例以及思考与练习部分，建议读者在学完一章内容以后，都能完成各章的练习，以加深和巩固所学知识。相信会为读者的学习和工作带来一定的帮助。可以作为高等院校电子信息工程、通信工程、电子信息科学与技术、自动化、电气工程等电子与电气类相关本科专业教材和研究生参考书，同时也适用于从事电路设计和系统开发工程技术人员。

本书从实用角度出发，紧密联系教学实际。语法介绍简明清晰、实例内容丰富、重点突出。在基础知识章节后面均附有综合实例以及思考与练习部分，建议读者在学完一章内容以后，都能完成各章的练习，以加深和巩固所学知识。相信会为读者的学习和工作带来一定的帮助。可以作为高等院校电子信息工程、通信工程、电子信息科学与技术、自动化、电气工程等电子与电气类相关本科专业教材和研究生参考书，同时也适用于从事电路设计和系统开发工程技术人员。