sublime中emmet插件使用

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>

记住以上公式，能够大大提高写代码的效率。