一、Emmet 语法
(Emmet)[docs.emmet.io/abbreviatio… Zen Coding）是一个能大幅度提高前端开发效率的一个工具。
在前端开发过程中，大部分的工作都是写 HTML、CSS 代码，手动编写的效率非常低，VSCode 内置了 Emmet 语法，在后缀为 .html 或者 .css 的文件中输入缩写后按住Tab键既会自动生成相应的代码。
! 和 html:5 可以快速生成完整结构的 html5 代码：
> 子代 和 + 兄弟
需要生成嵌套结构的代码时，可以使用 > 来连接父元素和子元素，比如 div>p，每一个 > 都表示一层嵌套，生成多层嵌套的形式就可以这样 div>p>a
+ 可以用于生成同级并列的元素，比如 div+div 就会生成两个同级的 div 元素。
* 多个 和 ^ 上一级
如果需要生成多个重复的元素，一般情况下我们会使用 *，使用形式为 div*5 就表示可以生成五个同级的 div 元素。
在从上往下的使用 Emmet 语法编写 HTML 结构的时候，有嵌套的时候可能我们想回到上一级或者上上级，这就需要使用到 ^ 符号了，比如下面这个例子：
^ 符号也可以连续使用，有几个 ^ 符号就表示调回到上面几级，比如下面这个例子：
() 分组
() 可以实现分组，比如在生成嵌套形式的时候，子元素中包含多个同级不同类型的元素，此时就可以使用 () 来进行区分，或者我们想通过 () 来进行明确的区分，比如下面这个例子：
属性值（id 属性、class 属性、普通属性）和内容 {}
在生成元素的时候，是需要添加一些属性的，比如常见的 class 属性以及 id 属性，在使用 Emmet 语法的时候可以通过 div#info 生成一个 id 为 info 的 div 元素，通过 div.info 生成一个 class 为 info 的 div 元素：
如果是普通属性我们可以直接使用 [] 的形式指定属性和属性名，比如 div[attributeName=attributeValue]，如果元素是双标签并且标签中有一定的文本内容，可以通过 {} 来表示文本内容，比如下面这个例子：
$数字和隐式标签
$ 表示数字1,2,3,4...，当我们需要生成带数字的内容的时候，就可以使用 $，比如下面这个例子：
隐式标签指的是当我们在生成标签的时候可以将标签名省略，比如 ul>li.item 就可以将 li 省略，改为 ul>.item，需要注意的是 > 或者 + 是不能省略的。
ul>li.item*5 的简写形式：
div.box+div.container 的简写形式：
CSS Emmet
Emmet 语法除了支持 HTML 结构的编写，同样也支持 CSS 语法的编写，比如 CSS 中书写宽高时，就可以已通过 Emmet 语法的缩写形式 w20+h20：
点回车键就可以快速生成宽高的样式设置：
设置上下左右的 margin 值时，可以通过这种形式实现 m20-30-40-50：
点回车键生成的效果如下：
其他的属性也都可以通过首字母的缩写来快速的设置：
