Document

以浅显易懂的方式快速了解前端开发的概念及技术。

本书内容

《HTML+CSS+JavaScript+Bootstrap渐进式Web开发入门与实践》从设计网站开始，以浅显易懂的方式讲解网站构建过程、设计网站原型的工具和资源的获取，循序渐进地介绍Web前端三大核心技术—HTML、CSS和JavaScript，并加入前端框架Bootstrap技术。

《HTML+CSS+JavaScript+Bootstrap渐进式Web开发入门与实践》介绍配色工具，以及如何使用Bootstrap模块和配色表快速构建专业美观的响应式网页设计（RWD）网站。本书包含渐进式应用技术，手把手教读者优化网站为Web应用，实现类似原生应用的体验。

《HTML+CSS+JavaScript+Bootstrap渐进式Web开发入门与实践》共分三部分：前端开发概念，HTML+CSS基础到进阶教学；JavaScript基础语法和Web数据库应用；前端框架工具，包括Bootstrap和PWA。各部分均有实用范例和整合练习。《HTML+CSS+JavaScript+Bootstrap渐进式Web开发入门与实践》适合自学与教学使用：对前端技术感兴趣却不知从何入门的初学者；前端开发技术相关从业人员；大专院校用于网站设计相关课程教材。

本书作者

陈婉凌，热衷研究前端网页技术的资深软件工程师，具有多年职业教育教授计算机课程的经验，专长HTML、CSS、JavaScript、jQuery、PHP，致力推广前端技术AJAX和RWD（Responsive Web Design，响应式网页设计），出版书籍融入自身多年教学经验与职场实战经验，内容充实，难易度适中。著有《HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站(第2版)》《HTML5+CSS3+JavaScript网页设计》《JavaScript网页程序设计与实践》《jQuery+jQuery Mobile跨设备网页设计》等

编辑推荐

《HTML+CSS+JavaScript+Bootstrap渐进式Web开发入门与实践》以简明易懂的方式帮助读者快速了解前端开发的概念和技术。通过熟悉网站原型设计以及善用网络工具和资源，读者可以将所学知识应用到实际开发工作中。书中循序渐进地介绍了Web前端的三大核心技术：HTML、CSS和JavaScript。读者可以学习如何活用前端框架Bootstrap技术和工具模块，构建响应式网站设计（RWD）。此外，本书还介绍了渐进式Web应用（PWA）技术，帮助读者逐步将网站优化为Web应用。

本书目录

第一部分   HTML 5+CSS

第1章  网站开发的概念与技术 2

1.1  网站开发的基础概念 2

1.1.1  网站和网页 2

1.1.2  网页开发的前端与后端 4

1.1.3  网址的组成 5

1.2  构建网站的流程与技术 8

1.2.1  拟定网站主题 8

1.2.2  规划网站架构与内容 10

1.2.3  制作网页工具 11

1.2.4  上传云端 12

1.3  网站界面的原型构建工具 14

1.3.1  网站原型架构 14

1.3.2  界面线框与原型工具 15

1.3.3  实现网站的界面原型 19

第2章  HTML与CSS基础 31

2.1  学习HTML前的准备工作 31

2.1.1  建立HTML文件 31

2.1.2  自动生成HTML 5结构的程序代码 32

2.2  HTML语法概念与结构 35

2.2.1  HTML的标签类型 35

2.2.2  HTML的组成 36

2.2.3  标签属性的应用 36

2.3  HTML 5文件结构与语义标签 37

2.3.1  语义化的HTML标签 37

2.3.2  HTML 5声明与编码设置 40

2.4  认识CSS基本结构 42

2.4.1  应用CSS样式表 42

2.4.2  CSS基本格式 45

2.4.3  认识CSS选择器 46

2.4.4  CSS的度量单位 53

2.4.5  CSS的颜色表示法 54

第3章  HTML常用标签 56

3.1  排版相关的标签 56

3.1.1  浏览器呈现网页的过程 56

3.1.2  标题标签 58

3.1.3  段落和换行标签 59

3.2  项目列表 63

3.2.1  有序列表 63

3.2.2  无序列表 66

3.2.3  定义列表 67

3.3  表格与表单 69

3.3.1  表格 69

3.3.2  表单 71

3.3.3  表单组件 73

3.4  插入图片与超链接 77

3.4.1  插入图片 77

3.4.2  超链接 79

3.4.3  内置框架 81

3.5  标签与标签 84

3.5.1  认识标签 84

3.5.2  认识标签 87

3.5.3  给程序代码加上注释 88

3.5.4  使用特殊符号及Emoji字符集 89

第4章  CSS常用语法 92

4.1  文字与段落样式 92

4.1.1  文字样式 92

4.1.2  文字段落样式 94

4.1.3  边框 97

4.1.4  图片和文字环绕 98

4.2  掌握CSS定位 100

4.2.1  网页组件的定位 100

4.2.2  立体网页的定位 104

4.2.3  好用的calc()函数 106

第5章  CSS flexbox响应式排版 108

5.1  flexbox模型概念 108

5.1.1  认识CSS盒模型 108

5.1.2  认识flexbox 112

5.2  flexbox属性 114

5.2.1  flex container属性 114

5.2.2  flex items属性 122

第6章  善用网络资源 133

6.1  图库素材分享平台 133

