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

  1. WillieRap表示:

    Cheapest online pharmacy: mail order prescription drugs from canada – Cheapest online pharmacy

  2. эскорт девушки [url=http://t.me/escort_moscow_pro/]эскорт девушки[/url] .

  3. Charleskepsy表示:

    pharmacy discount coupons https://megaindiapharm.com/# MegaIndiaPharm

  4. WillieRap表示:

    Mega India Pharm: п»їlegitimate online pharmacies india – MegaIndiaPharm

  5. MichaelGeony表示:

    canadian pharmacy no prescription needed https://discountdrugmart.pro/# drug mart

  6. Great items from you, man. I have understand your stuff prior to and you’re just too excellent. I really like what you have bought here, certainly like what you’re stating and the best way by which you assert it. You make it enjoyable and you still care for to stay it smart. I cant wait to learn much more from you. This is really a tremendous website.

  7. Williamlig表示:

    These apes can tell when humans don’t know something, study finds
    пидар
    Some great apes realize when a human partner doesn’t know something and are capable of communicating information to them to change their behavior, a new study shows.

    Researchers from Johns Hopkins University studying bonobos found that they would point to where treats were hidden if they could see their human partner didn’t know where they were, according to a statement from the university, published Monday.

    Working with three male bonobos, study co-author Luke Townrow, a Johns Hopkins PhD student, would sit across a table from one of the animals as another person placed a treat under one of three cups.
    In some cases, Townrow would be allowed to see which cup the treat was under, and the bonobo would wait for him to pass it the food.

    At other times, he would not be able to see where the treat was, and the bonobo would point to the right cup to help him find the food.

    The “seemingly simple experiment that demonstrated for the first time that apes will communicate unknown information in the name of teamwork,” the statement reads.

    And study co-author Chris Krupenye, a Johns Hopkins assistant professor of psychological and brain sciences, told CNN that the study “is one of the clearest pieces of evidence that a non-human primate understands when someone else is ignorant.”

    This ability to intuit gaps in others’ knowledge is known as theory of mind.

    “As humans we have theory of mind, the ability to think about others’ perspectives,” Krupenye told CNN on Tuesday.

  8. Porterfax表示:

    discount drug pharmacy drug mart rx pharmacy no prescription

  9. Charleskepsy表示:

    canadian pharmacy world coupon code https://xxlmexicanpharm.com/# xxl mexican pharm

  10. MichaelGeony表示:

    online pharmacy no prescription https://discountdrugmart.pro/# discount drug pharmacy

  11. MichaelGeony表示:

    non prescription medicine pharmacy https://xxlmexicanpharm.com/# xxl mexican pharm

  12. Porterfax表示:

    easy canadian pharm canadianpharmacy com easy canadian pharm

  13. Charleskepsy表示:

    foreign pharmacy no prescription https://megaindiapharm.shop/# buy medicines online in india

  14. WillieRap表示:

    xxl mexican pharm: mexico pharmacies prescription drugs – best online pharmacies in mexico

  15. The heart of your writing while appearing reasonable originally, did not work well with me after some time. Somewhere within the paragraphs you actually were able to make me a believer but just for a while. I nevertheless have got a problem with your jumps in logic and you would do well to help fill in those gaps. In the event you can accomplish that, I could undoubtedly end up being impressed.

  16. Davidmoits表示:

    easy canadian pharm: easy canadian pharm – easy canadian pharm

  17. MichaelGeony表示:

    uk pharmacy no prescription https://familypharmacy.company/# Online pharmacy USA

  18. WillieRap表示:

    xxl mexican pharm: п»їbest mexican online pharmacies – purple pharmacy mexico price list

  19. Porterfax表示:

    easy canadian pharm canada pharmacy world canada pharmacy world

發佈留言

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