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

  1. The Sunday comics are illustrated cartoon panels, as are comic books.

  2. DanielAbice表示:

    http://clomidonpharm.com/# buying cheap clomid no prescription

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

  4. KennethPah表示:

    where to buy cipro online CiPharmDelivery п»їcipro generic

  5. DanielAbice表示:

    https://prednibest.com/# where to buy prednisone 20mg no prescription

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

  7. DanielAbice表示:

    https://amoxstar.com/# where can i buy amoxicillin without prec

  8. The trends have changed for the nice; Immediately, the exclusive and the popular merge in on-line procuring web portals!

  9. alkozona_arMa表示:

    alkozona [url=http://www.alkozona.ru]http://www.alkozona.ru[/url] .

  10. KennethPah表示:

    where to buy amoxicillin 500mg without prescription buy amoxicillin 500mg usa amoxicillin cost australia

  11. You can be rest assured that no matter you spend, what fully essential and justified, regardless of all the trouble.

  12. And, clearly, retirement advantages converse to the quality of our jobs.

  13. Method the duties in the proper order.

  14. A member of the Wheatridge Grange.

  15. Brigadier General Ret. First woman of the Pennsylvania Army Nationwide Guard to graduate from the United States Military Struggle College.

  16. Aircraft Carriers. Naval Institute Press.

  17. RobertJar表示:

    where can i buy cipro online: ci pharm delivery – ciprofloxacin mail online

發佈留言

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