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

16,104 Responses

  1. промокод на продамус [url=http://promokod-pro.ru/]http://promokod-pro.ru/[/url] .

  2. Clinterete表示:

    https://farmaprodotti.com/# Farmacie on line spedizione gratuita
    farmacia online piГ№ conveniente

  3. NathanSal表示:

    miglior sito dove acquistare viagra viagra farmacia gel per erezione in farmacia

  4. BradleyThine表示:

    farmacia online senza ricetta: Ibuprofene 600 prezzo senza ricetta – Farmacia online miglior prezzo
    farmacie online sicure

  5. Edwardopele表示:

    farmacia senza ricetta recensioni: Viagra – pillole per erezioni fortissime

  6. промокод продамус скидка промокод продамус скидка .

  7. Clinterete表示:

    https://farmaprodotti.com/# Farmacie online sicure
    Farmacie on line spedizione gratuita

  8. Stevespork表示:

    Deepika Padukone and Christy Turlington star in landmark Sabyasachi fashion show
    жесткое порно
    Camera phones at the ready, around 700 guests hailing from across India and the world expected a visual spectacle on Saturday evening — and they weren’t disappointed. A hush descended as the doors opened to the Jio World Center in Mumbai, where legendary Indian fashion designer Sabyasachi Mukherjee presented a star-studded 25th anniversary runway show for his namesake brand.

    The celebrated designer — known for his maximalist Indian style — has dressed some of the biggest names across Bollywood and Hollywood, including Priyanka Chopra, Deepika Padukone, Oprah Winfrey, Rihanna and Jennifer Lopez. For his landmark show, the stars showed up to lend their support: Padukone opened proceedings in an all-white ensemble adorned with necklaces, including a crucifix from Mukherjee’s jewelry line. She later walked again with supermodel Christy Turlington as part of the grand finale.
    Over 150 looks were presented, including pants and skirts embroidered with gold threads, frilled head gear, stacked jewelry and tops with slogans such as “cat lady,” “table for one,” “where has love gone,” and “all dressed up nowhere to go.” Mukherjee explained in a phone interview that these pieces were intended to be satire on how technology is dehumanizing humans. “We seem to have forgotten how to establish human relationships,” he said.
    There were also trench coats, sweaters, shorts and shirts made in more conventionally western silhouettes. These marked a departure from Mukherjee’s usual festive and bridal wear, which are heavily inclined towards traditional Indian styles, such as saris, ghagra cholis and sherwanis.

    But with no shortage of drama, the new collection featured heavily embroidered jackets embellished with semi-precious stones, brocade dresses, ostrich leather jackets and skirts, and blouses with velvet appliques overlaid with faux fur.

  9. BradleyThine表示:

    viagra originale recensioni: Farma Sild Italy – viagra originale in 24 ore contrassegno
    farmacia online

  10. Секреты успешной покупки входной металлической двери, соответствует всем требованиям безопасности.
    Где купить надежную входную металлическую дверь по выгодной цене.
    дверь металлическая заказать двери входные металлические .

    Как не ошибиться с выбором входной металлической двери.
    Почему стоит выбрать металлическую входную дверь.
    Сравнение входных металлических дверей различных брендов.

  11. MichaelUsaws表示:

    https://farmatadalitaly.com/# Farmacia online miglior prezzo
    farmacia online piГ№ conveniente

  12. Edwardopele表示:

    viagra prezzo farmacia 2023: FarmaSildItaly – pillole per erezione in farmacia senza ricetta

  13. MichaelUsaws表示:

    https://farmatadalitaly.shop/# Farmacia online piГ№ conveniente
    comprare farmaci online con ricetta

  14. NathanSal表示:

    farmacia online piГ№ conveniente Cialis generico prezzo farmacie online sicure

  15. Clinterete表示:

    https://farmaprodotti.com/# comprare farmaci online con ricetta
    acquisto farmaci con ricetta

  16. MichaelUsaws表示:

    https://farmatadalitaly.com/# top farmacia online
    farmacie online affidabili

  17. You really should let go of VHS.

  18. BradleyThine表示:

    comprare farmaci online all’estero: Farmacia online piГ№ conveniente – farmacie online autorizzate elenco
    Farmacia online piГ№ conveniente

  19. Edwardopele表示:

    Farmacia online piГ№ conveniente: FarmTadalItaly – Farmacie online sicure

  20. MichaelUsaws表示:

    https://farmaprodotti.shop/# farmaci senza ricetta elenco
    farmacie online autorizzate elenco

  21. Have fun with these articles — and ponder what they say.

  22. MichaelUsaws表示:

    https://farmatadalitaly.com/# farmacia online
    acquisto farmaci con ricetta

  23. Clinterete表示:

    https://farmatadalitaly.shop/# Farmacia online piГ№ conveniente
    Farmacie on line spedizione gratuita

  24. BradleyThine表示:

    comprare farmaci online con ricetta: BRUFEN 600 acquisto online – Farmacia online miglior prezzo
    Farmacia online piГ№ conveniente

發佈留言

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