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

  1. XsaYnndLiZgt表示:

    Тут можно узнать PURE ICE FRESH MINT безопасно и по выгодному курсу!

  2. XsaYzhdLiZgt表示:

    This site all known killa snus very good and trust!

  3. FrancisSmeds表示:

    https://datingtopreview.com/# christian singles dating site

  4. FrancisSmeds表示:

    https://datingtopreview.com/# date online personal

  5. XsaYzrvLiZgt表示:

    This site all known KILLA FLASH 4mg very good and trust!

  6. BmOjDeLiZgt表示:

    Отличный хирург! сойфер владимир отзывы рекомендую зайти на сайт и ознакомиться с отзывами!

  7. BHajDeLiZgt表示:

    Отличный хирург! владимир сойфер отзывы рекомендую зайти на сайт и ознакомиться с отзывами!

  8. BKgjDeLiZgt表示:

    Отличный хирург! сойфер владимир валерьевич отзывы рекомендую зайти на сайт и ознакомиться с отзывами!

  9. OABAKAWLBIXny表示:

    buying pregabalin without a prescription buy pregabalin 150 mg without prescription can you get cheap pregabalin price

  10. PoemywomY表示:

    generic cialis from india In this current research, our data are consistent with the previous studies

  11. Enummap表示:

    cytotoxic drugs or external agents chemotherapy, certain antibiotics bactrim, ionizing radiation discount cialis t best known for comic roles, though he had some lighter moments a couple of years back in Гў

  12. PoemywomY表示:

    Melissa, USA 2022 04 12 18 53 51 can i buy cialis without a prescription I wanted to hear your, your comments behind this quote, this job nursing, it would be easier if there weren t such a narrow divide between being the Canary in the coal, mine, and chicken, little it talking about like, what, what is worth speaking up about in your attempts to provide better care and to improve things for patients

  13. XsaYzovLiZgt表示:

    On this site buy pouches all known killa snus very good and trust taste!

  14. PABAKAWLBIXcz表示:

    buying cheap pregabalin pills buy cheap lyrica no prescription lyrica without insurance

  15. BDgjDeLiZgt表示:

    Отличный хирург! сойфер владимир отзывы рекомендую зайти на сайт и ознакомиться с отзывами!

  16. PoemywomY表示:

    cheapest cialis I get cramps in many areas of the body

  17. BDsjDeLiZgt表示:

    Отличный хирург! владимир сойфер отзывы рекомендую зайти на сайт и ознакомиться с отзывами!

  18. Easterpisn表示:

    college essay online help
    review of essay writing services
    essay service review

發佈留言

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