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

11,842 Responses

  1. SamuelBix表示:

    buy cipro online canada: ciprofloxacin generic price – antibiotics cipro

  2. KennethPah表示:

    amoxicillin pharmacy price over the counter amoxicillin amoxicillin 500 mg tablets

  3. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали ремонт телефонов nothing, можете посмотреть на сайте: ремонт телефонов nothing сервис
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  4. SamuelBix表示:

    ciprofloxacin generic price: buy cipro cheap – cipro pharmacy

  5. Здесь можно купить оружейный сейф для пистолетасейф оружейный доставка

  6. DanielAbice表示:

    http://amoxstar.com/# amoxicillin 500mg capsule

  7. DanielAbice表示:

    http://clomidonpharm.com/# where buy generic clomid for sale

  8. Introducing to you the most prestigious online entertainment address today. Visit now to experience now!

  9. KennethPah表示:

    where can i buy amoxicillin without prec can you buy amoxicillin over the counter amoxicillin no prescipion

  10. iwin表示:

    Introducing to you the most prestigious online entertainment address today. Visit now to experience now!

  11. Introducing to you the most prestigious online entertainment address today. Visit now to experience now!

  12. DanielAbice表示:

    http://cipharmdelivery.com/# buy ciprofloxacin over the counter

  13. Introducing to you the most prestigious online entertainment address today. Visit now to experience now!

  14. Introducing to you the most prestigious online entertainment address today. Visit now to experience now!

  15. 匿名訪客表示:

    Introducing to you the most prestigious online entertainment address today. Visit now to experience now!

  16. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали ремонт телефонов nothing цены, можете посмотреть на сайте: ремонт телефонов nothing
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  17. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали ремонт телефонов samsung цены, можете посмотреть на сайте: ремонт телефонов samsung цены
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  18. RobertJar表示:

    prednisone 60 mg tablet: 3000mg prednisone – prednisone tablet 100 mg

  19. Introducing to you the most prestigious online entertainment address today. Visit now to experience now!

  20. Здесь можно оружейные сейфы ценакупить сейф для оружия

  21. продамус промокоды продамус промокоды .

  22. Introducing to you the most prestigious online entertainment address today. Visit now to experience now!

  23. Prodamus – промокод на подключение http://www.kryto.ukrbb.net/viewtopic.php?f=2&t=1431=43 .

  24. RobertJar表示:

    п»їcipro generic: buy cipro without rx – antibiotics cipro

  25. KennethPah表示:

    buy amoxicillin 500mg uk Amox Star amoxicillin 500mg price in canada

  26. промокод на продамус скидка подключение https://vip.rolevaya.info/viewtopic.php?id=7107#p1 .

  27. KennethPah表示:

    ciprofloxacin generic price ci pharm delivery buy cipro online canada

  28. DanielAbice表示:

    https://amoxstar.com/# amoxicillin 500 mg where to buy

發佈留言

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