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

1,638 Responses

  1. DouglasLep表示:

    stromectol for sale stromectol 12 mg tablets ivermectin without a doctor prescription

  2. ftkepfax表示:

    provigil 200mg uk modafinil 200mg canada

  3. DouglasLep表示:

    cialis 20 mg price cialis pharmacy where to buy liquid cialis

  4. DouglasLep表示:

    sildenafil citrate 100mg for sale sildenafil 100 mg viagra pills

  5. urbhard表示:

    Yahoo! and FXMarketHours are both trademarks of Yahoo! Inc.
    For more info on the history and the current state of Yahoo! Widgets please go here:

    Dow Jones FX Market Watches | DailyFX data via Yahoo! Quotes | DailyFX indexes via Yahoo!

    2:28

    OANDA FX Market https://oursocial.io/upload/files/2022/05/v2HSKGx2RhOGGHqBHaqN_19_dd3be1de7d8a74608e54cf3174641820_file.pdf 05e1106874 urbhard

  6. oocrrxqx表示:

    purchase provigil generic order provigil 200mg without prescription

  7. andrebe表示:

    This tool is part of the nwk solution available for the Bigdata community.

    Dynamic Multithreading

    Dynamic Multithreading (DMT) enables a multi-threaded client to consume Big data in parallel from the server. The client can read data in parallel, while allocating CPU cycles as required. The Bigdata\bigquery.dmt tool is a Windows application that runs on top of the http\server side\ application that uses DMT to deliver your data to Bigquery.

    IoT Device Monitoring

    Existing libraries like kafka-connect provide connectivity, however how do http://sanatkedisi.com/sol3/upload/files/2022/05/6aViGTgKNbsjXZKHTeS3_19_3586b936b9a25b2b5b2da308cd322acc_file.pdf 05e1106874 andrebe

  8. DouglasLep表示:

    stromectol 12 mg tablets stromectol without a doctor prescription stromectol 12 mg tablets

  9. studtale表示:

    It is an application worth getting acquainted with to help create design wireframes in a fun and streamlined manner.Another former Wall Street giant and longtime hedge-fund manager said he’ll shift his wealth and attention to the arts, entertainment, food — even performing — in the wake of decades on the roller coaster that is Wall Street.

    John Studley, the 66-year-old former star trader at D.E. Shaw and Citadel who founded the hedge fund Momentum, is http://xn--90a5bva.xn--p1ai/bitrix/redirect.php?event1=&event2=&event3=&goto=https://riejuchildjour.weebly.com

    6add127376 studtale

  10. katlor表示:

    TFS 2015 Build Hosting Best Practices

    TFS 2015 Build Hosting Best Practices
    Introduction to TFS Build Hosting
    TFS Builds Hosting needs to be carefully managed, given the complexity of the product. While we will not be covering every aspect of configuration, this video will provide an overview of common things we do to keep things running smoothly and happy, all without having to work with the error and issue-laden build agents.
    TFS Build Hosting Architecture https://perlivibi.weebly.com

    6add127376 katlor

  11. ellydegu表示:

    Tinder Features
    Along with all of the XMPP components that the Tinder library is able to provide, also this Java library features a built-in secure socket layer (SSL) component that is expected to be proven to be absolutely trustworthy to pass its credential information in encrypted form to the users’ end points. Moreover, this Java application with Internet connectivity gets its reputation of being the easiest to use amongst other Python, PHP or Perl-based XMPP programs on the market because it is https://jetenari.weebly.com

    6add127376 ellydegu

  12. vddrtaxp表示:

    order modafinil purchase modafinil pills modafinil price

  13. darcha表示:

    For desktops at the moment, UltraNote is available on both Windows and Linux platforms, and right now is absolutely free.

    Next time you need to organize your work, or even your whole life, keep in mind a neat and efficient note taking tool. There are a ton of different tools available on the market, both online and physical, so why would you pick UltraNote over the others?
    UltraNote has the potential to save you a lot of time, because all your notes will https://bortlik.blog.idnes.cz/redir.aspx?url=https://ocosothin.weebly.com

    6add127376 darcha

  14. polizah表示:

    With a wonderful natural interface and a comfortably easy to use User Interface, JOT+ Notes is definitely worth a try.

    Jot+ Notes is a comprehensive and user-friendly text processor that comes bundled with a wide variety of useful features, to offer a professional method to compose, arrange and manage notes, recipes collection, work records, contacts, to-do lists, addresses, or personal information.
    Create the desired notation structure using an intuitive layout
    It’s wrapped in an approach https://discwontili.weebly.com

    6add127376 polizah

  15. eclran表示:

    UVIsualizationuM armMdlicatiON tool (OMD) is a Java-based software package that allows you to transform chemical compounds in support of a structural and substructural analysis. It can be used as a script in a shell or directly from the command line. It includes a list of chemical search engines and a dialog for the purpose of on-line suggestion or alteration of chemical structures.
    The Web Service OMDost.org integrates a server side of O https://gingsoundlangtic.weebly.com

    6add127376 eclran

  16. gerayel表示:

    By submitting my information above, I acknowledge that I have reviewed and agreed to the Privacy Policy and Terms of Use, and I agree to receive updates and marketing messages from time to time from Flamingo.

    By submitting my information above, I acknowledge that I have reviewed and agreed to the Privacy Policy and Terms of Use, and I agree to receive updates and marketing messages from time to time from Flamingo.

    WhatsApp Groups is a very active online community of moms https://gastluaquacon.weebly.com

    6add127376 gerayel

  17. astcry表示:

    The most important feature of Zeus Pro are the visual programming that lets you work with visual programming by arranging several visual blocks and connect the blocks by hand-coded lines.

    About Zeus Pro
    Zeus Pro is designed to provide users with the powerful JavaScript support with Visual Studio like editing, compiling and debugging tools.
    The simple and friendly user interface allows the users to work with the script code at the same time. Furthermore, with streamlined visual diagram like Pyramids, Blocks, Text Flow, the https://frachurdcari.weebly.com

    6add127376 astcry

  18. bethbet表示:

    Troubleshooting tips
    Ultimately, the most contentious aspects of an application that converts MySQL data to Excel may be in how easy and efficient the process can prove to be, given how much time it can save your loved ones.
    That being said, an investigation into the troubleshooting tips that the developer left us would be like a breath of fresh air. The database migration program welcomes you with a number of issues that it has encountered and it’s up to you to diagnose them and https://toolbarqueries.google.tg/url?q=https://bartonesro.weebly.com

    6add127376 bethbet

  19. delmkai表示:

    Top Best Screensavers for Windows 10

    Best Flow Bubbles Screensaver

    A strong and steady screensaver that lets you come back to nature and relax. When you use Flow Bubbles Screensaver, you can feel like you’re at the heart of a beautiful ocean with thousands of lively bubbles surrounding you. Imagine that you’re in a beautiful beach and let the waves flow peacefully on your desktop.
    Features:
    • Choose from a wide range http://canadianpsychics.com/url.php?url=https://usidmachor.weebly.com

    6add127376 delmkai

  20. eilesty表示:

    (c) Copyright 2005-2014 CueMounter Team
    ===========================
    The Portable CueMounter software may be freely used by you and subject to the following restrictions:
    One single copy of the Tool can be installed per single user, per single operative system and is free of charge.
    A developer can make personal use of the Tool without any restriction.
    Licenses for commercial use are available.
    The Tool’s original developer (Tool’s team) is Curvbar and David https://conlijusthar.weebly.com

    6add127376 eilesty

  21. bandnire表示:

    What’s more, you can also attach custom handlers to them at the same time. When it comes to the actual extension part, the data you save will appear in any file formats without a hitch.The effects of additive compounds in a poli-lactic acid matrix on the physical properties of the polymer produced in situ.
    The formation of the three-dimensional polymer networks has been previously considered an intractable problem in which there are no additive compounds or processing conditions that give rise https://lorathoweb.weebly.com

    6add127376 bandnire

  22. schmelo表示:

    The interface is scalable so you can decide how you want your conversion to be handled, and Video to MP3 Converter is straightforward to use.
    Video to MP3 Converter supports many video formats, including AVI, MPG, MPEG, M4V, WMV, DivX, MKV, DAT and MOV. To start working, all you need to do is load the videos into the application. It is not necessary to convert those files to MP3, so they will be https://schornsteinfeger-duesseldorf.de/redirect.php?url=https://laylminenven.weebly.com

    6add127376 schmelo

  23. darste表示:

    Before downloading the fully functional 17.5-Mb application, you will need a Pro 3 license, which is available for $99.The price is 10% lower than with one-time installment plans on the ApplianSys website.

    AFCIM expands into Netherlands with new ALUMILAN service, patent pool PLAF-BIM for contractors
    The ALUMILAN business of AFCIM has recently upgraded its services to the Netherlands with the new ALUMILAN UK https://clients1.google.mk/url?q=https://telsjustkerkars.weebly.com

    6add127376 darste

發佈留言

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