第1章　初识Web前端 1
1.1 Web前端简介 1
1.1.1 Web前端的发展简史 1
1.1.2 W3C简介 4
1.2 了解Web标准 5
1.2.1 Web标准简介 5
1.2.2 HTML5简介 6
1.2.3 CSS3简介 9
1.3 前端基础知识 11
1.3.1 浏览器及其内核 11
1.3.2 CSS Hack 12
1.3.3 前端与后端的数据交互
流程 14
1.3.4 编写规范 15
1.4 创建第一个HTML5网页 17
1.4.1 Web开发工具 17
1.4.2 VS Code的安装与使用 17
1.4.3 编写网页 23
1.5 本章小结 24
1.6 习题 24
第2章　使用HTML5构建基本网页 26
2.1 制作简单的文本网页 26
2.1.1 标题标签 26
2.1.2 段落标签 27
2.1.3 换行标签 28
2.1.4 特殊字符 28
2.1.5 案例：学习简述 29
2.1.6 本节小结 30
2.2 添加超链接 30
2.2.1 超链接标签 30
2.2.2 超链接的功能分类 31
2.2.3 超链接的伪类 32
2.2.4 扩展——文本格式化标签 32
2.2.5 案例：学习手册导航 33
2.2.6 本节小结 35
2.3 添加图片 35
2.3.1 图片标签 35
2.3.2 水平线标签 37
2.3.3 <div>块元素 37
2.3.4 HTML5的语义化元素 38
2.3.5 案例：学习小课堂 38
2.3.6 本节小结 40
2.4 本章小结 40
2.5 习题 40
第3章　应用CSS3样式 42
3.1 CSS3的引入方式 42
3.1.1 行内样式 42
3.1.2 内嵌样式 43
3.1.3 外链样式 44
3.1.4 本节小结 44
3.2 CSS3选择器 45
3.2.1 基础选择器 45
3.2.2 高级选择器 45
3.2.3 结构伪类选择器 46
3.2.4 伪元素选择器 46
3.2.5 属性选择器 46
3.2.6 本节小结 47
3.3 CSS3属性 47
3.3.1 字体属性 47
3.3.2 背景属性 48
3.3.3 文本属性 49
3.3.4 border-radius属性 50
3.3.5 box-shadow属性 51
3.3.6 background-size属性 52
3.3.7 案例：泰山赏鉴 54
3.3.8 本节小结 56
3.4 显示与隐藏属性 56
3.4.1 display属性 56
3.4.2 visibility属性 58
3.4.3 opacity属性 58
3.4.4 rgba()函数 60
3.4.5 overflow属性 60
3.4.6 显示与隐藏属性的总结 62
3.4.7 扩展——cursor属性 63
3.4.8 案例：横渠四句 63
3.4.9 本节小结 66
3.5 本章小结 66
3.6 习题 66
第4章　使用列表、表格与表单 68
4.1 制作列表 68
4.1.1 有序列表 68
4.1.2 无序列表 69
4.1.3 自定义列表 70
4.1.4 list-style属性 71
4.1.5 案例：热点新闻小卡片 73
4.1.6 本节小结 75
4.2 制作表格 75
4.2.1 表格的基本标签 75
4.2.2 语义化标签 77
4.2.3 单元格边距与间距 77
4.2.4 合并行与列 79
4.2.5 表格的其他属性 80
4.2.6 案例：班级成绩表 81
4.2.7 本节小结 84
4.3 制作表单 84
4.3.1 表单的组成 84
4.3.2 <form>标签 84
4.3.3 <input>标签 87
4.3.4 <label>标签 88
4.3.5 <select>标签 89
4.3.6 <textarea>标签 91
4.3.7 <fieldset>标签 92
4.3.8 新增表单控件 93
4.3.9 案例：信息录入表单 94
4.3.10 本节小结 97
4.4 本章小结 97
4.5 习题 98
第5章　页面布局与设计 100
5.1 引入盒模型 100
5.1.1 盒模型结构 100
5.1.2 padding属性 102
5.1.3 border属性 104
5.1.4 margin属性 104
5.1.5 怪异盒模型 106
5.1.6 案例：公告小卡片 107
5.1.7 本节小结 110
5.2 CSS3浮动 110
5.2.1 float属性 110
5.2.2 清除浮动 111
5.2.3 案例：运输服务流程 113
5.2.4 本节小结 117
5.3 CSS3定位 117
5.3.1 定位的概述 117
5.3.2 相对定位 118
5.3.3 绝对定位 120
5.3.4 固定定位 122
5.3.5 z-index属性 124
5.3.6 案例：单号查询界面 124
5.3.7 本节小结 127
5.4 本章小结 127
5.5 习题 127
第6章　HTML5多媒体应用 129
6.1 添加视频 129
6.1.1 <video>标签 129
6.1.2 视频格式 131
6.1.3 视频编码技术 131
6.1.4 案例：建军节宣传片 132
6.1.5 本节小结 134
6.2 添加音频 134
6.2.1 <audio>标签 134
6.2.2 音频格式 135
6.2.3 音频编码技术 136
6.2.4 案例：倾听音乐 136
6.2.5 本节小结 138
6.3 本章小结 138
6.4 习题 138
第7章　实现CSS3动画 140
7.1 实现transition过渡 140
7.1.1 transition属性 140
7.1.2 浏览器私有前缀 144
7.1.3 案例：元素平滑过渡 144
7.1.4 本节小结 146
7.2 实现2D transform变形 146
7.2.1 transform-origin属性 146
7.2.2 translate()位移 147
7.2.3 rotate()旋转 148
7.2.4 scale()缩放 150
7.2.5 skew()倾斜 152
7.2.6 案例：元素变形 155
7.2.7 本节小结 158
7.3 实现3D transform变形 158
7.3.1 3D变形的概述 158
7.3.2 perspective属性 159
7.3.3 transform-style属性 160
7.3.4 perspective-origin属性 160
7.3.5 backface-visibility属性 161
7.3.6 3D rotate()旋转 161
7.3.7 3D translate()位移 163
7.3.8 案例：正方体 166
7.3.9 本节小结 169
7.4 制作animation动画 169
7.4.1 @keyframes规则 169
7.4.2 animation属性 170
7.4.3 案例：加载动画 174
7.4.4 本节小结 178
7.5 本章小结 179
7.6 习题 179
第8章　实现移动端布局 181
8.1 流式布局 181
8.1.1 视口 181
8.1.2 流式布局的应用 183
8.1.3 案例：顶部链接广告 186
8.1.4 本节小结 189
8.2 Flex布局 189
8.2.1 概述 189
8.2.2 容器属性 190
8.2.3 项目属性 193
8.2.4 案例：图书搜索专区的Flex
布局 196
8.2.5 本节小结 201
8.3 rem布局 201
8.3.1 rem单位 201
8.3.2 媒体查询 201
8.3.3 案例：图书官网首页的rem
布局 204
8.3.4 本节小结 211
8.4 本章小结 211
8.5 习题 212
第9章　综合案例：智慧教辅 213
9.1 案例分析 213
9.1.1 案例概述 213
9.1.2 能力训练图 214
9.1.3 文件夹组织结构 214
9.2 设计与实现 215
9.2.1 网页的基础设置 215
9.2.2 头部导航模块 216
9.2.3 轮播图模块 218
9.2.4 关于我们模块 222
9.2.5 新闻中心模块 225
9.2.6 师资培训模块 229
9.2.7 视频教程模块 231
9.2.8 联系我们和页脚模块 236
9.3 本章小结 240