6.1.1  认识CC授权 133

6.1.2  搜索CC授权素材 135

6.1.3  Iconfinder-icon图库 137

6.1.4  替网站加入Logo图标 139

6.2  实用的网页应用生成器 141

6.2.1  CSS Layout生成器 141

6.2.2  按钮生成器 146

6.2.3  网站配色 153

第7章  整合练习——诗词展示网页的设计与实现 159

7.1  网页结构说明 159

7.1.1  网页结构图 159

7.1.2  选择合适的HTML标签 161

7.2  编写HTML与CSS程序代码 162

7.2.1  编写网页结构的HTML语句 162

7.2.2  加入超链接 164

7.2.3  加入CSS语法 165

7.2.4  添加伪元素 172

7.2.5  使用图标字体生成社交媒体的图标 173

第二部分   JavaScript语言

第8章  JavaScript基础 182

8.1  认识JavaScript 182

8.1.1  JavaScript基本概念 182

8.1.2  JavaScript运行环境 184

8.1.3  浏览器控制台 184

8.1.4  JavaScript程序结构 189

8.2  JavaScript基础语法 192

8.2.1  JavaScript语法架构 192

8.2.2  JavaScript注释符号 195

8.2.3  数据类型 196

8.3  变量声明与作用域 201

8.3.1  全局变量与局部变量 201

8.3.2  使用var关键字声明变量 202

8.3.3  使用var声明的变量的作用域 203

8.3.4  使用let关键字声明变量 205

8.3.5  使用const关键字声明常数 206

8.3.6  变量名称的限制 206

第9章  函数与作用域 210

9.1  自定义函数 210

9.1.1  函数的定义与调用 210

9.1.2  函数参数 211

9.1.3  函数返回值 213

9.2  函数的多种用法 214

9.2.1  函数声明 215

9.2.2  函数表达式 216

9.2.3  对象与this关键字 218

9.2.4  即调函数 222

 第10章  JavaScript操控DOM元素 225

10.1  DOM对象的方法与属性 225

10.1.1  获取对象信息 225

10.1.2  处理对象节点 227

10.1.3  属性的读取与设置 229

10.2  DOM对象的操作 230

10.2.1  window对象 230

10.2.2  DOM集合 231

10.3  DOM风格样式 233

10.3.1  查询元素样式 233

10.3.2  设置组件样式 235

第11章  前端数据存储 237

11.1  认识Web Storage 237

11.1.1  Web Storage的概念 237

11.1.2  检测浏览器是否支持Web storage 238

11.2  localStorage和SessionStorage 238

11.2.1  存取localStorage 238

11.2.2  删除localStorage 242

11.2.3  存取sessionStorage 244

11.3  IndexedDB数据库 245

11.3.1  IndexedDB的重要概念 245

11.3.2  IndexedDB的基本操作 246

11.3.3  读取数据 254

11.3.4  删除数据 256

11.3.5  清空数据 256

第12章  整合练习——个人通讯录的实现 257

12.1  网页架构说明 257

12.1.1  网页功能架构图及线框图 257

12.1.2  CSS Sprites 258

12.2  IndexedDB的CURD 263

12.2.1  创建数据库、存储对象以及启动事务处理 263

12.2.2  设置事件的处理函数 265

12.2.3  添加联络人与添加完成 265

12.2.4  动态产生数据列表 268

12.2.5  修改与删除联络人 270

12.2.6  清空数据与删除数据库 273

12.2.7  阻止事件传递与默认行为 275

第三部分   善用前端框架

第13章  响应式网页框架——Bootstrap 280

13.1  认识Bootstrap 280

13.1.1  为什么要使用Bootstrap 280

13.1.2  下载Bootstrap 281

13.1.3  RWD的设计理念 283

13.2  Bootstrap排版 284

13.2.1  断点与容器 284

13.2.2  了解网格系统 287

13.2.3  视口与媒体查询 291

13.3  Bootstrap的样式 293

13.3.1  Bootstrap通用颜色 293

13.3.2  Bootstrap间距 294

13.3.3  Bootstrap宽度与高度 298

13.3.4  Bootstrap文字 299

13.4  图片与表格 302

13.4.1  响应式图片 302

13.4.2  边框圆角 304

13.4.3  建立Bootstrap表格 306

第14章  Bootstrap扩展组件库 310

14.1  导航与菜单 310

14.1.1  导航栏 310

14.1.2  折叠组件 311

14.1.3  项目列表 314

14.2  表单与按钮 317

14.2.1  表单控制组件 317

14.2.2  表单布局 318

14.3  轮播组件Carousel 320

14.3.1  基本的轮播效果 321

14.3.2  利用JavaScript控制轮播 326

第15章  PWA实现——“我的记账本”Web APP 329

15.1  实现“我的记账本”网页 329

15.1.1  “我的记账本”网页功能与界面 329

15.1.2  下拉菜单 331

15.1.3  按钮组 334

15.1.4  互动窗口 334

15.1.5  indexedDB关键字查询 336

15.1.6  善用Bootstrap Icons制作小图标 337

15.2  将网页转换成PWA 341

15.2.1  什么是PWA 342

15.2.2  制作各种尺寸的APP图标 343

15.2.3  将网页变成PWA 344

HTML+CSS+JavaScript+Bootstrap渐进式Web开发入门与实践