本书介绍了前端开发的基础——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 本章小结