1 Emmet简介
Emmet是一个文本编辑器/IDE的插件，使用Emmet通过简短的表达式来快速生成复杂的HTML/CSS代码片段，只要掌握一些常用的语法，可以减少重复编码的工作，帮助我们快速开发。
目前主流的编辑器如 VSCode、WebStorm、Sublime、Atom 都已经集成了Emmet插件，无需要安装或简单配置就能使用。
官网：https://www.emmet.io/
文档：https://docs.emmet.io/
速查：https://docs.emmet.io/cheat-sheet/
PDf：https://docs.emmet.io/cheatsheet-a5.pdf
注意：插件的迭代也是很快的，最新的用法以官网为准。
我用的是 VSCode ，其他编辑器应该也差不多，新建一个HTMl文件，输入div ，可以看到 Emmet Abbreviation 说明这是一个 Emmet 规则：
这时，只要按 TAB键 或 回车 就可以立即生成代码片段，这里展示的是 div 标签：
所有的语法结尾都可以使用 TAB键 来展开，本文从HTML语法和CSS语法两个方面简单介绍一下。
1.1 TAB键不管用
解决按英文感叹号!+tab，无法生成html模板框架的问题。
更新后， VSCode 应该是把 Emmet 的TAB键关了，再设置里，把他打开就行了。
2 Emmet基本语法
除了按 TAB键，还可以直接按 回车，效果一样。
2.1 “!” 初始化HTML结构
“!”，生成初始化结构
展开后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2.2 "#" 生成有id的标签
“#” ，生成带有 id 的标签；
展开后：
当标签为 div ，还可以省略 div 标签，直接输入 #main 效果一样：
2.3 "." 生成有class的标签
"."，生成带有class的标签；
展开后：
当标签为 div ，还可以省略 div 标签，直接输入 .main 效果一样：
2.4 "[]" 生成有属性的标签
"[]"，生成有属性的标签；
div[name="wrap" data="data"] // 属性间用空格隔开，属性值加引号""
展开后：
<div name="wrap" data="data"></div>
2.5 ">" 生成子节点
">"，生成多个子节点；
展开后
<ul>
<li><span></span></li>
</ul>
2.6 “+” 生成兄弟节点
"+"，生成同级的多个节点；
展开后：
<div></div>
<p></p>
<span></span>
2.7 "^" 生成父级节点
"^"，生成与父级同级的节点；
展开后：
<div><span></span></div>
<p></p>
也可以多个 ^ 来向更高级的父级生成同级的节点：
展开后：
<div>
<p><span><em></em></span></p>
</div>
<div></div>
2.8 "()" 节点分组
"()"，对节点分组，打包提升优先级；
展开后：
<div>
<ul>
<li></li>
</ul>
<p></p>
</div>
如果这里不加()，会怎样？
div>ul>li+p
<div>
<ul>
<li></li>
<p></p>
</ul>
</div>
p标签会变成li的兄弟标签，这就不是我们要的效果了。
如果换成 ^ 的话：
展开后：
<div>
<ul>
<li></li>
</ul>
</div>
<p></p>
2.9 “*” 重复节点
"*"，重复生成多个节点：
展开后：
<div></div>
<div></div>
<div></div>
2.10 "{}" 生成文本内容
“{}”，生成文本里的内容：
展开后：
<div>
<p>这是一个段落</p>
</div>
2.11 “&” 生成数字编号
“&”，生成代有数字编号的“属性”和节点内容；这里配合了“*”一起使用；
展开后：
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
示例：
有了以上基础，可以来几个练习试试：
div#wrap.head // # 和 . 组合
<div id="wrap" class="head"></div>
div.main.main-nav // 连 . 的组合，也可以更多点
<div class="main main-nav"></div>
(div.warp>p.bar+span#foo)*2 // . > + # * 的组合
<div class="warp">
<p class="bar"></p>
<span id="foo"></span>
</div>
<div class="warp">
<p class="bar"></p>
<span id="foo"></span>
</div>
a.click{click me} // . {} 的组合
<a href="" class="click">click me</a>
3 Emmet写HTML
根据基本语法和标签的特点可以写出更快的代码。
3.1 个性属性标签
<a> 标签的简写：
a // a 标签
<a href=""></a>
a:link // 带有 http:// 的简写
<a href="http://"></a>
a:link.goto{更多>>} // : . {} 组合
<a href="http://" class="goto">更多>></a>
<link><style><script> 标签的简写：
link
<link rel="stylesheet" href="">
link:css
<link rel="stylesheet" href="style.css">
style
<style></style>
script
<script></script>
script:src
<script src=""></script>
3.2 input 标签
input 里有一些常用的：
input
<input type="text">
input:h // input:hidden
<input type="hidden" name="">
input:t // input:text
<input type="text" name="" id="">
input:email
<input type="email" name="" id="">
input:tel
<input type="tel" name="" id="">
3.3 其他常用标签简写
还有一些常用的：
img
<img src="" alt="">
btn
<button></button>
meta:vp
<meta name="viewport" content="width=device-width, initial-scale=1.0">
iframe
<iframe src="" frameborder="0"></iframe>
4 Emmet 写CSS
Emmet在CSS中的简写非常多，例举一些常用的：
4.1 width 和 height
width 和 height 大概是最常用的CSS属性了，Emmet简化了使用；
w ---> width:;
w100 ---> width:100px;
h ---> height:;
h100 ---> height:100px;
4.2 margin 和 padding
简写不带数值：
m ---> margin:;
mt ---> margin-top:; // 同理还有 mr mb ml
p ---> padding:;
pt ---> padding-top:; // 同理还有 pr pb pl
简写带数值：
m10 ---> margin:10px; // m10px20px30px40px ---> margin: 10px 20px 30px 40px
4.3 更多常用的简写
例举几个常用的简写：
fz ---> font-size:;
fwb ---> font-weight: bold;
fl ---> float:left;
c ---> color: #000;
bd ---> border: 1px solid #000;
bgc ---> background-color: #fff;
bgr ---> background-repeat: no-repeat;
lh ---> line-height:;
lh50px ---> line-height: 50px;
df ---> display:flex;
jcc ---> justify-content:center;
tac ---> text-align:cener;
poa ---> postion: absolute; // pos:a 效果一样
还有非常多的简写，可以大大提升编码速度。
