VsCode中使用Emmet神器快速编写HTML代码

一、Emmet简述

E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。

E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。
VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码. 语法基本规则如下:

E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。

本文仅介绍了在Html使用Emmet,
如果想Css缩写的语法请参考这里https://docs.emmet.io/css-abbreviations/
---

二、基础用法

• 元素(Elements)
  您可以使用元素的名称，如div或p来生成HTML标签。Emmet没有一组可用的标签名称，可以写任何单词并将其转换为标签。也就是只要知道元素的缩写,Emmet会自动转换成对应标签.
  形如:

  div => <div> </div>
  foo => <foo> </foo>
  html:5 => 将生成html5标准的包含body为空基本dom
  html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML
  html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01
  a:mail          => <a href="mailto:"></a>
  a:link          => <a href="http://"></a>
  base            => <base href="">
  br              => <br>
  link            => <link rel="stylesheet" href="">
  script:src      => <script src=""></script>
  form:get        => <form action="" method="get"></form>
  label           => <label for=""></label>
  input           => <input type="text">
  inp             => <input type="text" name="" id=