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

1,606 Responses

  1. Rbqepv表示:

    buy generic methylprednisolone – order fml-forte online cheap order astelin online cheap

  2. OLaneevige表示:

    Привет всем!
    Получите российский диплом по доступной цене с гарантией прохождения проверок и доставкой в любой город РФ без предоплаты.
    аттестат купить окончание
    Купите диплом ВУЗа по выгодной цене с гарантией качества и доставкой в любой город России без предоплаты!
    Получите документ ВУЗа без предоплаты и доставку в руки по России – просто, удобно, безопасно!

  3. Throughout the great pattern of things you get an A+ for effort and hard work. Where you misplaced me ended up being in all the specifics. You know, people say, details make or break the argument.. And it could not be much more true here. Having said that, allow me tell you exactly what did work. Your authoring is highly persuasive and this is most likely the reason why I am making an effort to opine. I do not make it a regular habit of doing that. Second, whilst I can certainly notice a jumps in logic you come up with, I am not really convinced of just how you seem to unite the ideas which produce your final result. For now I shall subscribe to your position however trust in the future you connect the facts better.

  4. Отличный сайт! Всем рекомендую! заверение электронной переписки

  5. Xzkqix表示:

    buy ventolin 2mg online cheap – how to buy advair diskus buy theo-24 Cr 400mg

  6. Отличный сайт! Всем рекомендую! выезд нотариуса на дом

  7. Okpcqz表示:

    cost ivermectin – buy levaquin sale order cefaclor 250mg online cheap

  8. Отличный сайт! Всем рекомендую, качественный и быстрый ремонт техники! ремонт айфонов

  9. Flujxi表示:

    generic cleocin 300mg – oral cleocin buy generic chloromycetin over the counter

  10. Отличный сайт! Всем рекомендую, качественный и быстрый ремонт техники! ремонт iphone спб

  11. What Is Puravive? Puravive is a weight loss supplement that works to treat obesity by speeding up metabolism and fat-burning naturally.

  12. Boostaro表示:

    That is very interesting, You’re an excessively skilled blogger. I’ve joined your rss feed and look forward to seeking more of your great post. Additionally, I have shared your web site in my social networks!

發佈留言

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