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

  1. Roberttic表示:

    https://amohealthpharm.shop/# amoxicillin 250 mg

  2. Frankelava表示:

    Welcome to PancakeSwap: A Beginner’s Guide
    PancakeSwap is a decentralized exchange platform on the Binance Smart Chain, designed for swapping BEP-20 tokens. With its vibrant ecosystem, ease of use, and low transaction fees, it’s become a popular choice among crypto enthusiasts.
    pancakeswap finance
    What is PancakeSwap?
    PancakeSwap is an automated market maker (AMM) that allows users to trade directly from their crypto wallets. There’s no order book involved; instead, trades are made against a liquidity pool. Here’s how you can get started:

    How to Use PancakeSwap?
    Set Up Your Wallet
    First, you need a crypto wallet like MetaMask or Trust Wallet. Ensure your wallet supports BEP-20 tokens.
    Connect to Binance Smart Chain
    Configure your wallet to connect to the Binance Smart Chain network. Detailed guides are available in your wallet settings.
    Purchase BNB
    You’ll need BNB (Binance Coin) to cover transaction fees. Buy BNB from a reputable exchange and transfer it to your wallet.
    Access PancakeSwap
    Visit the official PancakeSwap website and connect your wallet by clicking on the ‘Connect Wallet’ button.
    Start Trading
    Once connected, you can begin swapping BEP-20 tokens. Choose the tokens you wish to trade and confirm your transactions.
    Benefits of PancakeSwap
    Lower Fees: Operating on Binance Smart Chain, the fees are more affordable than Ethereum-based exchanges.
    Fast Transactions: Experience quick transaction speeds due to the efficiency of BSC.
    Yield Farming: Earn rewards by providing liquidity or participating in various farming pools.
    Conclusion
    PancakeSwap offers a user-friendly approach to trading cryptocurrencies, engaging users with its gamified elements like lotteries and collectibles. Whether you’re a beginner or an experienced trader, PancakeSwap provides an efficient and exciting way to dive into the world of decentralized finance. Always ensure to perform your due diligence before engaging in trading activities.

    For more detailed guides and support, visit the .

  3. Roberttic表示:

    https://zithropharm.shop/# generic zithromax 500mg india

  4. BrandonJag表示:

    can you buy generic clomid pills: generic clomid price – can you get generic clomid for sale

  5. JustinTam表示:

    where can i buy generic clomid: can you buy generic clomid without prescription – where to buy clomid no prescription

  6. Briantrozy表示:

    amoxicillin 500mg capsule: Amo Health Pharm – amoxicillin generic

  7. MjhgdfxewKat表示:

    секс видео чат
    порно чат рулетка пары эро чат трансы

  8. BrandonJag表示:

    cost of cheap clomid: can i purchase cheap clomid without rx – can i buy generic clomid without insurance

  9. Roberttic表示:

    http://doxhealthpharm.com/# buy cheap doxycycline

  10. порно видео чат онлайн
    секс чат русский эро видео чат

  11. Briantrozy表示:

    cost of amoxicillin prescription: azithromycin amoxicillin – rexall pharmacy amoxicillin 500mg

  12. BioklopikRak表示:

    The promo code for 1XBET is “1XBUM.” By utilizing this code, you can unlock a special bonus for sports betting, offering a 100% match up to $130, or for casino games, a bonus of $1,950 along with 150 free spins. New players have the opportunity to input our 1xBet bonus code to enhance the standard sports free bet bonus by an additional $100. A 1xBet promo code consists of a combination of letters and numbers that you enter in a designated voucher field to access these advantageous offers.

    1xbet promo code singapore

  13. KdesokjhyMof表示:

    The promo code for 1XBET is “1XBUM.” By utilizing this code, you can unlock a special bonus for sports betting, offering a 100% match up to $130, or for casino games, a bonus of $1,950 along with 150 free spins. New players have the opportunity to input our 1xBet bonus code to enhance the standard sports free bet bonus by an additional $100. A 1xBet promo code consists of a combination of letters and numbers that you enter in a designated voucher field to access these advantageous offers.

    promo code 1xbet official

  14. Roberttic表示:

    https://doxhealthpharm.shop/# buy doxycycline in india

  15. Briantrozy表示:

    price for amoxicillin 875 mg: AmoHealthPharm – order amoxicillin uk

  16. VirgilBlawl表示:

    can you buy generic clomid without insurance can you buy generic clomid pill cost of clomid no prescription

  17. Roberttic表示:

    https://clmhealthpharm.com/# where buy generic clomid for sale

  18. VirgilBlawl表示:

    where can i buy amoxocillin amoxicillin 500mg for sale uk amoxicillin for sale online

  19. BrandonJag表示:

    order amoxicillin online no prescription: amoxicillin 50 mg tablets – buy amoxicillin online uk

  20. BrandonJag表示:

    zithromax: Zithro Pharm – zithromax online pharmacy canada

  21. JustinTam表示:

    doxycycline order online: Dox Health Pharm – buy doxycycline tablets 100mg

發佈留言

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