HTML+CSS+JAVASCRIPT+BOOTSTRAP渐进式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