Emmet 介紹 – 縮寫篇

縮寫這樣的編輯方式是Emmet的核心功能,可以在輸入簡短的代碼後轉換成結構複雜的HTML,而且使用方式跟使用CSS的選取器雷同,所以非常易於使用。例如:

page>div.logo+ul#navigation>li*5>a{Item $}
------

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

以下分別介紹各種不同的縮寫撰寫模式

子結構:>

div>ul>li
------

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

同層結構:+

div+p+bq
------

<div></div>
<p></p>
<blockquote></blockquote>

上一層:^

div+div>p>span+em^bq
------

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
div+div>p>span+em^^^bq
------

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

乘法:*

ul>li*5
------

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

分組:( )

div>(header>ul>li*2>a)+footer>p
------

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
(div>dl>(dt+dd)*3)+footer>p
------

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

項目編號:$

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

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
ul>li.item$$*5
------

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>
ul>li.item$@-*5
------

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>
ul>li.item$@3*5
------

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>
ul>li.item$@-3*5
------

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

內容:{ }

a{Click me}
------

<a href="">Click me</a>
p>{Click }+a{here}+{ to continue}
------

<p>Click <a href="">here</a> to continue</p>

ID and Class

div#header+div.page+div#footer.class1.class2.class3
------

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

自訂屬性

td[title="Hello world!" colspan=3]
------

<td title="Hello world!" colspan="3"></td>

You may also like...

19,493 Responses

  1. DavidCooth表示:

    https://garuda888.top/# Banyak kasino menawarkan permainan langsung yang seru

  2. Williecrady表示:

    Slot dengan tema budaya lokal menarik perhatian http://preman69.tech/# Slot dengan pembayaran tinggi selalu diminati

  3. JamesLok表示:

    Slot klasik tetap menjadi favorit banyak orang https://preman69.tech/# Pemain bisa menikmati slot dari kenyamanan rumah

  4. DavidCooth表示:

    http://garuda888.top/# Kasino di Jakarta memiliki berbagai pilihan permainan

  5. Ismaelfer表示:

    Hello! Do you know if they make any plugins to assist with Search Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good results. If you know of any please share. Thank you!
    https://t.me/promokod_samokat_dostavka

  6. Aaronbus表示:

    garuda888.top garuda888 Jackpot besar bisa mengubah hidup seseorang

  7. JamesLok表示:

    Kasino memastikan keamanan para pemain dengan baik http://preman69.tech/# Jackpot progresif menarik banyak pemain

  8. Aaronbus表示:

    garuda888 slot garuda888 slot Mesin slot digital semakin banyak diminati

  9. JamesLok表示:

    Slot menawarkan berbagai jenis permainan bonus http://garuda888.top/# Pemain sering mencoba berbagai jenis slot

  10. ThomasThype表示:

    Jackpot progresif menarik banyak pemain: slot88 – slot88

  11. Williecrady表示:

    Slot dengan pembayaran tinggi selalu diminati http://bonaslot.site/# Banyak pemain mencari mesin dengan RTP tinggi

  12. DavidCooth表示:

    https://slot88.company/# Slot dengan pembayaran tinggi selalu diminati

  13. CarlosCof表示:

    Inverti en el token UTLH y en el primer mes ya obtuve ingresos estables. El staking realmente es rentable, y el precio del token sigue subiendo. ?Creo en el exito futuro de este proyecto!

  14. LOL hacks表示:

    Hey There. I found your blog using msn. This is an extremelywell written article. I’ll make sure to bookmark it and return to read more of your useful information. Thanks for the post.I’ll certainly comeback.

  15. Aaronbus表示:

    preman69 slot preman69 slot Slot modern memiliki grafik yang mengesankan

  16. DavidCooth表示:

    https://preman69.tech/# Pemain sering berbagi tips untuk menang

  17. Williecrady表示:

    Jackpot besar bisa mengubah hidup seseorang http://garuda888.top/# Kasino di Indonesia menyediakan hiburan yang beragam

  18. Williecrady表示:

    Slot klasik tetap menjadi favorit banyak orang https://slot88.company/# Slot menjadi bagian penting dari industri kasino

  19. DavidCooth表示:

    http://preman69.tech/# Kasino menyediakan layanan pelanggan yang baik

  20. JamesLok表示:

    Pemain harus menetapkan batas saat bermain https://bonaslot.site/# Pemain sering berbagi tips untuk menang

  21. Greetings! Very useful advice within this article! It’s the little changes that will make the most important changes. Many thanks for sharing!

  22. JamesLok表示:

    Banyak kasino memiliki program loyalitas untuk pemain https://bonaslot.site/# Pemain sering berbagi tips untuk menang

  23. Williecrady表示:

    Keseruan bermain slot selalu menggoda para pemain https://preman69.tech/# Kasino mendukung permainan bertanggung jawab

  24. JamesLok表示:

    Kasino selalu memperbarui mesin slotnya http://slot88.company/# Slot dengan bonus putaran gratis sangat populer

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。