目前很多主流前端开发IDE工具，都支持Emmet语法，它的前身是Zen coding，因为其写法更为高效，被广泛使用。如EditPlus、WebStorm 、HBuilder都支持Emmet语法，如果之前没使用过，可以尝试写下，会发现代码编写速度提升很多。
一、常用语法使用
1.1 通过“>”号，创建多层Html结构
<!-- 输入：div>ul>li，Tab键结束 -->
<div>
<ul>
<li></li>
</ul>
</div>1.2 通过"+"号，创建兄弟结构
<!-- 输入：div>p+h2+a，Tab结束 -->
<div>
<p></p>
<h2></h2>
<a href=""></a>
</div>1.3 通过"^"号，创建子项上一级Html结构
<!-- 输入：div+div>span+a+em^div>p，Tab结束 -->
<div></div>
<div>
<span></span>
<a href=""></a>
<em></em>
</div>
<div>
<p></p>
</div>1.4 通过"*"号，创建多个元素
<!-- 输入：ul>li*3，Tab结束 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>1.5 通过“()”号，分组创建
<!-- 输入：div>(header>ul>li*3>a)+footer>p*2，Tab结束 -->
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
<p></p>
</footer>
</div><!-- 输入：(div>dl>(dt+dd)*3)+footer>p*2，Tab结束 -->
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
<p></p>
</footer>1.6 通过"."，创建元素的类选择器
<!-- 输入：ul>li.item*3，Tab结束 -->
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>1.7 通过"#"，创建元素的ID选择器
<!-- 输入：div#header，Tab结束 -->
<div id="header"></div>1.8 通过"[]"，创建元素的属性值
<!-- 输入：div[title='标题']，Tab结束 -->
<div title="标题"></div>
<!-- 输入：a[href='链接' title='标题']，Tab结束 -->
<a href="链接" title="标题"></a>1.9 通过"{}"，创建元素中内容
<!-- 输入：a[href='#']{标题内容},Tab结束 -->
<a href="#">标题内容</a>
<!-- 输入：h3{这是一个标题}+p{这里是描述内容} -->
<h3>这是一个标题</h3>
<p>这里是描述内容</p>2.0 通过“$"，创建相对索引
<!-- 类选择器，循环输入对应索引值，输入：ul>li.item$*3，Tab结束 -->
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
<!-- 内容部分，循环输入对应索引值，输入：p{这里是内容 $}*3，Tab结束 -->
<p>这里是内容 1</p>
<p>这里是内容 2</p>
<p>这里是内容 3</p>
<!-- Html标签，循环输入对应索引值，输入：h${标题 $}*3，Tab结束 -->
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<!-- 通过多个$符号，实现数值长度变化，输入：ul>li.item$$${标题 $}*3，Tab结束 -->
<ul>
<li class="item001">标题 1</li>
<li class="item002">标题 2</li>
<li class="item003">标题 3</li>
</ul>
2.1 智能检索，通过对应符号或标签，自动生成下级元素
<!-- 前面无任何标签，直接通过点，默认为div元素，输入：.heaeder，Tab结束 -->
<div class="heaeder"></div>
<!-- 父级为块级元素，下级会默认生成行内标签span，输入：p>.item，Tab结束 -->
<p><span class="item"></span></p>
<!-- 父级为ul，dl，table等元素，下级会默认生成其对应的子项标签，输入：ul>.item*3，Tab结束 -->
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<!-- 输入：table>.row>.column*2，Tab结束 -->
<table>
<tr class="row">
<td class="column"></td>
<td class="column"></td>
</tr>
</table>二、HTML模块缩写转化
2.1 通过"!"，生成html结构体
<!-- 输入：!，Tab结束 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html> 2.2 生成a标签
<!-- 输入：a:link，Tab结束 -->
<a href="http://"></a>
<!-- 输入：a:mail，Tab结束 -->
<a href="mailto:"></a>2.3 link元素的生成
<!-- 输入：link，Tab结束 -->
<link rel="stylesheet" href="">
<!-- 输入：link:css，Tab结束 -->
<link rel="stylesheet" href="style.css" media="all">
<!-- 输入：，Tab结束 -->
<link rel="stylesheet" href="print.css" media="print">
<!-- 输入：link:favicon，Tab结束 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- 输入：link:touch，Tab结束 -->
<link rel="apple-touch-icon" href="favicon.png">
<!-- 输入：link:rss，Tab结束 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
2.4 meta标签生成
<!-- 输入：meta:utf，Tab结束 -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- 输入：meta:vp，Tab结束 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 输入：meta:compat，Tab结束 -->
<meta http-equiv="X-UA-Compatible" content="IE=7">2.5 input标签生成
<!-- 输入：input:hidden，Tab结束 -->
<input type="hidden" name="">
<!-- 输入：input:file，Tab结束 -->
<input type="file" name="" id="">
2.6 通过"+"，生成ol、ul、dl、table、select等元素完整结构
<!-- 输入：ol+，Tab结束 -->
<ol>
<li></li>
</ol>
<!-- 输入：ul+，Tab结束 -->
<ul>
<li></li>
</ul>
<!-- 输入：dl+，Tab结束 -->
<dl>
<dt></dt>
<dd></dd>
</dl>
<!-- 输入：table+，Tab结束 -->
<table>
<tr>
<td></td>
</tr>
</table>2.7 输入"c”，回车得到html注释代码
<!-- 输入：c，Tab结束 -->
<!-- -->2.8 通过"cc:"，生成IE对应兼容代码
<!-- 输入：cc:ie6，Tab结束 -->
<!--[if lte IE 6]>
<![endif]-->
<!-- 输入：cc:ie，Tab结束 -->
<!--[if IE]>
<![endif]-->
<!-- 输入：cc:noie，Tab结束 -->
<!--[if !IE]><!-->
<!--<![endif]-->?注：其他标签就不一一介绍了，常规如：hr、br、input、a、p、span、style、script直接回车即可。
三、CSS模块缩写转化
3.1 position属性转化
/* 输入：pos:s，Tab结束 */
position: static;
/* 输入：pos:a，Tab结束 */
position: absolute;
/* 输入：pos:r，Tab结束 */
position: relative;
/* 输入：pos:f，Tab结束 */
position: fixed;3.2 float属性转化
/* 输入：fl:n，Tab结束 */
float: none;
/* 输入：fl:l，Tab结束 */
float: left;
/* 输入：fl:r，Tab结束 */
float: right;3.3 display属性转化
/* 输入：d:n，Tab结束 */
display: none;
/* 输入：d:b，Tab结束 */
display: block;
/* 输入：d:i，Tab结束 */
display: inline;
/* 输入：d:ib，Tab结束 */
display: inline-block;
/* 输入：d:li，Tab结束 */
display: list-item;
/* 输入：d:ri，Tab结束 */
display: run-in;
/* 输入：d:cp，Tab结束 */
display: compact;
/* 输入：d:tb，Tab结束 */
display: table;3.4 face属性转化
/* 输入：@f，Tab结束 */
@font-face {
font-family:;
src:url();
}
/* 输入：@f+，Tab结束 */
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
3.5 margin和padding属性转化
/* 输入：m，Tab结束 */
margin: ;
/* 输入：m:a，Tab结束 */
margin: auto;
/* 输入：mr，Tab结束 */
margin-right: ;
/* 输入：p，Tab结束 */
padding: ;
/* 输入：pl，Tab结束 */
padding-left: ;注：经测试，不同IDE工具使用Css缩写转化，有些写法是无效的，可能是使用版本不同。
样式这块缩写较多，个人觉得实用性不大，所有只简单介绍下，了解即可。
