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

  1. MichaelGeony表示:

    legit non prescription pharmacies http://familypharmacy.company/# Online pharmacy USA

  2. Charleskepsy表示:

    pharmacy discount coupons https://xxlmexicanpharm.com/# purple pharmacy mexico price list

  3. Charleskepsy表示:

    canadian pharmacy coupon https://familypharmacy.company/# Cheapest online pharmacy

  4. carcal adas表示:

    Each article you write is like a step in a dance, moving us gracefully through The thoughts.

  5. Davidmoits表示:

    discount drug mart pharmacy: drugmart – drugmart

  6. MichaelGeony表示:

    canadian pharmacy without prescription https://xxlmexicanpharm.com/# xxl mexican pharm

  7. GreggRom表示:

    A brief history of sunglasses, from Ancient Rome to Hollywood
    Площадка кракен

    Sunglasses, or dark glasses, have always guarded against strong sunlight, but is there more to “shades” than we think?

    The pupils of our eyes are delicate and react immediately to strong lights. Protecting them against light — even the brilliance reflected off snow — is important for everyone. Himalayan mountaineers wear goggles for this exact purpose.

    Protection is partly the function of sunglasses. But dark or colored lens glasses have become fashion accessories and personal signature items. Think of the vast and famous collector of sunglasses Elton John, with his pink lensed heart-shaped extravaganzas and many others.

    When did this interest in protecting the eyes begin, and at what point did dark glasses become a social statement as well as physical protection?
    The Roman Emperor Nero is reported as holding polished gemstones to his eyes for sun protection as he watched fighting gladiators.

    We know Canadian far north Copper Inuit and Alaskan Yupik wore snow goggles of many kinds made of antlers or whalebone and with tiny horizontal slits. Wearers looked through these and they were protected against the snow’s brilliant light when hunting. At the same time the very narrow eye holes helped them to focus on their prey.

    In 12th-century China, judges wore sunglasses with smoked quartz lenses to hide their facial expressions — perhaps to retain their dignity or not convey emotions.

  8. Charleskepsy表示:

    online pharmacy discount code https://discountdrugmart.pro/# discount drug pharmacy

  9. WillieRap表示:

    discount drug pharmacy: discount drug mart pharmacy – discount drugs

  10. MichaelGeony表示:

    no prescription pharmacy paypal http://familypharmacy.company/# online pharmacy delivery usa

  11. MichaelGeony表示:

    legit non prescription pharmacies https://discountdrugmart.pro/# discount drug pharmacy

  12. Charleskepsy表示:

    no prescription needed canadian pharmacy https://discountdrugmart.pro/# discount drug mart pharmacy

  13. ThomasZoomi表示:

    click to find out more jaxx liberty

  14. Porterfax表示:

    MegaIndiaPharm MegaIndiaPharm MegaIndiaPharm

  15. Charleskepsy表示:

    best no prescription pharmacy https://familypharmacy.company/# online pharmacy delivery usa

  16. WilliamSed表示:

    About us
    Since its founding in 2020, EtherCode Innovation has demonstrated an outstanding level of expertise in smart contract development on the Ethereum platform. The EtherCode Innovation team brings together experienced developers whose knowledge and skills allow them to create reliable and innovative solutions for their clients
    eth honeypot code
    Mission
    We strive to ensure that every person interested in blockchain technologies can gain high-quality knowledge and skills. Our mission is to develop smart contracts that not only improve the functionality of the Ethereum network, but also contribute to the education and development of the developer community.

    Our services
    EtherCode Innovation specializes in creating various smart contracts within Ethereum. We develop innovative solutions for financial instruments, decentralized applications (DApps) and digital asset management systems. Our team has deep knowledge of the Solidity and Vyper programming languages, which allows us to create secure and efficient smart contracts.

    In addition, we provide free educational content for those who want to learn how to create tokens, including Honeypot tokens. Our materials cover all aspects of creating and deploying tokens on Ethereum, from basic concepts to complex technical details.

    Our contribution to the community
    We believe that education plays a key role in the development of the blockchain community. Therefore, we actively participate in various educational and communication initiatives. We also support various educational projects aimed at spreading knowledge about blockchain.

    Development prospects
    We are confident that blockchain technology will continue to transform the world, and we are committed to staying at the center of this process. Our team will continue to create innovative products, develop educational resources, and actively participate in the development of the Ethereum developer community.

    Finally, it is worth noting that EtherCode Innovation is committed to continuous development and innovation. The team is constantly researching new technologies and development methods to provide its clients with the most advanced solutions. Thanks to this approach, the company remains ahead of its time and continues to be in demand in the field of blockchain development.

    EtherCode Innovation is not just a company developing smart contracts on Ethereum. We are leaders in blockchain technology and education, and we invite you to join us on this exciting journey into the world of decentralization and innovation.

  17. MichaelGeony表示:

    mail order pharmacy no prescription https://xxlmexicanpharm.com/# xxl mexican pharm

  18. Porterfax表示:

    Online pharmacy USA online pharmacy delivery usa online pharmacy delivery usa

  19. iwin 68表示:

    Introducing to you the most prestigious online entertainment address today. Visit now to experience now!

  20. Davidmoits表示:

    xxl mexican pharm: xxl mexican pharm – xxl mexican pharm

  21. MichaelGeony表示:

    buying prescription drugs from canada https://discountdrugmart.pro/# discount drug mart pharmacy

發佈留言

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