正版新书]HTML5+CSS3+JavaScript Web开发案例教程 温谦 人民邮

第一篇基础篇

第1章Web前端开发基础知识

1．1基础概念02

1．2网页与HTML语言04

1．3Web标准：结构、表现与行为04

1．3．1标准的重要性05

1．3．2“Web标准”概述05

1．4初步理解网站开发的过程07

1．4．1基本任务与角色07

1．4．2明确网站定位08

1．4．3收集信息和素材08

1．4．4策划栏目内容08

1．4．5设计页面方案09

1．4．6制作页面09

1．4．7实现后台功能09

1．4．8整合与测试网站09

1．4．9页面设计相关技术的基础知识10

本章小结11

习题112

第2章HTML5语言基础

2．1HTML5基本知识13

2．1．1HTML文件结构14

2．1．2简单的HTML案例15

2．1．3网页源文件的获取19

2．2实例：利用VSCode快速建立基本文档21

2．2．1创建新的空白文档21

2．2．2编写基础的HTML21

2．3文本标记22

2．3．1实现段落与段内换行（p和br）22

2．3．2设置标题（h1～h6）25

2．3．3使文字水平居中（center）25

2．3．4设置文字段落的缩进（blockquote）26

2．4HTML标记与HTML属性27

2．4．1用align属性控制段落的水平位置28

2．4．2用bgcolor属性设置背景颜色29

2．4．3设置文字的特殊样式30

2．4．4设置文字的大小和颜色（font）31

2．4．5网页中的特殊文字符号32

2．5在网页中使用图片（img）34

2．5．1网页中的图片格式34

2．5．2一个简单的插入了图片的网页34

2．5．3使用路径35

2．5．4用alt属性为图片设置替换文本38

2．6再谈HTML539

2．6．1追根溯源39

2．6．2HTML5的优势与特点40

2．6．3HTML5的新增标记41

2．7实例：创建一个简单的网页42

本章小结44

习题244

第3章CSS语言基础

3．1入门知识46

3．1．1CSS标准47

3．1．2传统HTML的缺点47

3．1．3CSS的引入48

3．1．4如何编写CSS50

3．2理解CSS规则51

3．3基本CSS选择器52

3．3．1标记选择器52

3．3．2类别选择器53

3．3．3ID选择器56

3．4在HTML中使用CSS的方法57

3．4．1行内样式58

3．4．2内嵌式58

3．4．3链接式59

3．4．4导入样式60

3．4．5各种方法的优先级问题62

本章小结65

习题365

第4章CSS3选择器

4．1理解复合选择器66

4．1．1交集选择器67

4．1．2并集选择器68

4．1．3后代选择器70

4．2CSS的继承和层叠特性72

4．2．1继承关系73

4．2．2CSS继承的运用74

4．2．3CSS的层叠特性77

4．3关系选择器79

4．3．1后代选择器80

4．3．2子元素选择器80

4．3．3相邻兄弟选择器81

4．3．4相邻兄弟组选择器81

4．4属性选择器82

4．4．1“属性存在”选择器83

4．4．2“属性等于”选择器83

4．4．3“属性包含”选择器84

4．5结构伪类选择器85

4．6伪元素选择器86

本章小结88

习题488

第二篇样式与布局篇

第5章用CSS设置文本样式

5．1长度单位90

5．1．1相对类型91

5．1．2保证类型91

5．2颜色定义92

5．3实例：通过文字样式美化一个页面93

5．3．1准备页面93

5．3．2设置文字的字体93

5．3．3设置文字的倾斜效果94

5．3．4设置文字的加粗效果96

5．3．5英文字母大小写转换96

5．3．6控制文字的大小97

5．3．7文字的装饰效果99

5．4实例：通过段落样式美化页面100

5．4．1设置段落首行缩进100

5．4．2设置字词间距101

5．4．3设置段落内部的文字行高102

5．4．4设置段落之间的距离103

5．4．5控制文本的水平位置104

5．4．6设置文字及其背景色105

5．4．7设置文字的105

本章小结106

习题5107

第6章用CSS设置图片效果

6．1设置图片边框108

6．1．1基本属性109

6．1．2为不同的边框分别设置样式110

