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

14,340 Responses

  1. Charlesbot表示:

    https://fastpillsformen.com/# buy Viagra over the counter

  2. Donaldabula表示:

    Generic Viagra online FastPillsForMen.com Cheapest Sildenafil online

  3. Charlesbot表示:

    http://fastpillseasy.com/# ed rx online

  4. вывод из запоя на дому ростов цены вывод из запоя на дому ростов цены .

  5. Even with an alarm, workers may open doorways or home windows from the inside in preparation for a later break-in.

  6. The general public flocked to Jeep sellers to see the new Wagoneer.

  7. gtbike.ru [url=http://www.www.ruffnews.ru/elektronnye-turnikety-perco-na-stroitelnyh-obektah-pochemu-eto-vygodno]http://www.www.ruffnews.ru/elektronnye-turnikety-perco-na-stroitelnyh-obektah-pochemu-eto-vygodno[/url] .

  8. Carmineawarl表示:

    [url=https://2bsgate.sbs/]bs2site at ссылка blacksprut[/url]

  9. In real estate, crowd funding enables capital growth opportunities and value-add opportunities in terms of strategic investments.

  10. Charlesbot表示:

    https://fastpillsformen.com/# Cheapest Sildenafil online

  11. Barrybib表示:

    Generic Cialis price: Max Pills For Men – Generic Cialis without a doctor prescription

  12. BrettTIT表示:

    Buy generic 100mg Viagra online: FastPillsForMen – Cheap generic Viagra online

  13. It lost much of the smoky and streaked look which had given charm to the early Gothic glass.

  14. Barrybib表示:

    Generic Cialis price: Max Pills For Men – Generic Tadalafil 20mg price

  15. Donaldabula表示:

    edmeds fast pills easy buy erectile dysfunction pills online

  16. BrettTIT表示:

    Generic Cialis price: Generic Cialis without a doctor prescription – Generic Cialis without a doctor prescription

  17. Lacy, Sarah (July 13, 2011).

  18. Plan your visit immediately and bask in one of the best dining experiences the town has to supply!

  19. Federal Work-Examine: The federal work-study program helps college students earn cash for his or her training by working part-time jobs.

  20. Clarifying rules is not the only thing that this custodian offers its clients but he or she also present ideas for the investment as well as offers investment products.

發佈留言

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