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

5,982 Responses

  1. A computerized system can help experienced investors pick up a superior control available.

  2. KennethEscag表示:

    Glory Casino

  3. As a rule, the quantity of shares that make part of a particular index is equal to the number given at the end of the index name.

  4. Higher steel prices may largely have an impact on the cost of infrastructure tasks too, as a result becoming a significant stumbling block to the recovery of steel companies in the country.

  5. AnedPaish表示:

    American Well is an independent company.
    Verify prices before you buy doxycycline brand name from online pharmacies
    This is very commonly asked question, and unfortunately, there is no easy answer.

  6. These federal programs consist of social service programs, civil rights and healthcare privateness packages, disaster preparedness packages, and well being related research.

  7. On thirteen February 2007, the Republic of Cyprus formally utilized to affix the eurozone on 1 January 2008.

  8. JesusLealt表示:

    deneme bonusu veren siteler: bonus veren siteler – bahis siteleri

  9. That is how BookMyForex offers the best rates for forex in the market.

  10. There is definately a lot to find out about this topic. I like all the points you made.

  11. One Republican Michigan Congresswoman Candice Miller argued that the state of Michigan ought to decide out of the Nationwide Flood Insurance coverage Program solely and urged the governor to take action.

  12. You should see some things in the shares you are planning to purchase for Intraday trading: liquidity and volatility.

  13. This site truly has all of the information and facts I wanted about this subject and didn’t know who to ask.

  14. KevinSounc表示:

    https://sweetbonanza.network/# sweet bonanza 90 tl

  15. Darrelherse表示:

    slot siteleri: slot casino siteleri – guvenilir slot siteleri 2024

  16. AngkHesia表示:

    Cats with uncontrolled diabetes will drink water constantly and as a result they will urinate frequently and in large amounts.
    Many sites offer a good price of flagyl alcohol you want to compare costs from pharmacies
    Burke AP, Virmani R.

  17. AgnvHesia表示:

    The safest and most reliable way to go is to have a pre and post bile acid test done.
    offers received from pharmacies to get low prices when you taking valtrex after cold sore appears . Order now!
    Think you know pizza?

  18. Robertleare表示:

    Legal Address Provision: All companies come with a registered office address in Germany.
    Regulatory framework and licensing
    Foreign entrepreneurs can choose between several basic forms of legal entities to register their business in Switzerland:
    Obtaining a licence does not mean the end of interaction with regulatory authorities. Companies are obliged to comply with regulatory requirements throughout the entire period of operations, including regular reporting, keeping AML/KYC systems up to date and informing regulators of significant changes in operational activities.
    Company registration: After preparing and collecting all the necessary documents, the process of registering a company through the online platform can take from several hours to one business day. However, verification and processing of the application by the Register of Enterprises may take up to five business days.

    Tax Incentives and Rulings
    The National Bank of Slovakia (NBS) is responsible for maintaining a stable monetary policy and supervision of participants in the Slovak financial market. Although at present authorities are not authorized to control cryptographic asset providers through the issuance of a license, even if the cryptocurrency activity refers to traditional means of payment (for example, exchange for fiat money)He recognized various cryptographic assets.
    Process for obtaining a licence
    Preparing for the process of opening a bank account in Puerto Rico requires careful collection and organisation of the necessary documents. The exact list of documents may vary depending on the selected bank and type of account, so it is recommended to contact the bank in advance to obtain up-to-date information and avoid possible delays. An experienced approach to the process will ensure a successful account opening and the start of financial activities in Puerto Rico.
    Requirements for certain types of activities

  19. Keithexeld表示:

    The ghost town that has stood empty for more than a century
    смотреть порно жесток
    There’s a large and very dignified school in Kayakoy. There are narrow streets, lined with houses, that wend and rise up both sides of a steep valley. There’s an ancient fountain in the middle of the town. And there are churches, one with million-dollar hilltop views over the blue Aegean.

    But, for most of the past 100 years, there have been no people.

    Kayakoy, in southwestern Turkey’s Mugla Province, is a true ghost town. Abandoned by its occupants and haunted by the past. It’s a monument, frozen in time – a physical reminder of darker times in Turkey.

    With hillsides dotted by countless crumbling buildings slowly being swallowed by greenery, and endless views into vanished lives, it’s also a fascinating and starkly beautiful place to visit. In summer, under clear skies and blazing suns, it’s eerie enough. Even more so in cooler seasons, wreathed in mountain or sea mists.
    Just over a century ago, Kayakoy, or Levissi as it was known, was a bustling town of at least 10,000 Greek Orthodox Christians, many of whom were craftspeople who lived peacefully alongside the region’s Muslim Turkish farmers. But in the upheaval surrounding Turkey’s emergence as an independent republic, their simple lives were torn apart.

    Tensions with neighboring Greece after the Greco-Turk war ended in 1922 led to both countries ejecting people with ties to the other. For Kayakoy, that meant a forced population exchange with Muslim Turks living in Kavala, in what is now the Greek region of Macedonia and Thrace.

    But the newly arrived Muslims were reputedly less than happy with their new home, swiftly moving on and leaving Kayakoy to fall to ruin.

  20. Briannitty表示:

    Надежный поставщик динамических и статических прокси, сохраняющий стабильность вашей web активности: где купить резидентские прокси – https://residential-proxy.ru/

  21. JesusLealt表示:

    slot siteleri guvenilir: casino slot siteleri – slot casino siteleri

  22. Oh my goodness! an incredible article dude. Thank you Nevertheless I am experiencing difficulty with ur rss . Don’t know why Unable to subscribe to it. Is there anyone getting equivalent rss drawback? Anybody who knows kindly respond. Thnkx

  23. I am typically to blogging and i actually appreciate your content regularly. This content has really peaks my interest. Let me bookmark your web site and maintain checking achievable data.

  24. Spot on with this write-up, I honestly believe this website needs much more attention. I’ll probably be returning to see more, thanks for the info!

發佈留言

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