剑指HTML5+CSS3――核心原理与应用实践

前端开发人员必须掌握3种语言，分别是HTML、CSS 和JavaScript。本书讲解的是前端三大巨头中的两巨头――HTML和CSS，主要用来设置网页呈现在用户眼前的效果，二者分别负责结构和表现。本书从HTML 和CSS 入手，层层递进、步步深入，详细地讲解了HTML 标签与CSS 的相关属性。随着时代的更迭，标签和样式也有所更新，本书在讲解了基础知识后，又对HTML5 与CSS3 的新增标签和属性进行了相关介绍，同时穿插了大量案例，模拟了真实的开发场景。

HTML 篇
第1 章 Web 及前端介绍 ·····························.1
1.1 Web ············································.1
1.1.1 认识URL ·····························.1
1.1.2 认识HTTP ···························.2
1.1.3 Web 的发展 ··························.3
1.1.4 Web 相关标准 ·······················.4
1.1.5 软件结构划分 ························.4
1.1.6 动态网站开发所需的Web 构件 ·.5
1.2 什么是前端 ···································.7
1.3 编辑器介绍 ···································.8
1.4 本章小结 ······································.9
第2 章 初探HTML ··································.10
2.1 HTML 基础语法 ···························.10
2.1.1 HTML 的基本概念 ···············.10
2.1.2 标签的分类 ··························.11
2.1.3 标签属性 ····························.12
2.1.4 HTML 中对于空格及回车的处理
········································.12
2.1.5 实体 ··································.13
2.1.6 HTML 的注释符 ··················.13
2.2 文档结构 ····································.13
2.2.1 文档头 ·······························.14
2.2.2 ＜html＞标签 ·························.14
2.2.3 ＜head＞标签及＜body＞标签 ······.14
2.3 ＜head＞标签中的内容 ·····················.15
2.3.1 ＜title＞标签··························.15
2.3.2 ＜meta＞标签 ························.15
2.3.3 其他头标签 ·························.16
2.4 本章小结 ····································.17
第3 章 常用HTML 标签 ···························.18
3.1 标记文字――普通文本 ··················.18
3.2 标记文字――超链接 ······················.25
3.2.1 绝对路径、相对路径 ·············.25
3.2.2 超链接 ·······························.27
3.2.3 锚点 ··································.29
3.3 组织内容――普通文本 ···················.29
3.4 组织内容――列表 ·························.30
3.4.1 有序列表 ····························.30
3.4.2 无序列表 ····························.31
3.4.3 自定义列表 ·························.32
3.5 组织内容――标题标签 ···················.33
3.6 嵌入内容――图像标签 ···················.34
3.6.1 图片类型 ····························.34
3.6.3 图像标签 ····························.34
3.7 实例：划分HTML 的结构 ··············.35
3.8 本章小结 ·····································.39
第4 章 表格和表单 ··································.40
4.1 表格 ···········································.40
4.1.1 普通表格 ····························.41
4.1.2 实例：海鲜购买清单 ·············.42
4.1.3 ＜th＞、＜td＞标签中的colspan 和
rowspan 属性 ·······················.45
4.1.4 实例：食堂菜谱 ···················.46
4.2 表单 ···········································.47
4.2.1 初始表单 ····························.48
4.2.2 ＜form＞标签的action 和method
属性 ··································.48
4.2.3 布尔属性 ····························.49
4.2.4 详解＜input /＞标签 ·················.49
4.2.5 下拉列表 ····························.52
4.2.6 文本域 ·······························.53
4.2.7 按钮 ··································.54
4.2.8 为表单标签定义标注 ·············.55
4.3 实例：个人资料修改表单 ···············.55
4.4 本章小结 ····································.60
CSS 篇
第5 章 初探CSS 及选择器 ·······················.62
5.1 CSS 的基本用法 ···························.62
5.1.1 CSS 的基础语法···················.62
5.1.2 CSS 中的注释符···················.63
5.1.3 CSS 中颜色的表示方式 ·········.64
5.1.4 CSS 的使用方式···················.64
5.2 CSS 特性 ····································.67
5.3 CSS 选择器 ·································.69
5.3.1 标签选择器 ·························.69
5.3.2 类选择器 ····························.70
5.3.3 实例：仿Google ··················.73
5.3.4 层次选择器 ·························.74
5.3.5 ID 选择器 ···························.78
5.3.6 组合选择器 ·························.79
5.3.7 通配符选择器 ······················.80
5.3.8 伪类选择器 ·························.81
5.3.9 其他选择器 ·························.84
5.3.10 实例：表格隔行换色 ···········.85
5.4 权重值 ·······································.88
5.5 本章小结 ····································.90
第6 章 字体与文本··································.91
6.1 调试器在CSS 中的使用 ·················.91
6.2 字体 ··········································.98
6.2.1 字体及字体族 ······················.98
6.2.2 字体（字体族）的类型 ··········.98
6.2.3 设置字体（字体族）――
可继承 ·······························.98
6.2.4 字号――可继承 ··················.100
6.2.5 设置字重――可继承 ············.101
6.2.6 字体风格――可继承 ············.102
6.2.7 字体简写 ···························.103
6.3 文本 ·········································.104
6.3.1 盒子模型的基本要素 ············.104
6.3.2 行内元素和块状元素 ············.105
6.3.3 元素显示类型 ·····················.105
6.3.4 字体颜色――可继承 ············.107
6.3.5 文本装饰――不可继承 ·········.108
6.3.6 文本缩进――可继承 ···········.110
6.3.7 字符间距――可继承 ···········.113
6.3.8 文本对齐――可继承 ···········.113
6.3.9 空白处理及换行 ·················.115
6.3.10 超出隐藏 ·························.118
6.3.11 行高 ·······························.118
6.3.12 垂直居中 ·························.125
6.4 本章小结 ···································.129
第7 章 盒子模型 ···································.130
7.1 整体结构 ···································.130
7.2 宽度 ·········································.132
7.3 高度 ·········································.134
7.4 元素宽度、高度的优选值和最小值 ·.136
7.5 内边距 ······································.139
7.5.1 单边内边距 ·······················.142
7.5.2 行内元素和行内块状元素的
内边距 ·····························.142
7.6 边框 ·········································.144
7.6.1 边框宽度 ··························.145
7.6.2 边框样式 ··························.146
7.6.3 边框颜色 ··························.147
7.6.4 边框简写 ··························.147
7.6.5 实例：做一个三角形 ···········.148
7.7 轮廓 ·········································.149
7.7.1 轮廓样式 ··························.149
7.7.2 轮廓宽度 ··························.150
7.7.3 轮廓颜色 ··························.151
7.7.4 轮廓简写 ··························.151
7.7.5 轮廓与边框的不同 ··············.151
7.8 外边距 ······································.153
7.9 关于auto ···································.156
7.10 实例：新闻网页 ························.162
7.11 本章小结 ·································.168
第8 章 背景、列表及表格 ·······················.169
8.1 背景 ·········································.169
8.1.1 背景颜色 ··························.169
8.1.2 背景图片 ··························.172
8.1.3 背景重复 ··························.173
8.1.4 背景定位 ··························.174
8.1.5 背景粘滞 ··························.178
8.1.6 实例：精灵图 ····················.181
8.2 列表 ·········································.185
8.2.1 列表简介 ···························.185
8.2.2 列表标记类型 ·····················.187
8.2.3 列表标记图片 ·····················.189
8.2.4 列表标记位置 ·····················.190
8.2.5 列表样式的简写属性 ···········.191
8.2.6 实例：宠物列表 ··················.192
8.3 表格 ·········································.194
8.3.1 CSS 中的表格 ····················.194
8.3.2 表格标题位置 ·····················.198
8.3.3 单元格的边框 ·····················.199
8.3.4 实例：隔行换色表格 ···········.203
8.4 本章小结 ···································.205
第9 章 浮动及定位 ································.206
9.1 浮动 ·········································.206
9.1.1 普通文档流和浮动···············.206
9.1.2 浮动的规则 ························.209
9.1.3 清除浮动 ···························.216
9.1.4 案例：个人博客导航条 ········.221
9.1.5 案例：首页的“为你推荐”
频道 ·································.224
9.1.6 案例：左侧固定、右侧自适应
页面 ·································.229
9.2 定位 ·········································.232
9.2.1 定位属性 ···························.232
9.2.2 移动元素属性 ·····················.232
9.2.3 定位属性和移动元素属性的
配合使用 ···························.233
9.2.4 层叠顺序 ···························.242
9.2.5 案例：元素水平、垂直居中 ··.245
9.2.6 案例：二级菜单 ··················.246
9.2.7 案例：轮播图布局···············.250
9.2.8 案例：网站底部广告 ···········.254
9.3 本章小结 ···································.255
HTML5 篇
第10 章 HTML5 初体验 ··························.257
10.1 HTML5 介绍 ·····························.257
10.1.1 XHTML1.0 ·······················.257
10.1.2 XHTML2.0 ·······················.258
10.1.3 HTML5 出现 ····················.258
10.2 体验HTML5 ····························.258
10.2.1 设置HTML5 的文档类型 ····.258
10.2.2 设置页面语言 ···················.259
10.2.3 设置字符编码 ···················.259
10.2.4 验证HTML5 ····················.259
10.3 HTML5 的语法及其标签 ·············.260
10.3.1 不建议使用的标签 ·············.260
10.3.2 修改的标签 ······················.261
10.3.3 新增的标签及属性 ·············.261
10.4 使用HTML5 重构网页页面 ·········.264
10.4.1 结构的划分 ······················.265
10.4.2 传统的HTML 页面构建 ······.265
10.4.3 使用HTML5 构建页面 ·······.270
10.5 本章小结 ·································.273
第11 章 HTML5 表单及音频、视频 ···········.274
11.1 表单 ·······································.274
11.1.1 表单的自动完成 ················.274
11.1.2 让表单控件显示在表单外部 ·.275
11.1.3 给表单控件添加占位符 ·······.276
11.1.4 给表单添加默认焦点 ··········.276
11.1.5 给表单添加验证 ················.277
11.1.6 显示建议列表 ···················.278
11.1.7 更加丰富的＜input＞标签 ······.279
11.1.8 案例：表单的改造 ·············.284
11.2 音频、视频 ······························.290
11.2.1 音频 ·······························.290
11.2.2 视频 ·······························.291
11.2.3 使用＜source＞标签 ··············.291
11.3 本章小结 ·································.292
CSS3 篇
第12 章 CSS3 简介及选择器 ···················.293
12.1 CSS3 简介 ·······························.293
12.2 CSS3 选择器 ····························.294
12.2.1 CSS3 中新增的层次选择器 ··.294
12.2.2 属性选择器 ······················.295
12.2.3 结构性伪类选择器 ·············.301
12.2.4 状态伪类选择器 ················.316
12.2.5 其他伪类选择器 ················.320
12.2.6 伪元素选择器 ···················.325
12.3 本章小结 ·································.342
第13 章 CSS3 新增属性和属性值 ·············.344
13.1 CSS3 中新增的属性值 ·················.344
13.1.1 全局属性值 ······················.344
13.1.2 相对单位值 ······················.346
13.1.3 颜色 ·······························.346
13.2 文字、文本的新增属性 ···············.347
13.2.1 使用服务器端字体 ·············.347
13.2.2 文字阴影 ·························.349
13.2.3 案例：特效文字 ················.350
13.2.4 最后一行的对齐方式 ··········.352
13.2.5 内容溢出处理 ···················.357
13.2.6 换行处理 ·························.359
13.3 有关盒子的新增属性 ··················.361
13.3.1 盒子阴影 ·························.361
13.3.2 盒子模型的计算方式 ··········.363
13.3.3 控制元素、调整大小 ··········.365
13.3.4 设置元素透明度 ················.366
13.4 边框 ·······································.368
13.4.1 圆角边框 ·························.368
13.4.2 案例：游戏图标 ················.372
13.4.3 案例：太极图 ···················.373
13.5 粘滞定位 ·································.376
13.5.1 粘滞定位 ·························.376
13.5.2 案例：评论列表 ················.378
13.6 本章小结 ·································.381
第14 章 背景及渐变 ·······························.382
14.1 背景 ·······································.382
14.1.1 背景延伸 ·························.382
14.1.2 案例：图片文字 ················.384
14.1.3 背景定位基准 ···················.385
14.1.4 背景尺寸 ·························.386
14.1.5 简写属性 ·························.389
14.1.6 多背景 ····························.390
14.2 渐变 ·······································.392
14.2.1 线性渐变 ·························.392
14.2.2 重复性线性渐变 ················.399
14.2.3 径向渐变 ·························.401
14.2.4 重复性径向渐变 ················.406
14.2.5 案例：优惠券 ···················.407
14.3 本章小结 ·································.411
第15 章 滤镜、裁剪、过渡 ·····················.412
15.1 滤镜 ·······································.412
15.2 裁剪 ·······································.414
15.3 过渡 ·······································.421
15.3.1 过渡时间 ·························.421
15.3.2 受过渡影响的属性 ·············.422
15.3.3 设置过渡的快慢 ················.424
15.3.4 设置过渡的延迟 ················.427
15.3.5 不同数量的属性值的使用
问题 ·······························.427
15.3.6 反向过渡 ·························.430
15.3.7 过渡的简写属性 ················.431
15.4 实例 ·······································.433
15.4.1 实例：卡片悬停效果 ··········.433
15.4.2 实例：裁剪按钮 ················.439
15.4.3 实例：手风琴效果 ·············.440
15.4.4 实例：滑动菜单 ················.443
15.5 本章小结 ·································.447
第16 章 变形、动画 ·······························.449
16.1 动画 ·······································.449
16.1.1 简单地使用 ······················.449
16.1.2 再提动画使用 ···················.451
16.1.3 动画的执行次数 ················.458
16.1.4 设置动画的播放方向 ··········.459
16.1.5 延迟播放动画 ···················.460
16.1.6 改变动画的内部时序 ··········.464
16.1.7 动画播放完成后的填充 ·······.467
16.1.8 动画的简写属性 ················.468
16.2 变形 ·······································.471
16.3 本章小结 ·································.483
第17 章 媒体查询、弹性盒子 ··················.484
17.1 媒体查询 ·································.484
17.1.1 媒体类型及媒体查询的
基本使用 ·························.484
17.1.2 媒体描述符 ······················.486
17.1.3 实例：响应式头部 ·············.490
17.2 弹性盒子 ·································.495
17.2.1 弹性容器 ·························.495
17.2.2 设置主轴方向 ···················.497
17.2.3 设置换行 ·························.498
17.2.4 设置弹性元素如何在主轴上
分布 ·······························.501
17.2.5 设置弹性元素如何在当前行上
垂直分布 ·························.507
17.2.6 设置整个弹性元素如何对齐 ·.509
17.2.7 弹性增长因子 ···················.512
17.2.8 弹性元素的顺序 ················.514
17.3.9 在弹性元素上使用float 属性
和position 属性 ·················.516
17.3 实例 ·······································.517
17.3.1 实例：骰子 ······················.517
17.3.2 实例：尚硅谷网站头部 ·······.521
17.4 本章小结 ·································.526