第一部分 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
