《Web前端开发精品课：HTML与CSS进阶教程》源代码

编辑推荐

通俗易懂 案例简洁形象，生动剖析晦涩难懂的知识点。 直击要点 规避思维误区，为初学者打牢基础保驾护航。 全面培养 讲透基础知识，亦注重开发技巧与思维锻炼。 精简浓缩 精炼核心内容，为读者节省学习时间与成本。 在线辅助 结合网站资源，强化书本学习并拓展新知识。

内容简介

本书内容结合笔者在前后端大量开发中的实战经验，系统化知识，浓缩精华，用通俗易懂的语言直击学习者的痛点。通过本书，能让你从“野生网页设计师”水平提升达到“真正前端工程师”水平。全书分为两大部分：首部分是HTML进阶内容，主要介绍HTML高级技巧和HTML语义化；第二部分是CSS进阶内容，主要介绍CSS开发技巧、代码规范、性能优化、属性本质、重要概念（如包含块、BFC和IFC等）。除了知识讲解，教程还融入了大量的开发案例，更加注重编程思维的培养，并且提供学习者一个流畅的学习思路。

作者简介

莫振杰 2011~2015就读于暨南大学信科院计算机科学与技术专业，从事前后端开发一年多，开发过绿叶学习网、广州智能工程研究会网站、大量在线应用工具，业余时间阅读大量国内外技术书籍。 现为绿叶学习网（http://www.lvyestudy.com）的站长，该网站用于分享自己在前后端开发中的一些经验，并且制作相关前后端开发的在线教程。这些在线教程在互联网引起广泛关注，极大受到网友推崇。本人编写过大量原创在线教程，每一个教程广受网友称赞与推崇。

目录

• 第一部分　HTML进阶
• 第01章　HTML基础知识
• 1.1　HTML和CSS进阶简介 2
• 1.1.1　你真的精通HTML和CSS吗 2
• 1.1.2　进阶教程简介 3
• 1.2　HTML、XHTML和HTML53
• 1.2.1　HTML和XHTML 3
• 1.2.2　HTML5 4
• 1.3　div和span6
• 1.4　id和class7
• 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 reset66
• 4.5.2　为什么要用CSS reset66
• 4.5.3　如何使用CSS reset67
• 第05章　盒子模型
• 5.1　CSS盒子模型 70
• 5.2　深入border 73
• 5.2.1　性能差异 74
• 5.2.2　兼容差异 74
• 5.3　深入padding74
• 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-indent108
• 7.3　深入text-align111
• 7.3.1　text-align起作用的元素 112
• 7.3.2?“text-align:center;”与
• “margin:0 auto;”的区别 113
• 7.4　深入line-height113
• 7.4.1　line-height的定义 113
• 7.4.2　line-height取值115
• 7.5　深入vertical-align 118
• 7.5.1　vertical-