Web前端开发精品课：HTML与CSS进阶教程 PDF 原书中文版

通俗易懂 案例简洁形象，生动剖析晦涩难懂的知识点。 直击要点 规避思维误区，为初学者打牢基础保驾护航。 全面培养 讲透基础知识，亦注重开发技巧与思维锻炼。 精简浓缩 精炼核心内容，为读者节省学习时间与成本。 在线辅助 结合网站资源，强化书本学习并拓展新知识。
本书内容结合笔者在前后端大量开发中的实战经验，系统化知识，浓缩精华，用通俗易懂的语言直击学习者的痛点。通过本书，能让你从“野生网页设计师”水平提升达到“真正前端工程师”水平。 全书分为两大部分：首部分是HTML进阶内容，主要介绍HTML高级技巧和HTML语义化；第二部分是CSS进阶内容，主要介绍CSS开发技巧、代码规范、性能优化、属性本质、重要概念（如包含块、BFC和IFC等）。 除了知识讲解，教程还融入了大量的开发案例，更加注重编程思维的培养，并且提供学习者一个流畅的学习思路。

目录

• 第一部分　HTML进阶
• 第01章　HTML基础知识
• 1.1　HTML和CSS进阶简介 2
• 1.1.1　你真的精通HTML和CSS吗 2
• 1.1.2　进阶教程简介 3
• 1.2　HTML、XHTML和HTML5 3
• 1.2.1　HTML和XHTML 3
• 1.2.2　HTML5 4
• 1.3　div和span 6
• 1.4　id和class 7
• 1.4.1　id属性 7
• 1.4.2　class属性 7
• 1.5　浏览器标题栏小图标 8
• 第02章　语义化
• 2.1　语义化简介 10
• 2.2　标题语义化 12
• 2.3　图片语义化 14
• 2.3.1　alt属性和title属性 14
• 2.3.2　figure元素和figcaption元素 15
• 2.4　表格语义化 16
• 2.5　表单语义化 19
• 2.5.1　label标签 20
• 2.5.2　fieldset标签和legend标签 21
• 2.6　其他语义化 22
• 2.6.1　换行符
• 22
• 2.6.2　无序列表ul 24
• 2.6.3　strong标签和em标签 25
• 2.6.4　del标签和ins标签 25
• 2.6.5　img标签 26
• 2.7　语义化验证 26
• 2.8　HTML5舍弃的标签 27
• 第二部分　CSS进阶
• 第03章　CSS基础知识
• 3.1　CSS单位 30
• 3.1.1　绝对单位 30
• 3.1.2　相对单位 31
• 3.2　CSS特性 37
• 3.2.1　继承性 37
• 3.2.2　层叠性 39
• 3.3　CSS优先级 40
• 3.3.1　引用方式冲突 41
• 3.3.2　继承方式冲突 41
• 3.3.3　指定样式冲突 42
• 3.3.4　继承样式和指定样式冲突 44
• 3.3.5　!important 45
• 3.4　CSS引入方式 47
• 3.4.1　外部样式表 48
• 3.4.2　内部样式表 48
• 3.4.3　行内样式表 50
• 3.5　CSS选择器 51
• 3.5.1　后代选择器 51
• 3.5.2　子代选择器 52
• 3.5.3　兄弟选择器 54
• 3.5.4　相邻选择器 55
• 第04章　CSS规范
• 4.1　CSS规范简介 58
• 4.2　命名规范 59
• 4.2.1　CSS文件命名 59
• 4.2.2　id和class命名 59
• 4.3　书写规范 62
• 4.4　注释规范 65
• 4.4.1　顶部注释 65
• 4.4.2　模块注释 65
• 4.4.3　简单注释 65
• 4.5　CSS reset 66
• 4.5.1　什么是CSS reset 66
• 4.5.2　为什么要用CSS reset 66
• 4.5.3　如何使用CSS reset 67
• 第05章　盒子模型
• 5.1　CSS盒子模型 70
• 5.2　深入border 73
• 5.2.1　性能差异 74
• 5.2.2　兼容差异 74
• 5.3　深入padding 74
• 5.4　外边距叠加 76
• 5.4.1　外边距叠加的三种情况 77
• 5.4.2　外边距叠加的意义 78
• 5.5　负margin技术 79
• 5.5.1　负margin简介 79
• 5.5.2　负margin技巧 82
• 5.6　overflow 86
• 第06章　display属性
• 6.1　块元素和行内元素 90
• 6.1.1　块元素 90
• 6.1.2　行内元素 92
• 6.2　display简介 93
• 6.2.1　块元素 93
• 6.2.2　inline元素 93
• 6.2.3　inline-block元素 94
• 6.3　display:none 95
• 6.3.1　display:none简介 95
• 6.3.2?“display:none”和
• “visibility:hidden”的区别 96
• 6.4　display:table-cell 98
• 6.4.1　图片垂直居中于元素 98
• 6.4.2　等高布局 100
• 6.4.3　自动平均划分元素 102
• 6.5　去除inline-block元素间距 103
• 第07章　文本效果
• 7.1　文本效果简介 107
• 7.2　深入text-indent 108
• 7.3　深入text-align 111
• 7.3.1　text-align起作用的元素 112
• 7.3.2?“text-align:center;”与
• “margin:0 auto;”的区别 113
• 7.4　深入line-height 113
• 7.4.1　line-height的定义 113
• 7.4.2　line-height取值 115
• 7.5　深入vertical-align 118
• 7.5.1　vertical-