HTML 5与CSS 3核心技法

"清晰的主线，便于读者厘清脉络，抓大放小，快速建立自己的知识框架。 每一个知识点都用简洁的文字说清其功能，并配有例子。 提供在线效果演示，使读者有直观的感受。"

本书介绍了前端开发的基础——HTML和CSS。在介绍HTML内容时，采了一种作者的分类——布局类元素和功能类元素，这样便于读者厘清元素的脉络。在介绍CSS内容时，也给出了一条清晰的主线，便于读者抓大放小，快速建立自己的知识框架。本书在讲解每一个知识点时，都用简洁的文字说清其功能，并配有例子。每一个例子都提供在线效果演示，从而读者有直观的感受，真正掌握一项功能的用法。意向将来从事前端开发的读者，可以将本书作为学习的起点。对于正在从事前端开发的读者，可以将本书作为一本速查手册。

 

第1章 写在前面
1.1 本书约定
1.2 在线查看示例效果
1.3 前后端开发
1.3.1 前端开发是怎么回事？
1.3.2 JavaScript和前端开发是什么关系？
1.3.4 后端开发是怎么回事
1.4 一张网页的是怎么加载出来的？
1.5 服务器端和客户端
1.5.1 服务器端
1.5.2 客户端
1.6 HTML和CSS的关系
1.6.1 HTML是骨架
1.6.2 CSS是皮肤
HTML篇
第2章 HTML语法
2.1 元素——构成网页的基本单位
2.2 元素的属性——元素自身携带的功能和特性
2.3 注释——给代码添加的备注信息
2.4 本章小结
第3章 布局类元素——房子的楼板、柱子和大梁
3.1 布局元素必要的基础
3.1.1 ＜html＞——最外层的元素，包含网页的全部内容
3.1.2 ＜head＞——包含给机器看的内容
3.1.3 ＜body＞——包含给人看的内容
3.2 其他布局元素
3.2.1 ＜div＞——结构级别的容器
3.2.2 ＜main＞——用于包裹页面的主体内容
3.2.3 ＜nav＞——导航栏
3.2.4 ＜header＞——概述
3.2.5 ＜section＞——用于包裹有明确主题的区域
3.2.6 ＜aside＞——用于包裹非主体的内容
3.10 ＜footer＞——页脚
3.11 本章小结
第4章 功能类元素——房子的门、窗、水管和电气
4.1 ＜a＞——链接
4.2 ＜h1＞…＜h6＞——标题
4.3 ＜img＞——图片
4.4 ＜p＞——段落
4.5 ＜input＞——单行文本输入框
4.6 ＜textarea＞——多行文字输入框
4.7 ＜select＞——下拉菜单
4.8 ＜button＞——按钮
4.9 ＜form＞——表单
4.10 ＜span＞——文字级别的容器
4.11 ＜strong＞——强调
4.12 ＜ol＞——有序列表
4.13 ＜ul＞——无序列表
4.14 表格类元素
4.15 ＜iframe＞——网页里套嵌的网页
4.16 本章小结
CSS篇
第5章 CSS基础
5.1 为啥不直接在HTML代码中写样式
5.2 了解CSS的语法
5.3 引入CSS
5.3.1 用＜style＞元素引入CSS
5.3.2 用＜link＞元素引入CSS
5.3.3 用@import指令引入CSS
5.3.4 用style属性嵌入行内样式
5.6 本章小结
第6章 选择器——确定样式的作用范围
6.1 选择器的类型
6.1.1 元素选择器——div
6.1.2 类选择器——.class
6.1.3 ID选择器——#id
6.1.4 属性选择器——[prop=value]
6.1.5 全局选择器
6.2 选择器的组合使用
6.2.1 分组选择——多个选择，一套样式
6.2.2 多条件选择——多个选择，同一个元素
6.2.3 后代选择——通过“先人”找“后人”
6.2.4 子选择——通过“爸爸”找“儿子”
6.2.5 相邻兄弟选择——找“弟弟”
6.2.6 通用兄弟选择——找所有“弟弟”
6.3 伪类——按元素状态指定样式
6.4 伪元素——不是元素，胜似元素
6.14 本章小结
第7章 权重——样式发生冲突时怎么办
7.1 了解权重的级别
7.2 几种选择器的权重
7.2.1 全局选择器的权重
7.2.2 ID选择器和包含ID的属性选择器的权重
7.2.3 权重优选的关键词——!important
7.3 继承
7.4 本章小结
第8章 给文字加样式
8.1 块方向和行内方向
8.2 text-indent——文字缩进
8.3 text-align——文字对齐
8.4 line-height——行高
8.5 vertical-align——文字垂直对齐
8.6 字距和词距
8.7 text-decoration——文字装饰
8.9 white-space——空白字符
8.10 word-break——换行和断词
8.11 本章小结
第9章 字体
9.1 字体族（字体家族）
9.2 font-family——为文字指定字体
9.3 @font-face——为文字指定确切的字体
9.4 font-weight——为字体指定粗细
9.5 font-size——为字体指定大小
9.6 本章小结
第10章 框模型——所有元素都有四个框
10.1 识框模型
10.2 内容区
10.3 padding——内边距
10.4 border——边框
10.5 margin——外边距
10.6 本章小结
第11章 框的其他相关样式
11.1 outline——轮廓
11.2 color——文字颜色
11.3 background——背景
11.4 box-sizing——框尺寸
11.5 box-shadow——框阴影
11.6 overflow——溢出
11.7 本章小结
第12章 显示方式——元素怎么显示
12.1 none——不显示
12.2 block——占据母元素的整个宽
12.3 inline——宽度由内容的多少决定
12.4 inline-block——结合了前两种显示方式
12.5 本章小结
第13章 定位方式——元素该显式在什么位置
13.1 static——往网页的左上角流动
13.2 relative（相对定位）
13.3 absolute（绝对定位）
13.4 fixed（固定定位）——与窗口同步
13.5 sticky（粘滞定位）——自动“挂住”
13.6 本章小结
第14章 元素层叠顺序
14.1 默认情况下的层叠顺序
14.2 通过非static定位方式展示层叠
14.3 通过z-index手动调整层叠
14.4 本章小结
第15章 值和单位
15.1 关键词
15.2 字符串
15.3 URL资源地址
15.4 数字和百分比
15.5 长度
15.6 计算值
15.7 颜色
15.8 本章小结
第16章 浮动
16.1 理解浮动
16.2 单元素浮动的显示方式
16.3 多元素浮动的显示方式
16.3.1 浮动容器
16.3.2 多元素浮动的关系
16.4 浮动思维模型
16.5 清除浮动
16.6 本章小结
第17章 响应式布局
17.1 媒体的类型
17.2 媒体的特性
17.3 规则组合
17.4 添加媒体查询的常见方式
17.5 本章小结
第18章 弹性布局
18.1 弹性盒（Flexbox）
18.2 了解Flex（轴）
18.3 Flex的属性
18.3.1 flex-direction——控制主轴方向
18.3.2 flex-wrap——子项是否可以换行
18.3.3 flex-flow——同时指定方向和换行模式
18.3.4 justify-content——主轴方向排列方式
18.3.5 align-items——交叉轴方向排列方式
18.3.6 align-content——行列排列方式
18.3.7 align-self——交叉轴例外排列
18.3.8 flex-grow——侵略剩余空间的胃口
18.3.9 flex-shrink——在空间不足时做出让步的“意愿”
18.3.10 flex-basis——弹性子项的基础尺寸
18.4 本章小结
第19章 网格布局
19.1 一切无外乎行和列
19.2 容器和子项
19.3 行与列
19.4 网格线
19.5 定义方式网格模板
19.6 调整网格间距
19.7 调整子项的位置
19.8 调整网格中的区域
19.9 网格排列方式
19.10 本章小结
第20章 动画
20.1 transition——过渡
20.2 animation——动画
20.3 本章小结