一、Emmet语法
定义：Emmet语法的前身是Zen coding,它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法。
1.1 快速生成HTML结构语法
1.2 快速生成CSS样式语法
1.3 快速格式化代码
二、CSS复合选择器
2.1、复合选择器介绍
定义：在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的
特点：
a,复合选择器可以更准确、更高效的选择目标元素(标签)
b,复合选择器是由两个或多个基础选择器，通过不同的方式组合而成
c,常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
2.2、后代选择器
定义：后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：元素1 元素2 {
样式声明
}
上述语法表示选择元素1里面的所有元素2(后代元素)
特点：
a,注意：元素1和元素21中间用空格隔开
b,元素1是父级，元素2是子集，最终选择的是元素2
c,元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
d,元素1和元素2可以是任意基础选择器
示例： ul li { color: red; } /* 选择ul里面所有的li标签元素 */
2.3、子选择器
定义：子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
语法：元素1>元素2 { 样式声明 }
上述语法表示选择元素1里面的所有直接后代(子元素)元素2
特点：
a,元素1和元素2中间用大于号隔开
b,元素1是父级，元素2是子集，最终选择的是元素2
c,元素2必须是亲儿子，其孙子、重孙之类都不归它管，你也可以叫它亲儿子选择器
示例：
div>p { color: red; } /* 选择div里面所有最近一级p标签元素*/
2.4、并集选择器
定义：并集选择器可以选择多组标签，同时为它们定义相同的样式。通常用于集体声明。
语法：并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分。
元素1,元素2 { 样式声明 } //表示选择元素1和元素2
特点:
a,元素1和元素2中间用英文逗号隔开
b,逗号可以理解为和的意思
c,并集选择器通常用于集体声明
d,约定的语法规范，我们并集选择器喜欢竖着写；一定要注意，最后一个选择器不需要加逗号
示例：
ul, div {
color: red;
}
1.5、伪类选择器
定义：伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个、第n个元素
语法：伪类选择器书写的最大的特点是用冒号(:)表示，比如:hover、:first-child等
1.5.1、链接伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
注意事项：
a,为了确保生效，请按照LVHA的顺序声明(即:link、:visited、:hover、:active)
b,记忆法：love hate 或者lv包包好
c,因为a标签链接在浏览器中具有默认样式，所有我们实际工作中都需要给链接单独指定样式
实际开发：
1.5.2、:focus伪类选择器
定义: :focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器业主要针对于表单元素来说
示例：
input:focus {
background-color: yellow;
}
1.6、总结
三、CSS的元素显示模式
3.1、元素显示模式
目的：网页的标签非常多，在不同地方会用到不同类型的标签，了解它们的特点可以更好的布局我们的网页
定义：元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己占一行，比如一行可以占多个<span>
HTML元素一般分为块元素和行内元素两种类型
3.2、块元素
定义：常见的块元素有<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最典型的块元素
特点：
a,比较霸道，自己独占一行
b,高度，宽度，外边距以及内边距都可以控制
c,宽度默认是容器(父级宽度)的100%
d,是一个容器及盒子,里面可以放行内或者块级元素
注意：
a,文字类的元素内不能使用块级元素
b,<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
c,同理，<h1>-<h6>等都是文字类标签，里面也不能放其它块级元素
3.3、行内元素
定义：常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素，有的地方也称行内元素为内联元素
特点：
a,相邻行内元素在一行上，一行可以显示多个
b,高、宽直接设置是无效的
c,默认宽度就是它本身内容的宽度
d,行内元素只能容纳文本或其它行内元素
注意：
a，链接(<a>标签)里面不能再放链接
b，特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
3.4、行内块元素
定义：在行内元素中有几个特殊的标签：<img />、<input />、<td>,它们同时具有块元素和行内元素的特点，有资料称它们为行内块元素
特点：
a,和相邻行内元素(行内块)在一行上，但是它们之间会有空白缝隙，一行可以显示多个(行内元素特点)
b,默认宽度就是它本身内容的宽度(行内元素特点)
c,高度、行高、外边距以及内边距都可以控制(块级元素特点)
3.4、总结
3.5、元素显示模式转换
定义：特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性(例如想要增加链接<a>的触发范围)
a,转化为块元素：display: block;
b,转换为行内元素：display: inline;
c,转换成行内块元素：display: inline-block;
示例：
/*增加链接<a>的触发范围*/
a {
width: 200px;
height: 50px;
background-color: red;
display: block;
}
3.6、小工具的使用(snipaste)
垂直居中技巧
