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...

11,997 Responses

  1. cake carts表示:

    Thank you so much for sharing this wonderful post with us.

  2. cake carts表示:

    The information shared is of top quality which has to get appreciated at all levels. Well done…

  3. cake carts表示:

    A great post without any doubt.

  4. super viagra表示:

    amoxil child dosage buy amoxicilin 500 dairy and amoxicillin amoxil suspension 250 mg precio

  5. cake carts表示:

    Thank you so much for sharing this wonderful post with us.

  6. Güvenilir çevrimiçi eczane. Güvenli ödeme.
    Memnuniyet garantisi. Hızlı sevkiyat. Reçetesiz trimox
    için en iyi fiyatlar.

  7. women and viagra how long is viagra effective viagra side effects on heart how to get a viagra prescription australia

  8. Lesliepisn表示:

    best online casino deposit bonuses
    real money online casino
    biggest online casino bonuses

  9. The information shared is of top quality which has to get appreciated at all levels. Well done…

  10. 匿名訪客表示:

    A great post without any doubt.

  11. Bununla birlikte, bu iki koşul şartının paylaştığı önemli bir şey var – ikisi de steroid enjeksiyonu ile
    tedavi edilebilir.

  12. Bobbiepisn表示:

    usa online casinos
    best casino site
    no deposit on line casinos

  13. viagra pill over the counter viagra walmart can you buy viagra over the counter what dosage of cialis should i take

  14. Depositphotos’tan uygun fiyatlı, yüksek kaliteli Ilaç maliyeti fotoğrafları indirin Milyonlarca stok görsel ve hızlı resim arama sunan popüler telifsiz fotoğraf sitesi.

  15. Vajinal orgazm, klitoral orgazm diye bir şey yoktur.
    Tek bir orgazm vardır ve o da klitoriste yaşanır. Vajinal orgazmdan kasıt penisin vajinaya girip çıkarken klitorisi uyarması ile olan bir şeydir zaten.
    O nedenle endişe edecek bir şey yok. Ancak unutma ki orgazm denilen olgu beyinde başlayıp beyinde
    biten bir olaydır.

  16. Michaeltop表示:

    электро рохля с подъемным механизмом
    https://samokhodnyye-elektricheskiye-telezhki.ru

  17. Pearlpisn表示:

    top us online casinos
    no deposit free bonus casino
    online casino welcome bonus

  18. buying viagra表示:

    amoxicillin reaction where to buy amoxicillin pharmacy amoxicillin for cyst amoxil suspension before reconstitution storage

  19. Nice i really enjoyed reading your blogs. Keep on posting. Thanks

  20. Geçtiğimiz günlerde Fazilet Hanım ve Kızları dizisinin bitmesiyle kariyerine ara
    veren Çağlar Ertuğrul YouTube’da konuk olduğu bir
    kanalda.

  21. stiiizy pods表示:

    A great post without any doubt.

  22. Frannipisn表示:

    online casino us
    online casino no deposit welcome bonus
    best online us casinos

  23. Thank you so much for sharing this wonderful post with us.

  24. Thank you for sharing indeed great looking !

  25. Thank you for sharing indeed great looking !

  26. Thank you for sharing indeed great looking !

發佈留言

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