sublime text3里Emmet基本语法

Emmet基本语法

emmet-zen-coding-tutorial是个很不错的教程，下面是一些简单的语法规则

元素

通过元素名生成HTML标签，如div生成<div></div>，当需要生成自定义标签时，使用ctrl + e即可，如foo生成<foo></foo>

子元素嵌套>

类似CSS子选择器div>ul>li生成

<div>
    <ul>
        <li></li>
    </ul>
</div>

兄弟元素+

类似CSS兄弟选择器，+生成兄弟关系的元素div+p+div生成

<div></div>
<p></p>
<div></div>

向上操作符^

Emmet操作符的作用对象是基于当前上下文的，>操作符会让上下文向下转移到深层元素，^操作符可以向上移动上下文，如div+div>p>span+em生成

<div></div>
<div>
    <p><span></span><em></em></p>
</div>

通过^操作符修改上下文控制元素div+div>p>span+em^bq生成

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

多元素操作符*

使用*后跟数字，生成对于数量的元素ul>li*5生成

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

分组操作符()

使用括号分组完成复杂的逻辑div>(div>ul>li*2>a)*2+footer>p生成

<div>
    <div>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
    <div>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
    <footer>
        <p></p>
    </footer>
</div>

id和class生成

使用类似css中id和class的语法，可以为元素添加所需属性如div#header+div.cls1.cls2生成

<div id="header"></div>
<div class="cls1 cls2"></div>

自定义属性

使用类似css中[attr]的语法添加自定义属性td[title="Hello" colspan=3]生成

<td title="hello" colspan="3"></td>

元素编号$

使用*生成多个元素的时候，可以使用$</code>进行编号<code>ul&gt;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>

{}添加文本

ul>(li{item $})*3生成

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>