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

12,048 Responses

  1. Laureenpisn表示:

    best casino sites
    win real money online casino
    real online casino

  2. krt carts表示:

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

  3. Thank you for sharing indeed great looking !

  4. Dixiepisn表示:

    cherry jackpot casino
    free money no deposit
    mobile casino real money

  5. nolvadex us表示:

    levothyroxine recall 2019 synthroid 50 mg took two synthroid by mistake how to take synthroid and omeprazole

  6. Bu temel yaklaşım ile Medipol Üniversitesi Eczacılık ve Tıp Fakülteleri akademik bilgi ve tecrübelerini, Türkiye’nin sağlık alanında önde gelen Medipol hastaneler kompleksleri ile birleştirerek Sağlık
    Bilimleri Enstitüsü altında, aşağıda detayları verilen Klinik Eczacılık Doktora programlarını,
    alanda uluslararası.

  7. Verenapisn表示:

    no deposit online casino real money
    online casinos free money
    mobile slots

  8. Hestiapisn表示:

    dissertation writing plan
    dissertation writing service
    all but dissertation

  9. guns for sale表示:

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

  10. Shaylapisn表示:

    free welcome bonus
    free bonus no deposit
    casino online real money

  11. Audrepisn表示:

    doctoral dissertation help usa
    tips on writing a dissertation
    dissertation only phd

  12. doxycycline dreams doxycycline capsules 100mg price what is the medicine doxycycline used for how much doxycycline for acne

  13. guns for sale表示:

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

  14. JesseNal表示:

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

  15. Herminapisn表示:

    format for writing dissertation proposals
    dissertation writing tips
    tips for writing a dissertation

  16. Abagaelpisn表示:

    best online casino bonus
    super slots casino
    online gambling real money

  17. Jenneepisn表示:

    creative writing course in mumbai
    help with dissertation
    writing acknowledgement dissertation

  18. Tandipisn表示:

    online casinos free money
    casino welcome bonus
    free casinos bonus

  19. taking nolvadex nolvadex 20mg us nolvadex or arimidex for gyno how does nolvadex make you feel on pct

  20. molnupiravir covid merck pill for covid is molnupiravir a monoclonal antibody molnupiravir cost

  1. 2022-07-26
  2. 2022-07-26

    casino online sin deposito https://cybertimeonlinecasino.com/

  3. 2022-07-27

    free online casino no deposit https://1freeslotscasino.com/

  4. 2022-07-27

    aladdin online casino https://vrgamescasino.com/

  5. 2022-07-27

    nj online casino borgata https://casino-online-roulette.com/

  6. 2022-07-27
  7. 2022-07-27

    blackjack online casino https://all-online-casino-games.com/

  8. 2022-07-27

    gta online casino heist payout https://casino8online.com/

發佈留言

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