6．2图片缩放112

6．3图文混排113

6．3．1文字环绕113

6．3．2设置图片与文字的间距114

6．4实例：八大行星科普网页115

6．5设置图片与文字的对齐方式118

6．5．1横向对齐118

6．5．2纵向对齐119

本章小结120

习题6121

第7章盒子模型

7．1“盒子”与“模型”的概念探究123

7．2边框（border）124

7．2．1设置边框样式（border-style）125

7．2．2属性值的简写形式126

7．3设置内边距（padding）128

7．4设置外边距（margin）129

7．5盒子之间的关系130

7．5．1HTML与DOM130

7．5．2标准文档流133

7．5．3div标记与span标记135

7．6盒子在标准流中的定位原则137

7．6．1行内元素之间的水平margin138

7．6．2块级元素之间的竖直margin139

7．6．3嵌套盒子之间的margin140

7．6．4margin属性可以设置为负数141

7．7实例：盒子模型计算思考题142

7．8盒子模型相关的常用样式145

7．8．1背景145

7．8．2圆角152

7．8．3阴影154

7．8．4渐变155

本章小结158

习题7158

第8章用CSS设置常用元素样式

8．1设置链接与导航菜单160

8．1．1超链接标记160

8．1．2丰富的超链接162

8．1．3控制鼠标指针165

8．1．4设置项目列表样式166

8．1．5实例：创建简单的导航菜单168

8．2设置表格样式171

8．2．1表格中的标记171

8．2．2设置表格的边框173

8．2．3确定表格的宽度174

8．2．4合并单元格174

8．2．5其他与表格相关的标记177

8．2．6实例：美化表格178

8．3设置表单样式182

8．3．1表单的用途和原理182

8．3．2表单输入类型183

8．3．3实例：美化表单188

本章小结190

习题8190

第9章经典DIV&CSS网页布局方法

9．1向报纸学习排版思想193

9．2CSS排版观念195

9．2．1两列布局195

9．2．2三列布局195

9．2．3多列布局196

9．3元素的浮动197

9．3．1浮动的方式198

9．3．2使用clear属性清除浮动的影响201

9．3．3扩展盒子的高度202

9．4元素的定位204

9．4．1静态定位（static）204

9．4．2相对定位（relative）205

9．4．3保证定位（absolute）208

9．4．4固定定位（fixed）210

9．5z-index空间位置210

9．6经典两列布局211

9．6．1准备工作211

9．6．2保证定位法214

9．6．3浮动定位法216

9．7Grid和Flexbox布局218

本章小结219

习题9219

第三篇JavaScript开发篇

第10章JavaScript基础

10．1JavaScript简介223

10．1．1JavaScript的起源、发展与标准化223

10．1．2JavaScript的组成224

10．2JavaScript的基本语法226

10．3使用VSCode编写个包含JavaScript的页面227

10．3．1创建基础的HTML文档227

10．3．2编写JavaScript228

10．3．3在浏览器中查看与调试229

10．4关键字与保留字230

10．5变量231

10．6数据类型233

10．6．1数值类型233

10．6．2字符型234

10．6．3布尔型238

10．6．4类型转换238

10．6．5数组240

本章小结244

习题10245

第11章程序控制流与函数

11．1顺序结构：赋值语句与表达式247

11．2分支结构：条件语句247

11．2．1比较运算符248

11．2．2逻辑运算符248

11．2．3if语句249

11．2．4switch语句250

11．3循环语句252

11．3．1while语句252

11．3．2do…while语句252

11．3．3for语句254

11．3．4break和continue语句255

11．3．5实例：九九乘法表257

11．3．6for…of语句259

11．3．7for…in语句259

11．4函数260

11．4．1定义函数的基本方法260

11．4．2arguments对象262

11．4．3实例：杨辉三角形264

11．4．4变量的作用域266

11．4．5函数作为函数的参数268

11．4．6箭头函数269

11．5异常处理270

本章小结273

习题11273

第12章JavaScript中的对象

12．1理解对象的含义274

12．1．1理解常见的“类-对象”结构275

12．1．2理解JavaScript中的对象276

12．1．3使用ES6的class语法创建类和对象277

