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

6,131 Responses

  1. Профессиональный сервисный центр ремонт телефона мастер по ремонту мобильных телефонов

  2. AgustinBougs表示:

    https://drugs24.pro/# ed pills that work
    indian pharmacies safe

  3. CharlesNot表示:

    “Специализированныи? застрои?щик “ПРОХАУС” вводит в заблуждение своих дольщиков, экономит на всем. В итоге их “Бизнес”, “Комфорт” у других это обычный эконом. Не верьте и не покупайте квартиры их ЖК – ЖК Астро ЖК Счастье ЖК Теплый дом. Все покажу расскажу – @dontcheatpeople – телеграмм.

  4. BrandonJer表示:

    indian pharmacy paypal pharmacy website india online pharmacy india

  5. Carlostague表示:

    Can these ultra-exclusive luxury destinations help extend your life? They’d certainly like to try
    pin up casino india review
    When the Six Senses Residences Dubai Marina is completed in 2028, the gleaming 122-story building will be the tallest residential structure in the world, complete with luxury fitness and wellness amenities to match. Residents will be able to lift weights, take an outdoor yoga class or swim laps in a pool more than 100 stories high in the clouds.

    But what if, by living there, people were also extending their lives? That’s the mission of the “longevity floor,” another amenity available to future residents of the Six Senses’ 251 apartments and “sky mansions.” This unique floor will include even more specialized offerings such as crystal sound healing, believed by its practitioners to reduce stress and improve sleep. Or residents can indulge in hyperbaric treatments, breathing in 100% oxygen in a pressurized chamber which has shown promising anti-aging results.

    “The idea around it is that you’re not just purchasing a residence, you’re purchasing a lifestyle,” said Kevin Cavaco, director of marketing for Select Group, the building’s developer.

    “You’re purchasing an opportunity to work on your true wealth — which is your longevity. You’re prolonging your time.”

    Life extension may be a lofty — and dubious — pitch, but it’s a common theme among luxury fitness clubs, opulent new high rises and exclusive retreats. The trend coincides with new scientific studies and a parallel fixation in the tech world, but the provable science behind these promises is often murky.
    Celebrity personal trainer and gym designer Harley Pasternak is used to designing programs for high-profile celebrities including Kim Kardashian, Lady Gaga and Halle Berry. But he’s noticed a shift in the past few years, he told CNN over email, as he’s gained an “influx” of tech founder clients.

    “All of them are definitely more interested in aging, in a way that I’ve never seen prior to five years ago,” he said. “All kinds of biohacking tricks like heat exposure, cold, exposure, certain supplements, training, foraging, and even certain medications.”

  6. Gregorypurne表示:

    online ed medications https://drugs24.pro/# errection problem cure

  7. Way cool! Some very valid points! I appreciate you penning this post and the rest of the website is extremely good.

  8. Профессиональный сервисный центр по ремонту сотовых телефонов в Москве.
    Мы предлагаем: сколько стоит ремонт смартфона
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  9. Gregorypenny表示:

    יום ובכל שעה. עומד לחוות את כל תחושות הגוף ולרצות עוד ועוד, עד שתגיע לפורקן משחרר. מאמר 5 דירות דיסקרטיות בחיפה בשביל לחיות במחלוקת. את עצמת החוויה, פשוט צריך להגיע ולנסות. אם אתה נמצא בחופשה באילת, או פשוט מתגורר בעיר הדרומית, זה משהו שאתה חייב דירות דיסקרטיות באילת

  10. DonaldDurce表示:

    The magical white stone wonderland with effervescent bathing pools
    1xbet the ultimate casino destination for indian
    From a distance, Pamukkale looks every bit like a ski resort, with a cascade of brilliant white slopes and a scattering of tourists at the top, seemingly preparing to slalom down into the valley below.

    So why isn’t it melting away as midsummer temperatures nudge toward 100 Fahrenheit, or 37 Celsius, and the heat hangs in the shimmering air?

    Because this unusual and beautiful wonder, located deep in the sunkissed hills of southwestern Turkey, isn’t snow at all. In fact the water it’s formed from sometimes spurts out of the ground at boiling point.

    And those visitors milling around its upper reaches aren’t going anywhere fast. Most are here to take in the extraordinary spectacle – and either paddle or soak in some of the planet’s most photogenic pools.

    Today, Pamukkale’s travertine limestone slopes and pools, filled with milky blue mineral water, are perfect for Instagram moments, especially as the magic hour evening sun casts their rippled surfaces in hues of pink.

    Gateway to Hell
    But this place was a tourist sensation thousands of years before social media, as first Greeks, then Romans flocked here for the thermal waters and to pay tribute at what was revered as a gateway to Hell.

    Today, Pamukkale and the ancient city of Hierapolis, which sprawls across the plateau above the white terraces, are part of a UNESCO World Heritage site that pulls in coachloads of visitors. Typically, many visit for a couple of hours, but it’s worth spending at least a day in this geological and historical playground.

  11. Howdy! I just wish to offer you a big thumbs up for your great info you’ve got here on this post. I am returning to your blog for more soon.

  12. Experimente a emocao de Fortune tiger, um jogo cheio de sorte e premios incriveis esperando por voce!

  13. Dnrtnrz表示:

    Приобретение диплома ПТУ с сокращенной программой обучения в Москве
    cialisinastana31087.xzblogs.com/69053233/получить-второй-диплом

  14. Hey There. I found your blog using msn. This is a very well written article.

    I’ll make sure to bookmark it and return to read more of
    your useful information. Thanks for the post. I’ll certainly comeback.

    My web site – testoprime vs test boost max

  15. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: ремонт бытовой техники в барнауле
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  16. DennisKah表示:

    online shopping pharmacy india: top online pharmacy india – top 10 online pharmacy in india

  17. Sazrlbj表示:

    Всё, что нужно знать о покупке аттестата о среднем образовании
    kpilib.ru/forum.php?tema=8134

  18. PatrickApeme表示:

    להם. כך הם תרגיש את החום והאהבה שהיא מעניקה לך. העניינים יתלהטו ויתחממו וזה ירגיש לך טוב בגוף. עיסוי אירוטי ימלא אותך בחיים, החלק השני, נערות יפות המארחות גברים ומעניקות להם הדיסקרטיות מספקות לגברים גם את סביבת הבילוי הנעימה והדיסקרטית. וגם מספקות את read this post here

  19. BrandonJer表示:

    erectial dysfunction drugs to treat ed prescription drugs online without doctor

  20. Gregorypurne表示:

    pain medications without a prescription https://mexicanpharm24.pro/# purple pharmacy mexico price list

  21. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: сервис центры бытовой техники челябинск
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  22. AgustinBougs表示:

    http://indianpharmdelivery.com/# reputable indian online pharmacy
    buy prescription drugs from india

  23. The thermal cooker is comprised of a removable cooking pot, with handle and lid, that matches inside a vacuum flask which has a diameter ranging from 20 to 50 cm.

發佈留言

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