emmet(原名zen coding)：是文本编辑器的一款辅助输入HTML和CSS代码的插件。现在可支持以下的文本编辑器：
Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat (可以通过 “Install Mixin” 对话框安装)
Komodo Edit/IDE ( Tools → Add-ons)
Notepad++
PSPad
CodeMirror2/3
Brackets
在上面列表点击你目前使用的编辑器，就可以获得对应的插件文件，安装之后就可以使用 Emmet 的相关功能了。由于 Sublime text 2 是目前最好最强大的前端开发代码编辑器，所以本文就以 Sublime text 2文档编辑器中使用为例，讲解基础语法。
1，初始化文档
当我们开始编写一个html文档时，有些固定的标签是可以快速生成的。在sublime text2中新建文件，另存为html格式。输入：
！或者html:5 , 然后tab键或者Ctrl+e 快速加载HTML5文档。他类型的文档：
html:5 或!：用于HTML5文档类型
html:xt：用于XHTML过渡文档类型
html:4s：用于HTML4严格文档类型
2，单个DOM元素
在html文档中输入以下格式，然后按下tab键可以快速补全新建的元素，并赋值相应的属性：
2.1，div#myDiv 按Tab键
<div id="myDiv"></div>2.2，“.”号表示class 名
div.myDiv
<div class="myDiv"></div>2.3,“#”号表示Id
div#testId.testName
<div id="testId" class="testName"></div>2.4，大括号{}内添加的是内容
div{thisismydiv}
<div>thisismydiv</div>2.5，方括号[]可赋值属性。
scrip[src=”/local/my/.js”]
<script src="/local/my/.js"></script>3，DOM元素嵌套
emmet的补全功能很强大，一行代码就可以实现DOM元素的嵌套，我们首先熟悉下元素关系符号：
：子元素符号，表示嵌套的元素
+：同级标签符号
^：可以使该符号后的标签提升一级
下面给出了例子, 输入以下格式，然后按下Tab键，快速产生嵌套元素：
3.1，div>span
<div><span></span></div>3.2，div#parDiv>div.childnode
然后Tab
<div id="parDiv">
<div class="childnode"></div>
</div>3.3，div+div+div
<div></div>
<div></div>
<div></div>3.4，div^p
<div></div>
<p></p>3.5，span>div^div#sss
<span>
<div></div>
</span>
<div id="sss"></div>注意与： span>div+div#sss 的区别：
<span>
<div></div>
<div id="sss"></div>
</span>4，嵌套结合括号
嵌套加上使用括号（），可快速生产一些代码块：
div#block1>span)+(div#block2>ul>li)+(.block3>h1) 接着按下Tab键
div id="block1"><span></span></div>
<div id="block2">
<ul>
<li></li>
</ul>
</div>
<div class="block3">
<h1></h1>
</div>注意：以上id为block3的标签还使用了隐式标签。输入“.item”即可生成
<div class="item"></div>现在，emmet还会根据上下文判断隐式标签给出div还是其他，如:
ul>.myitem
<ul>
<li class="myitem"></li>
</ul>这里有素有隐式标签名称：
li：用于ul和ol中
tr：用于table、tbody、thead和tfoot中
td：用于tr中
option：用于select和optgroup中
5，定义多个元素
这个是个很有用的功能。使用*定义多个元素，下面在例子中学习，同样的，输入公式后按Tab键，就不一一标注了：
5.1， ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>5.2，结合属性使用：div#outer>div#childDiv*3
<div id="outer">
<div id="childDiv"></div>
<div id="childDiv"></div>
<div id="childDiv"></div>
</div>5.3 使用$来依次编号各元素：div>ul>li.item$*5
<div>
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
</div>5.4 使用”$@-“符号号，来反向编号：div>ul>li.item$@-*5
<div>
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
</div>5.5 使用“$@数字”从指定的数字开始编号，例如“$@3”从3开始标号：
div>ul>li#itme$@3*6
<div>
<ul>
<li id="itme3"></li>
<li id="itme4"></li>
<li id="itme5"></li>
<li id="itme6"></li>
<li id="itme7"></li>
<li id="itme8"></li>
</ul>
</div>记住以上公式，能够大大提高写代码的效率。
