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

  1. ThomasThype表示:

    Slot klasik tetap menjadi favorit banyak orang: slot88.company – slot88

  2. Asset worth inflation is an undue increase in the costs of actual property, akin to actual property.

  3. DavidCooth表示:

    https://preman69.tech/# Permainan slot mudah dipahami dan menyenangkan

  4. 12.Seventy three miles (20.49 km) of roadways, of which 10.09 miles (16.24 km) were maintained by the municipality, 2.25 miles (3.Sixty two km) by Burlington County and 0.39 miles (0.63 km) by the brand new Jersey Division of Transportation.

  5. Williecrady表示:

    Slot menjadi daya tarik utama di kasino http://preman69.tech/# Pemain bisa menikmati slot dari kenyamanan rumah

  6. Some point out they’re holding up nice, while others say the edges weren’t sewn in any respect, others had been fraying, and the seams are coming apart.

  7. Since some or all taxpayers benefit from authorities expenditures from these unobserved or hidden revenues, the public’s appetite for government expenditures will increase, thus providing politicians incentive to increase the dimensions of government.

  8. Sonnydip表示:

    В 2025 году вопрос активации Windows 10 останется важным для многих пользователей, стремящихся обеспечить безопасность и стабильность своих устройств. Несмотря на появление новых версий операционной системы, таких как Windows 11, Windows 10 продолжит поддерживаться Microsoft с обновлениями безопасности и функциональности. Ключ активации, представляющий собой уникальную комбинацию символов, позволит подтвердить легальность вашей копии и получать доступ к критически важным обновлениям.
    ключи активации виндовс 10

  9. SushiSwap App表示:

    Nice article, have a look at my site “https://www.issuewire.com/sushi-swap-the-best-crypto-platform-in-2025-1823683727364009”

  10. Moreover, the Qwerkywriter features an built-in pill stand of as much as twelve inches, with dual knob encoders, full USB/wireless gadget connectivity, and a scratch-resistant aluminum chassis.

  11. Williecrady表示:

    Slot menjadi daya tarik utama di kasino https://bonaslot.site/# Kasino sering mengadakan turnamen slot menarik

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

  13. Williecrady表示:

    Jackpot progresif menarik banyak pemain http://bonaslot.site/# Permainan slot mudah dipahami dan menyenangkan

  14. DavidCooth表示:

    https://garuda888.top/# Pemain sering berbagi tips untuk menang

  15. Certainly one of my favourite methods is watching an extended and slender price consolidation, after which buying and selling it once you see a bonafide breakout.

  16. Aaronbus表示:

    garuda888.top garuda888 slot Slot dengan fitur interaktif semakin banyak tersedia

  17. nice article ave a look at my site “https://www.newsbreak.com/crypto-space-hub-313321940/3799652652916-top-crypto-investments-in-2025-bitcoin-ai-projects-tokenized-assets”

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

  19. DavidCooth表示:

    https://bonaslot.site/# Mesin slot dapat dimainkan dalam berbagai bahasa

  20. ThomasThype表示:

    Mesin slot dapat dimainkan dalam berbagai bahasa: preman69 – preman69

  21. DavidCooth表示:

    http://slotdemo.auction/# Banyak pemain menikmati jackpot harian di slot

  22. Imagine shedding the languages of the world to a dominant international one.

發佈留言

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