在进行前端开发的时候，经常要手动写一些Html和CSS代码，有时候手写比较的繁琐。所以Emmet语法就出现了，主要作用就是类似于快捷键的作用，只需要敲出几个字母就可以快速自动生成一段代码，大大提高开发效率。
Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的：Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。
那么接下来，就通过官方的文档给大家讲解，简单直接。
一、基础语法示例：
子节点（Child）：>
输入：nav>ul>li
自动生成：
<nav>
<ul>
<li></li>
</ul>
</nav>重复（Multiplication）：*
输入：ul>li*5
自动生成：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>编号（Item numbering）：$
输入：ul>li.item$*5
自动生成：
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>输入：h$[title=item$]{Header $}*3
自动生成：
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>输入：ul>li.item$$$*5
自动生成：
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>输入：ul>li.item$@-*5
自动生成：
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>输入：ul>li.item$@3*5
自动生成：
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>重复（Sibling）：+
输入：div+p+bq
自动生成：
<div></div>
<p></p>
<blockquote></blockquote>上级结点（Climb-up）：^
输入：div+div>p>span+em^bq
自动生成：
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>输入：div+div>p>span+em^^bq
自动生成：
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>分组（Grouping）：()
输入：div>(header>ul>li*2>a)+footer>p
自动生成：
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>输入：(div>dl>(dt+dd)*3)+footer>p
自动生成：
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>ID和类属性（ID and CLASS attributes）
输入：#header
自动生成：
<div id="header"></div>输入：.title
自动生成：
<div class="title"></div>输入：form#search.wide
自动生成：
<form id="search" class="wide"></form>输入：p.class1.class2.class3
自动生成：
<p class="class1 class2 class3"></p>自定义属性（Custom attributes）
输入：p[title="Hello world"]
自动生成：
<p title="Hello world"></p>输入：td[rowspan=2 colspan=3 title]
自动生成：
<td rowspan="2" colspan="3" title=""></td>输入：[a='value1' b="value2"]
自动生成：
<div a="value1" b="value2"></div>文本（Text）：{}
输入：a{Click me}
自动生成：
<a href="">Click me</a>输入：p>{Click }+a{here}+{ to continue}
自动生成：
<p>Click <a href="">here</a> to continue</p>饮食标签（Implicit tag names）
输入：.class
自动生成：
<div class="class"></div>输入：em>.class
自动生成：
<em><span class="class"></span></em>输入：ul>.class
自动生成：
<ul>
<li class="class"></li>
</ul>输入：table>.row>.col
自动生成：
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>二、HTML结构：
输入：！或 html:5
自动生成：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>输入：a
自动生成：
<a href=""></a>输入：a:link
自动生成：
<a href="http://"></a>输入：br
自动生成：
<br />输入：link
自动生成：
<link rel="stylesheet" href="" />输入：link:css
自动生成：
<link rel="stylesheet" href="style.css" />输入：style
自动生成：
<style></style>输入：script
自动生成：
<script></script>输入：script:src
自动生成：
<script src=""></script>输入：input:text 或 input:t
自动生成：
<input type="text" name="" id="" />输入：html:xml
自动生成：
<html xmlns="http://www.w3.org/1999/xhtml"></html>输入：bq
自动生成：
<blockquote></blockquote>输入：doc
自动生成：
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>输入：doc4
自动生成：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>输入：ol+
自动生成：
<ol>
<li></li>
</ol>输入：ul+
自动生成：
<ul>
<li></li>
</ul>输入：!!!
自动生成：
<!DOCTYPE html>三、CSS结构：
输入：pos
自动生成：
position:relative;输入：pos:s
自动生成：
position:static;输入：pos:a
自动生成：
position:absolute;输入：m
自动生成：
margin:;输入：m:a
自动生成：
margin:auto;输入：bxz
自动生成：
box-sizing:border-box;输入：bg
自动生成：
background:#000;输入：!
自动生成：
!important输入：@f
自动生成：
@font-face {
font-family:;
src:url(|);
}输入：@i或@import
自动生成：
@import url();输入：@kf
自动生成：
@-webkit-keyframes identifier {
from { }
to { }
}
@-o-keyframes identifier {
from { }
to { }
}
@-moz-keyframes identifier {
from { }
to { }
}
@keyframes identifier {
from { }
to { }
}大致列举这么多，更多详细的其他用法类似。
大家也可以查看官方示例文档：https://docs.emmet.io/cheat-sheet/
