总结了一些常用的Emmet语法，方便更便捷的撸代码。

一、结构生成
1.子元素
比如说我们需要下面这样的一段代码

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

我们可以通过以下emmet语法快速生成

div>p>span

2.兄弟元素
比如说我们需要下面这样的一段代码

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

我们可以通过以下emmet语法快速生成

div>p+span

3.父元素
比如说我们需要下面这样的一段代码

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

我们可以通过以下emmet语法快速生成

div>p>span+em^span

4.多个相同元素
比如说我们需要下面这样的一段代码

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

我们可以通过以下emmet语法快速生成

div>p>span*3

5.一组元素
比如说我们需要下面这样的一段代码

<div>
    <header>
        <p></p>
        <span></span>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

我们可以通过以下emmet语法快速生成

div>(header>p+span)+footer>p

二、设置属性
1.设置id
比如说我们需要下面这样的一段代码

<div id="div1"></div>

我们可以通过以下emmet语法快速生成

div#div1

2.设置class
比如说我们需要下面这样的一段代码

<div class="div1"></div>

我们可以通过以下emmet语法快速生成

div.div1

3.设置其他属性
比如说我们需要下面这样的一段代码

<div title="xxx" width="10"></div>

我们可以通过以下emmet语法快速生成

div[title="xxx" width=10]

4.设置带序号的属性(默认起始值)
比如说我们需要下面这样的一段代码

<div>
    <span class="span1"></span>
    <span class="span2"></span>
    <span class="span3"></span>
</div>

我们可以通过以下emmet语法快速生成

div>span.span$*3

5.设置带序号的属性(自定义起始值)
比如说我们需要下面这样的一段代码

<div>
    <span class="span3"></span>
    <span class="span4"></span>
    <span class="span5"></span>
</div>

我们可以通过以下emmet语法快速生成

div>span.span$@3*3

三、设置内容
1.设置元素内容
比如说我们需要下面这样的一段代码

<a href="">点击登录</a>

我们可以通过以下emmet语法快速生成

a{点击登录}

标签: 暂无标签