前言
Emmet是一种快速书写 HTML 和 CSS 代码的工具，它的前身是 Zen coding，使用缩写来提高 HTML/CSS的编写速度。它提供了一种类似缩写的方式来生成 HTML 和 CSS 代码，减少了重复输入和手动编写的工作量。同时，它还有自动生成样式、快速生成内容占位符等多种实用功能，帮助进行前端开发。
语法内容
快速生成html结构语法
-
要生成单个标签，可以直接输入：标签再按tab键。如：
html输入div时再按tab键会生成 <div></div> -
要生成多个相同的标签，可以输入 ：标签*数目。如：
html输入div*5时可生成 <div></div> <div></div> <div></div> <div></div> <div></div> -
快速生成有id属性的标签，可以输入：标签#id名称。（id是唯一的）如：
html输入div#nav生成 <div id="nav"></div> -
快速生成有class属性的标签，可以输入：标签.类名。（class可以是不唯一的）如：
html输入div.nav可生成 <div class="nav"></div> 输入div#header.nav生成 <div id="header" class="nav"></div> 输入div.class.nav生成（可以一直加.） <div class="class nav"></div> -
快速生成标签的嵌套，可以输入：标签 > 标签。如：
html输入ul>li>a生成 <ul> <li> <a href=""></a> </li> </ul> 输入ul>li*5生成 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> -
快速生成同级标签，可以输入：标签+标签。如：
html输入div+p生成 <div></div><p></p> -
快速生成上级标签，可以输入：标签^标签。如：
html输入div^p生成 <p></p> <div></div> 输入div+ul>li>a+p^div生成 <div></div> <ul> <li> <a href=""></a> <p></p> </li> <div></div> </ul> 输入div+ul>li>a+p^^div生成 <div></div> <ul> <li> <a href=""></a> <p></p> </li> </ul> <div></div>由此可见^^表示上上级，以此类推。
-
分组：（）
括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关
html输入(div>ul>li+a)+div生成 <div> <ul> <li></li> <a href=""></a> </ul> </div> <div></div> -
自增符号（默认从1开始自增）：&
html输入ul>li.class$*3生成 <ul> <li class="class1"></li> <li class="class2"></li> <li class="class3"></li> </ul> 输入ul>li.class$$*3生成（一个$表示一位数） <ul> <li class="class01"></li> <li class="class02"></li> <li class="class03"></li> </ul> 输入h$*3生成 <h1></h1> <h2></h2> <h3></h3>在$后面加@-表示倒序自增
html输入h$@-*3生成 <h3></h3> <h2></h2> <h1></h1>在$后面加@2表示从2开始自增
html输入h$@2*3生成 <h2></h2> <h3></h3> <h4></h4> -
快速生成自定义属性和属性值：标签[属性="属性值"]。如：
html输入span[title="123"]生成 <span title="123"></span> 输入span[title="123" class="aaa"]生成（用空格隔开） <span title="123" class="aaa"></span> 输入[title="123" class="aaa"]生成 <div title="123" class="aaa"></div> -
快速生成文本：{}
html输入div{aaa}生成 <div>aaa</div> -
隐式标签
当没有指明标签时，默认为div标签
html输入.nav生成 <div class="nav"></div> 输入#nav生成 <div id="nav"></div> 输入[class="nav"]生成 <div class="nav"></div>当没有指明标签时，而且有父子级关系时
htmlli可以在ul和ol使用，如： 输入ul>.class$*5生成 <ul> <li class="class1"></li> <li class="class2"></li> <li class="class3"></li> <li class="class4"></li> <li class="class5"></li> </ul>
快速生成css样式
快速输入css样式的方法是输入样式的缩写再按tab键快速生成，如：
w200按tab可以生成width: 200px;
1h26按tab可以生成line-height: 26px;
tac可快速生成text-align:center;
lh20px可快速生成line-height:20px;
ti2em可快速生成text-indent:2em;
tdn可快速生成text-decoration:none;
等等。
总结
Emmet语法可以帮助我们提高代码效率，但是最重要的还是要多练。