emmet 基本使用方法

時間 2019-12-07

標籤 emmet 基本使用方法简体版

原文原文鏈接

官網：http://docs.emmet.io/html

返回上級：^spa

輸入： div+div>p>span+em code

輸出：htm

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

添加多個類blog

輸入： div.a1.a2.a3 get

輸出： <div class="a1 a2 a3"></div> it

自定義屬性：[]io

輸入： td[title="Hello world!" colspan=3] table

輸出： <td title="Hello world!" colspan="3"></td> class

計數：$

用來計數重複元素

經過使用@n來改變計數的起始數據

在$後添加@- 是數據遞減

demo1

demo2

demo3

demo4

輸入

ul>li.item$*3

ul>li.item$$$*3

ul>li.item$@3*3

ul>li.item$@-*3

輸出

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

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

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

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

插入文字：{}

輸入： a{Click me}

輸出： <a href="">Click me</a>

emmet沒法使用的解決方法

在文件裏輸入html：xt，而後ctrl+e，回車。就出來了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。