Emmet是一个能大幅度提高前端开发效率的一个工具，目前市面上主流编辑器中都有集成（如 vscode,webstrom 等）。
使用Emmet插件可以方便大家快速书写代码来编写页面结构。



基本语法如下，写完后用Tab补全即可：

后代：>
nav>ul>li

[JavaScript] 纯文本查看 复制代码

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

兄弟：+
div+p+span

[JavaScript] 纯文本查看 复制代码

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

乘法：*
ul>li*5

[JavaScript] 纯文本查看 复制代码

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

分组：()
div>(header>ul>li*2>a)+footer>p

[JavaScript] 纯文本查看 复制代码

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

自增符号：$
1. ul>li.item$*5

[JavaScript] 纯文本查看 复制代码

    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
    </ul>

2. ul>li.item$$$*5

[JavaScript] 纯文本查看 复制代码

    <ul>
        <li class="item001"></li>
        <li class="item002"></li>
        <li class="item003"></li>
        <li class="item004"></li>
        <li class="item005"></li>
    </ul>

3. ul>li.item$@-*5

[JavaScript] 纯文本查看 复制代码

    <ul>
        <li class="item1@-"></li>
        <li class="item2@-"></li>
        <li class="item3@-"></li>
        <li class="item4@-"></li>
        <li class="item5@-"></li>
    </ul>

4. ul>li.item$@3*5

[JavaScript] 纯文本查看 复制代码

    <ul>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
        <li class="item6"></li>
        <li class="item7"></li>
    </ul>

ID: ##header

[JavaScript] 纯文本查看 复制代码

    <div id="header"></div>

类: .
.title

[JavaScript] 纯文本查看 复制代码

    <div class="title"></div>

ID和类：
form#search.wide

[JavaScript] 纯文本查看 复制代码

    <form id="search" class="wide"></form>

属性：[]
p[title="Hello world"]

[JavaScript] 纯文本查看 复制代码

    <p title="Hello world"></p>

文本：{}
a{Click me}

[JavaScript] 纯文本查看 复制代码

    <a href="">Click me</a>

点击查看更多精彩前端资源

点击有惊喜

6666666666666