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,074 Responses

  1. Amnjoc表示:

    order zithromax generic zithromax 250mg us zithromax 250mg price

  2. SLewisslund表示:

    Useful stuff Many thanks
    купить диплом Вуза
    ###GOOGLE###

  3. Tgstdq表示:

    buy augmentin 625mg generic clavulanate pill clavulanate without prescription

  4. Bwotxi表示:

    amoxil 1000mg without prescription order amoxil 250mg pill order amoxil 1000mg without prescription

  5. Buauve表示:

    buy albuterol generic albuterol 4mg sale ventolin 4mg over the counter

  6. Lhaneevige表示:

    Leading the way in the heavy construction equipment sector,Zircon Used Equipment LLC User Ratings we have over eight years of expertise, dedicated to delivering unmatched solutions. We take pride in curating an extensive inventory that includes premium machinery like loaders, diggers, bulldozers, lift trucks, and more, ensuring a diverse selection to cater to various preferences and budgets.

    What makes us stand out is our unwavering commitment to exceptional services and nurturing long-lasting partnerships. Beyond selling equipment, we go the extra mile by offering efficient delivery services, utilizing our proprietary resources for fast and reliable transportation of heavy machinery. This allows us to offer competitive delivery pricing, augmenting the overall value we bring to the table.

    Our main goal is to provide a comprehensive range of high-quality services, establishing ourselves as the trusted partner for our clients. With a focus on surpassing expectations and building enduring relationships, we aim to be the go-to choice for all heavy equipment needs.

    In Zircon Used Equipment LLC, we seamlessly combine industry expertise, dependable equipment, and exceptional customer support to meet the diverse requirements of our clients. Connect with us today to witness firsthand our commitment to quality and dedication.

    We have garnered an extensive collection of positive reviews from our satisfied clientele, affirming our position as a reliable player in the heavy construction equipment industry. This is just a small part. You can discover more on the vast expanses of the internet.

  7. EarnestAvada表示:

    Tadalafilo 20 Mg Precio Farmacia ^_^
    (Admin)
    Cialis 5 mg prezzo cialis 5 mg prezzo tadalafil 5 mg prezzo

  8. Mtoigt表示:

    isotretinoin online order accutane without prescription accutane 40mg brand

  9. Всем рекомендую!Помощь МТИ

  10. Sbisin表示:

    semaglutide 14mg over the counter order generic semaglutide 14mg how to get rybelsus without a prescription

  11. Всем рекомендую!Тесты МТИ

  12. Kjqvvs表示:

    prednisone sale prednisone 10mg without prescription prednisone where to buy

  13. Best in Dubai, flipping houses. Recommend!

  14. Clenil表示:

    buy rybelsus pill semaglutide 14 mg pill buy rybelsus 14 mg for sale

  15. Ndkukk表示:

    buy tizanidine 2mg generic order tizanidine 2mg online buy generic tizanidine over the counter

  16. Gehkze表示:

    clomiphene 100mg over the counter serophene ca order clomid pills

  17. Mvarwb表示:

    levothroid brand levothyroxine sale order levothyroxine pill

  18. First coastline with a private beach coastal heaven gaziveren.

  19. Mvokbf表示:

    buy augmentin generic buy amoxiclav generic

  20. Yazpbo表示:

    ventolin price albuterol 2mg without prescription albuterol brand

  21. Nayiqk表示:

    buy amoxicillin without prescription where can i buy amoxicillin buy amoxicillin 250mg pill

  22. Ijujej表示:

    prednisone 5mg over the counter order prednisone 5mg for sale

  23. Nmnsya表示:

    cheap omnacortil pills omnacortil where to buy omnacortil 5mg brand

  24. Отличный сайт! Всем рекомендую! Только тут Вы можете приобрестичехол книжка для телефона

發佈留言

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