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

  1. Ronaldgibra表示:

    Я начала работать с кооперативом в 2019 году, и на протяжении всего этого времени не столкнулась с никакими проблемами. Конечно, были трудности на пути, но кооператив всегда помогал решать их быстро. Все требования были выполнены, и я купила свою квартиру, как и обещали. Все эти разговоры о финансовых пирамидах — это скорее слухи, чем реальность. Для меня кооператив всегда был честным и открытым, и я остаюсь довольна результатом.

  2. Charleskepsy表示:

    cheapest pharmacy for prescriptions https://easycanadianpharm.shop/# easy canadian pharm

  3. MichaelGeony表示:

    us pharmacy no prescription http://xxlmexicanpharm.com/# xxl mexican pharm

  4. MichaelGeony表示:

    canadian pharmacy no prescription needed http://xxlmexicanpharm.com/# mexican pharmaceuticals online

  5. Charleskepsy表示:

    cheapest pharmacy prescription drugs https://familypharmacy.company/# Best online pharmacy

  6. Charleskepsy表示:

    canadian pharmacy without prescription https://familypharmacy.company/# Cheapest online pharmacy

  7. 473727 819782As I web site possessor I believe the content material matter here is rattling wonderful , appreciate it for your efforts. You must maintain it up forever! Very best of luck. 906125

  8. Круглосуточная поставка алкоголя в Москве: удобство или задача?

    Как это функционирует?

    24-часовая доставка алкоголя в Москве осуществляется через многообразные сервисы:

    Интернет-сервисы: Специализированные сайты и приложения, что дают обширный ассортимент спиртных продуктов с поставкой на квартиру. Заведения общепита и пабы: Отдельные заведения, обладающие разрешение для реализацию спиртного, предоставляют доставку своей продукции в ночное время. Курьерские службы: Компании, которые взаимодействуют с имеющими лицензию реализаторами алкоголя и осуществляют доставку по запросу. Плюсы:

    Комфорт: Возможность приобрести излюбленный продукт, не покидая из жилища, в всякое время дня. доставка алкоголя в москве – Сбережение часа: Не требуется тратить время на визит в магазин, особенно в позднее время. Широкий выбор: Обширный выбор алкогольных продуктов, включая необычные и особенные предложения. Шанс для праздников и мероприятий: Оперативная поставка дает возможность быстро пополнить запасы спиртного, когда это необходимо. Минусы и противоречия:

    Законность: В РФ запрещена реализация спиртного в ночное время (от 23:00 до 8:00). Службы поставки, которые предлагают 24-часовую доставку, часто применяют различные схемы, что способны оказаться незаконными. Потребление спиртного: Легкий доступ к спиртному в всякое время может помогать росту потребления, что может повлечь отрицательные последствия на самочувствия. Проверка за продажей не достигшим совершеннолетия: Существует опасность, что доставщики способны не проверять лета клиентов, что способен вызвать к продаже алкоголя не достигшим совершеннолетия.

  9. WillieRap表示:

    mexico drug stores pharmacies: xxl mexican pharm – purple pharmacy mexico price list

  10. MichaelGeony表示:

    international pharmacy no prescription https://familypharmacy.company/# Online pharmacy USA

  11. WillieRap表示:

    discount drug pharmacy: discount drug mart – discount drug mart pharmacy

  12. Davidmoits表示:

    pharmacy online 365 discount code: Best online pharmacy – Best online pharmacy

  13. MichaelGeony表示:

    cheapest pharmacy for prescriptions http://megaindiapharm.com/# Mega India Pharm

  14. MichaelGeony表示:

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

  15. Charleskepsy表示:

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

  16. WillieRap表示:

    online pharmacy delivery usa: Best online pharmacy – Best online pharmacy

  17. Porterfax表示:

    canadian pharmacy coupon code drugmart discount drug mart

  18. Your passion and dedication to your craft radiate through every article. Your positive energy is infectious, and it’s evident that you genuinely care about your readers’ experience. Your blog brightens my day!

  19. MichaelGeony表示:

    best no prescription pharmacy https://megaindiapharm.com/# MegaIndiaPharm

  20. порно с японками [url=japanxxx-video1.ru]порно с японками[/url] .

發佈留言

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