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

  1. WalterCherm表示:

    Hassle-free prescription transfers every time.
    https://gabapentinpharm24.top/
    Get information now.

  2. Jasonzitte表示:

    Their digital prescription service is innovative and efficient.
    lisinopril generic brand
    The gold standard for international pharmaceutical services.

  3. Jasonzitte表示:

    The staff ensures a seamless experience every time.
    can you buy generic lisinopril tablets
    Get warning information here.

  4. WalterCherm表示:

    Get warning information here.
    https://cipropharm24.top/
    I’m impressed with their commitment to customer care.

  5. Jasonzitte表示:

    A one-stop-shop for all my health needs.
    how to buy generic cytotec prices
    Best and news about drug.

  6. Victorprima表示:

    Get here.
    where can i get cytotec pills in south africa
    Their global health initiatives are game-changers.

  7. WalterCherm表示:

    Their pet medication section is comprehensive.
    https://cipropharm24.top/
    Always leaving this place satisfied.

  8. Its such as you read my mind! You appear to grasp so much about this, like you wrote the book in it or something. I feel that you can do with some to force the message home a bit, however other than that, this is fantastic blog. A fantastic read. I will certainly be back.

  9. WalterCherm表示:

    Their worldwide outreach programs are commendable.
    https://cipropharm24.top/
    Hassle-free prescription transfers every time.

  10. Jasonzitte表示:

    An unmatched titan in the world of international pharmacies.
    can i purchase generic lisinopril online
    A model pharmacy in terms of service and care.

  11. Jasonzitte表示:

    п»їExceptional service every time!
    buying cheap lisinopril pills
    A global name with a reputation for excellence.

  12. Jasonzitte表示:

    Top 100 Searched Drugs.
    does gabapentin cause kidney problems
    Consistently excellent, year after year.

  13. WalterCherm表示:

    A beacon of international trust and reliability.
    https://clomidpharm24.top/
    Always responsive, regardless of time zones.

  14. Victorprima表示:

    They always have the newest products on the market.
    drug prices lisinopril
    Their global perspective enriches local patient care.

  15. WalterCherm表示:

    I value their commitment to customer health.
    https://cytotecpharm24.top/
    Their global network ensures the best medication prices.

  16. WalterCherm表示:

    They have a fantastic range of supplements.
    https://gabapentinpharm24.top/
    A gem in our community.

  17. Jasonzitte表示:

    They bridge global healthcare gaps seamlessly.
    how to get generic clomid online
    Leading the way in global pharmaceutical services.

  18. Jasonzitte表示:

    Commonly Used Drugs Charts.
    generic for prinivil
    Always responsive, regardless of time zones.

  19. Hiya, I am really glad I have found this info. Today bloggers publish only about gossips and internet and this is really frustrating. A good blog with interesting content, that is what I need. Thank you for keeping this web-site, I will be visiting it. Do you do newsletters? Cant find it.

  20. Jasonzitte表示:

    Love their range of over-the-counter products.
    can i buy cheap cytotec online
    They always have valuable advice on medication management.

  21. WalterCherm表示:

    Breaking down borders with every prescription.
    https://cytotecpharm24.top/
    Their global health initiatives are game-changers.

  22. Victorprima表示:

    Everything about medicine.
    can i get generic clomid pills
    Their online portal is user-friendly and intuitive.

  23. WalterCherm表示:

    A modern pharmacy with a traditional touch of care.
    https://clomidpharm24.top/
    The widest range of international brands under one roof.

  24. kovry_bgEi表示:

    Элегантные ковры для любого интерьера, декор.
    Мягкие и комфортные ковры, по акции.
    Ковры для стильного интерьера, открывайте.
    Декорируйте пространство с помощью ковров, придайте.
    Ковры для детей, цвет.
    Ковры в восточном стиле, высокое качество.
    Эстетика ковров в офисе, придайте.
    Ковры, которые легко чистить, исследуйте.
    Советы по выбору ковра, тайны.
    Защита от холода с помощью ковров, откройте.
    Модные ковры 2025 года, декор.
    Ковры для загородного дома, уникальные стили.
    Идеи по использованию ковров, креативность.
    Выбор ковров для любого вкуса, погрузитесь в.
    Комфортные ковры для вашего сна, найдите.
    Ковры от известных брендов, инвестируйте.
    Ковры для любителей животных, удобные.
    Ковры, которые сохраняют тепло, вдохновение.
    Разделение пространства с помощью ковров, дизайнерские решения.
    лучшие ковры https://kovry-v-moskve.ru/ .

  25. WalterCherm表示:

    They have strong partnerships with pharmacies around the world.
    https://cipropharm24.top/
    Their team understands the nuances of global healthcare.

  26. Jasonzitte表示:

    Always up-to-date with the latest healthcare trends.
    get cheap cipro prices
    Medscape Drugs & Diseases.

發佈留言

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