12．2时间日期：Date对象279

12．3数学计算：Math对象283

12．4原始类型与装箱285

12．4．1Boolean286

12．4．2Number287

12．4．3String288

12．5BOM对象289

12．5．1window对象289

12．5．2location对象292

12．5．3navigator对象293

12．5．4screen对象295

12．5．5history对象295

本章小结298

习题12298

第13章以集合方式处理数据

13．1数组300

13．1．1数组的基本操作300

13．1．2作为不同数据结构的数组302

13．2对象306

13．3集合类型307

13．3．1Map集合307

13．3．2Set集合309

本章小结310

习题13311

第14章DOM

14．1网页中的DOM框架312

14．2DOM中的节点313

14．2．1元素节点313

14．2．2文本节点314

14．2．3属性节点314

14．3通过JavaScript访问DOM314

14．3．1访问节点315

14．3．2检测节点类型317

14．3．3父子兄关系317

14．3．4节点属性320

14．3．5创建和操作节点321

14．4DOM与CSS325

14．4．1HTML、CSS、JavaScript三位一体325

14．4．2className属性326

14．5事件326

14．5．1事件与事件流327

14．5．2事件监听328

14．5．3事件对象330

本章小结331

习题14332

温谦：
## 全栈工程师，前沿科技创始人，现从事企业大型软件系统的分析与开发工作，拥有超20年的软件开发经验，主持并成功开发了多个复杂系统，项目实战经验丰富。
## 常销书作者，毕业于华中科技大学计算机专业，主编网页设计与软件开发相关领域图书共12本，图书编写经验颇丰，其中《HTML+CSS网页设计与布局从入门到精通》《网页设计与布局项目化教程（HTML+CSS+DIV）》等图书常销10余年，被百余所高校选作教材。

丛书特色：
（1）编排丰富实战案例，可扫前言二维码进行快速预览。
（2）提供在线实训平台（http://code.artech.cn），支撑随时开展全书案例实战演练。
（3）开源分阶实战项目（http://www.geekfun.website），助力不同层次读者（学生）获取企业实战项目开发能力。
（4）配套多类教辅资源，包含文本类、视频类（微课视频）、案例类、平台类等。
（5）建立教师服务与交流群（QQ群号：368845661），立体化服务院校教师教学。

特别说明：
为了使本书中的案例作用优选化，我们专门为其提供了“在线实训平台”（http://code.artech.cn）。该平台的具体功能介绍如下。
【在线实训平台】功能：
（1）教师可以利用该平台，在上课过程中直接演练（展示）书中的所有案例，并可通过实时的运行结果同步讲解相关知识点和技能。
（2）师生可以通过该平台观看全书导学、原理讲解、案例讲解等视频，配合实操演练，随时随地进行学习，支持开展线上线下混合式教学。
（3）学生可以在课前或课后通过该平台，实操练习书中的所有案例，实时查看代码运行结果，而且所有案例代码均支持复制与还原。
（4）学生还可以通过该平台实操练习各章课后的实操题，并可通过微信分享功能，将实操的结果分享给其他人，如分享给老师进行审阅。
说明：扫描“从书序中的二维码”可以了解该平台的具体使用方法，教师也可通过“教师用书指导手册”了解该平台的具体操作步骤。

本书紧密围绕前端开发工程师在工作中会遇到的实际问题和应该掌握的解决方法与技术，全面介绍了使用HTML5、CSS3和JavaScript（ES6）进行Web前端开发的知识内容与实战技巧。
本书共14章，分三篇，遵循Web标准，强调“表现”与“内容”的分离，规范、全面、系统地介绍了网页设计与制作的方法和技巧。书中给出了大量详细的案例，并对案例进行了分析，便于读者在理解的基础上直接修改后使用。本书编者具备丰富的Web前端开发和教育培训经验，行文细腻，对每一个技术细节和实际工作中可能遇到的难点与错误都进行了详细的说明和提示，大大降低了读者的学习门槛。
本书可以作为高等院校相关专业的网页设计与制作、Web前端开发等课程的教材，也可供网页设计、制作与开发人员参考使用。读者可以在学习并掌握本书所讲的知识内容之后做出精美的网页。