Emmet插件是一款能够大幅度提升网页前端开发效率的插件,能通过简单的语法快速生成一个标签结构

现在很多的文本编辑器都支持了Emmet插件了,像Zend,Sublime等都支持

本人用Sublime Text 3,在package control中就能安装Emmet插件了


下面来简单笔记几种常见的用法


快速生成一个3行4列的table表格结构

table>tr*3>td*4

输入完之后按tab键即可生成代码

    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>


快速生成一个h1标题

h1{hello}

按tab键即可生成html代码

<h1>hello</h1>


快速生成一个超链接

a[href="me.mo-cloud.net"]{链接到本站}

按tab键生成html代码

<a href="me.mo-cloud.net">链接到本站</a>


生成一个无序列表,套用编号过的class属性

ul>li.item${haha $$}*9

按tab键生成html代码

    <ul>
        <li class="item1">haha 01</li>
        <li class="item2">haha 02</li>
        <li class="item3">haha 03</li>
        <li class="item4">haha 04</li>
        <li class="item5">haha 05</li>
        <li class="item6">haha 06</li>
        <li class="item7">haha 07</li>
        <li class="item8">haha 08</li>
        <li class="item9">haha 09</li>
    </ul>



生成两个并列的下拉列表,使用稍微复杂的组合属性

(select>.wrap>h1>p>a)+(select>.huh>p+p)

按tab键生成代码

    <select name="" id="">
        <option class="wrap">
            <h1>
                <p><a href=""></a></p>
            </h1>
        </option>
    </select><select name="" id="">
        <option class="huh">
            <p></p>
            <p></p>
        </option>
    </select>