Emmet基本语法(sublime text3快速生成html标签)

emmet-zen-coding-tutorial是个很不错的教程，下面是一些简单的语法规则 元素 通过元素名生成HTML标签，如div生成

，当需要生成自定义标签时，使用ctrl + e即可，如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>

元素编号$ 使用*生成多个元素的时候，可以使用$进行编号ul>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 1li>
    <li>item 2li>
    <li>item 3li>
ul>