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

**[emmet-zen-coding-tutorial](https://jingyan.baidu.com/article/93f9803febeef5e0e46f553f.html)**是个很不错的教程，下面是一些简单的语法规则 **元素** 通过元素名生成HTML标签，如div生成`

`，当需要生成自定义标签时，使用`ctrl + e`即可，如foo生成`` **子元素嵌套>** 类似CSS子选择器`div>ul>li`生成 ```

div>

<span class="hljs-tag">ul</span>>
    <span class="hljs-tag">li</span>><span class="hljs-tag"><span class="hljs-title">li</span>></span>
<span class="hljs-tag"><span class="hljs-title">ul</span>></span>

div>


 **兄弟元素+** 类似CSS兄弟选择器，+生成兄弟关系的元素`div+p+div`生成 ```
<span class="hljs-tag">div</span>><span class="hljs-tag"><span class="hljs-title">div</span>></span>
<span class="hljs-tag">p</span>><span class="hljs-tag"><span class="hljs-title">p</span>></span>
<span class="hljs-tag">div</span>><span class="hljs-tag"><span class="hljs-title">div</span>></span>

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

<span class="hljs-tag">p</span>><span class="hljs-tag">span</span>><span class="hljs-tag"><span class="hljs-title">span</span>></span><span class="hljs-tag">em</span>><span class="hljs-tag"><span class="hljs-title">em</span>></span><span class="hljs-tag"><span class="hljs-title">p</span>></span>

div>


 通过`^`操作符修改上下文控制元素`div+div>p>span+em^bq`生成 ```
<span class="hljs-tag">div</span>><span class="hljs-tag"><span class="hljs-title">div</span>></span>
<span class="hljs-tag">div</span>>
    <span class="hljs-tag">p</span>><span class="hljs-tag">span</span>><span class="hljs-tag"><span class="hljs-title">span</span>></span><span class="hljs-tag">em</span>><span class="hljs-tag"><span class="hljs-title">em</span>></span><span class="hljs-tag"><span class="hljs-title">p</span>></span>
    <span class="hljs-tag">blockquote</span>><span class="hljs-tag"><span class="hljs-title">blockquote</span>></span>
<span class="hljs-tag"><span class="hljs-title">div</span>></span>

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

<span class="hljs-tag">li</span>><span class="hljs-tag"><span class="hljs-title">li</span>></span>
<span class="hljs-tag">li</span>><span class="hljs-tag"><span class="hljs-title">li</span>></span>
<span class="hljs-tag">li</span>><span class="hljs-tag"><span class="hljs-title">li</span>></span>
<span class="hljs-tag">li</span>><span class="hljs-tag"><span class="hljs-title">li</span>></span>
<span class="hljs-tag">li</span>><span class="hljs-tag"><span class="hljs-title">li</span>></span>

ul>


 **分组操作符()** 使用括号分组完成复杂的逻辑`div>(div>ul>li*2>a)*2+footer>p`生成 ```
<span class="hljs-tag">div</span>>
    <span class="hljs-tag">div</span>>
        <span class="hljs-tag">ul</span>>
            <span class="hljs-tag">li</span>><span class="hljs-tag">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>><span class="hljs-tag"><span class="hljs-title">a</span>></span><span class="hljs-tag"><span class="hljs-title">li</span>></span>
            <span class="hljs-tag">li</span>><span class="hljs-tag">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>><span class="hljs-tag"><span class="hljs-title">a</span>></span><span class="hljs-tag"><span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><span class="hljs-title">ul</span>></span>
    <span class="hljs-tag"><span class="hljs-title">div</span>></span>
    <span class="hljs-tag">div</span>>
        <span class="hljs-tag">ul</span>>
            <span class="hljs-tag">li</span>><span class="hljs-tag">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>><span class="hljs-tag"><span class="hljs-title">a</span>></span><span class="hljs-tag"><span class="hljs-title">li</span>></span>
            <span class="hljs-tag">li</span>><span class="hljs-tag">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>><span class="hljs-tag"><span class="hljs-title">a</span>></span><span class="hljs-tag"><span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><span class="hljs-title">ul</span>></span>
    <span class="hljs-tag"><span class="hljs-title">div</span>></span>
    <span class="hljs-tag">footer</span>>
        <span class="hljs-tag">p</span>><span class="hljs-tag"><span class="hljs-title">p</span>></span>
    <span class="hljs-tag"><span class="hljs-title">footer</span>></span>
<span class="hljs-tag"><span class="hljs-title">div</span>></span>

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]`生成 ```
<span class="hljs-tag">td</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"hello"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>><span class="hljs-tag"><span class="hljs-title">td</span>></span>

元素编号$ 使用*生成多个元素的时候，可以使用$进行编号ul>li.item$*5生成 `
ul>

<span class="hljs-tag">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"item1"</span>><span class="hljs-tag"><span class="hljs-title">li</span>></span>
<span class="hljs-tag">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"item2"</span>><span class="hljs-tag"><span class="hljs-title">li</span>></span>
<span class="hljs-tag">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"item3"</span>><span class="hljs-tag"><span class="hljs-title">li</span>></span>
<span class="hljs-tag">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"item4"</span>><span class="hljs-tag"><span class="hljs-title">li</span>></span>
<span class="hljs-tag">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"item5"</span>><span class="hljs-tag"><span class="hljs-title">li</span>></span>

ul>


 **{}添加文本** `ul>(li{item $})*3`生成 ```
<span class="hljs-tag">ul</span>>
    <span class="hljs-tag">li</span>>item 1<span class="hljs-tag"><span class="hljs-title">li</span>></span>
    <span class="hljs-tag">li</span>>item 2<span class="hljs-tag"><span class="hljs-title">li</span>></span>
    <span class="hljs-tag">li</span>>item 3<span class="hljs-tag"><span class="hljs-title">li</span>></span>
<span class="hljs-tag"><span class="hljs-title">ul</span>></span>

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

评论1