部分 html 5+css
章 开发的概念与技术 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
0章 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
1章 前端数据存储 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
2章 整合练——个人通讯录的实现 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
第三部分 善用前端框架
3章 响应式网页框架——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
4章 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
5章 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