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

19,488 Responses

  1. WillieRap表示:

    easy canadian pharm: legitimate canadian pharmacy – easy canadian pharm

  2. mostbet_yepa表示:

    регистрация в мостбет http://www.gtrtt.com.kg .

  3. A motivating discussion is definitely worth comment. I do believe that you should write more on this issue, it might not be a taboo matter but usually folks don’t talk about these subjects. To the next! Best wishes!

  4. mostbet_vopa表示:

    мостбет официальный сайт вход мостбет официальный сайт вход .

  5. WillieRap表示:

    Online pharmacy USA: Best online pharmacy – Best online pharmacy

  6. mostbet_dipa表示:

    mostbet регистрация через официальный сайт [url=www.gtrtt.com.kg]www.gtrtt.com.kg[/url] .

  7. WillieRap表示:

    pharmacies in mexico that ship to usa: xxl mexican pharm – pharmacies in mexico that ship to usa

  8. Charleskepsy表示:

    prescription drugs from canada https://megaindiapharm.com/# world pharmacy india

  9. MichaelGeony表示:

    canada drugs coupon code http://discountdrugmart.pro/# drug mart

  10. MichaelGeony表示:

    canada pharmacy coupon https://discountdrugmart.pro/# discount drug pharmacy

  11. Stephany Soto表示:

    Learn how to define your target market by conducting audience research and dominate your particular niche. The step-by-step guide to audience research.

  12. Davidmoits表示:

    online canadian pharmacy coupon: Cheapest online pharmacy – Best online pharmacy

  13. Charleskepsy表示:

    online pharmacy discount code https://familypharmacy.company/# online pharmacy delivery usa

  14. WillieRap表示:

    cheapest prescription pharmacy: uk pharmacy no prescription – discount drug pharmacy

  15. Porterfax表示:

    discount drug mart pharmacy discount drugs drugmart

  16. At all times request separate pricing for supplies and set up so you can make an “apples-to-apples” comparability amongst completely different suppliers.

  17. WillieRap表示:

    Mega India Pharm: MegaIndiaPharm – mail order pharmacy india

  18. Porterfax表示:

    us pharmacy no prescription Online pharmacy USA Cheapest online pharmacy

  19. MichaelGeony表示:

    canada pharmacy not requiring prescription https://familypharmacy.company/# Best online pharmacy

  20. Charleskepsy表示:

    legal online pharmacy coupon code https://discountdrugmart.pro/# best canadian pharmacy no prescription

  21. CharlesFEamy表示:

    Moth species among new discoveries
    The Natural History Museum in London said its researchers had been involved in 190 new discoveries of living and fossilized animals, including 11 new species of moth, eight crabs, four rats and four snakes.
    анальный секс зрелых
    One of the moth species from a genus called Hemiceratoides from Madagascar feeds itself by drinking the tears of sleeping birds, while another newly identified species of moth, Carmenta brachyclado, was found fluttering against a window in a Welsh living room despite its origins in Guyana.

    The moth got stuck in a boot belonging to a photographer, who unwittingly brought the insect from South America to her home in Wales, where it emerged. Her daughter, ecologist Daisy Cadet, recognized the creature as something unusual and contacted the Natural History Museum in London.
    Another striking find was a vegetarian piranha called Myloplus sauron from Brazil’s Xingu River, said Rupert Collins, a senior curator of fishes at the museum, who helped describe the fish. It was named sauron due to its resemblance to the Eye of Sauron from J.R.R.
    Tolkien’s “The Lord of the Rings.”

    “The reason we named it this was really a no-brainer because this fish is disc-shaped and has a thin vertical bar across the body, which looks just like an eye,” Collins said in a video shared by the museum.

    In addition, in 2024 scientists have documented a mystery mollusk in the deep ocean, a ghost shark, a blob-headed fish, and a type of semi-aquatic mouse.
    A ‘race against time’
    Among the fascinating finds from scientists at the UK’s Royal Botanic Gardens, Kew was an intriguing new species of fungi in wooded heathland near the town of Royal Tunbridge Wells, England. Phellodon castaneoleucus sports teeth-like structures instead of the gills usually seen beneath mushroom caps.

    Botanists also discovered five new orchid species from sites across the Indonesian archipelago, a gray-stemmed ghost palm from western Borneo with leaves with white undersides, and an enigmatic family of plants known as Afrothismia that are confined to continental African forests without the ability to photosynthesize.

  22. Porterfax表示:

    drug mart drugmart drugmart

  23. MichaelGeony表示:

    rxpharmacycoupons https://megaindiapharm.shop/# Mega India Pharm

  24. Davidmoits表示:

    discount drug pharmacy: discount drug mart pharmacy – discount drugs

發佈留言

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