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

  1. Agtjqp表示:

    buy lasix online diuretic lasix pill

  2. Mthnot表示:

    buy azithromycin pill purchase azithromycin generic azithromycin 500mg without prescription

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

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

  5. Great site! I recommend to everyone!World Innovation Ranking 2024

  6. Ykuxac表示:

    azithromycin cost buy zithromax pills for sale buy azithromycin 500mg pills

  7. Thanks for sharing excellent informations. Your website is very cool. I am impressed by the details that you’ve on this website. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for more articles. You, my friend, ROCK! I found just the information I already searched everywhere and just couldn’t come across. What a perfect web-site.

  8. Geuurt表示:

    purchase amoxil without prescription cost amoxil 1000mg buy generic amoxicillin over the counter

  9. StomSDferdbiz表示:

    Great site, I recommend it to everyone!World Innovation Ranking 2024

  10. TheDsgeerdbiz表示:

    Great site, I recommend it to everyone!World’s Innovative Network

  11. Lzlwia表示:

    brand accutane 40mg accutane 20mg without prescription generic isotretinoin 20mg

  12. Arebaf表示:

    best tablet for acidity relief lincocin 500 mg generic

  13. EwrtyhtZbiz表示:

    Отличный сайт! Всем рекомендую!чемпионы Европы по футболу

  14. SetyvcctZbiz表示:

    Отличный сайт! Всем рекомендую!трансферы футбола 2024

  15. DhyedcctZbiz表示:

    Отличный сайт! Всем рекомендую!фрибеты без депозита 2024

  16. Dhexli表示:

    strongest prescription allergy medication purchase theophylline generic prescription vs over the counter

  17. great site! I recommend to everyone!todo para los hombres

  18. Isyauh表示:

    salicylic acid versus benzoyl peroxide benoquin price acne pills that actually work

  19. great site! I recommend to everyone!revista para hombres

  20. great site! I recommend to everyone!moda masculina

  21. Пожалуй, это лучшее БК 1Win. Всем советую!

  22. Mgxjvo表示:

    best non drowsy nausea medicine buy cefadroxil pill

  23. Здесь вы найдёте официальный сайт 1Win.

  24. Lubsjw表示:

    buy deltasone 20mg for sale buy generic prednisone 10mg

  25. Ibdlnm表示:

    7 day sleep prescription buy meloset pills

  26. Здесь самая качественная порошковая краска алматы. Всем рекомендую!

  27. Здесь можно качественную порошковая краска купить. Рекомендую!

  28. It’s very good Qemtex Powder Coatings. I recommend!

發佈留言

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