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

  1. WillieRap表示:

    buying from online mexican pharmacy: mexican border pharmacies shipping to usa – mexican online pharmacies prescription drugs

  2. MichaelGeony表示:

    cheapest pharmacy for prescriptions https://megaindiapharm.shop/# reputable indian pharmacies

  3. WillieRap表示:

    discount drug pharmacy: discount drugs – drug mart

  4. Davidmoits表示:

    india online pharmacy: india online pharmacy – MegaIndiaPharm

  5. WillieRap表示:

    northwest canadian pharmacy: best canadian online pharmacy – easy canadian pharm

  6. Charleskepsy表示:

    legit non prescription pharmacies https://easycanadianpharm.shop/# easy canadian pharm

  7. 印傳單表示:

    There is definately a lot to know about this issue.I like all the points you have made.My blog … engage.drd4gaming.com

  8. MichaelGeony表示:

    cheapest pharmacy for prescriptions without insurance http://familypharmacy.company/# family pharmacy

  9. DouglasAssow表示:

    A brief history of sunglasses, from Ancient Rome to Hollywood
    кракен вход

    Sunglasses, or dark glasses, have always guarded against strong sunlight, but is there more to “shades” than we think?

    The pupils of our eyes are delicate and react immediately to strong lights. Protecting them against light — even the brilliance reflected off snow — is important for everyone. Himalayan mountaineers wear goggles for this exact purpose.

    Protection is partly the function of sunglasses. But dark or colored lens glasses have become fashion accessories and personal signature items. Think of the vast and famous collector of sunglasses Elton John, with his pink lensed heart-shaped extravaganzas and many others.

    When did this interest in protecting the eyes begin, and at what point did dark glasses become a social statement as well as physical protection?
    The Roman Emperor Nero is reported as holding polished gemstones to his eyes for sun protection as he watched fighting gladiators.

    We know Canadian far north Copper Inuit and Alaskan Yupik wore snow goggles of many kinds made of antlers or whalebone and with tiny horizontal slits. Wearers looked through these and they were protected against the snow’s brilliant light when hunting. At the same time the very narrow eye holes helped them to focus on their prey.

    In 12th-century China, judges wore sunglasses with smoked quartz lenses to hide their facial expressions — perhaps to retain their dignity or not convey emotions.

  10. Charleskepsy表示:

    canadian pharmacy coupon code http://familypharmacy.company/# online pharmacy delivery usa

  11. When I originally commented I clicked the -Notify me when new comments are added- checkbox and now each time a comment is added I get 4 emails with the same comment. Is there any manner you may remove me from that service? Thanks!

  12. From start to finish, this blog post had us hooked. The content was insightful, entertaining, and had us feeling grateful for all the amazing resources out there. Keep up the great work!

  13. MichaelGeony表示:

    cheapest pharmacy for prescriptions without insurance http://discountdrugmart.pro/# discount drugs

  14. Charleskepsy表示:

    buying prescription drugs from canada http://xxlmexicanpharm.com/# medicine in mexico pharmacies

  15. MichaelGeony表示:

    online canadian pharmacy coupon https://easycanadianpharm.shop/# easy canadian pharm

  16. WillieRap表示:

    online pharmacy delivery usa: canadian online pharmacy no prescription – family pharmacy

  17. MichaelGeony表示:

    mail order prescription drugs from canada https://xxlmexicanpharm.com/# xxl mexican pharm

  18. WillieRap表示:

    xxl mexican pharm: xxl mexican pharm – xxl mexican pharm

  19. Davidmoits表示:

    canadian pharmacy in canada: canada drugs – pharmacy rx world canada

發佈留言

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