馬老師 雲端研究室

Passion inspires professional

馬老師 雲端研究室

Emmet 介紹 – 縮寫篇

by · 2015-03-11

縮寫這樣的編輯方式是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>

Tags:

You may also like...

14,078 Responses

  1. osteklenie_pvKi表示:
    2025-01-0400:35:31

    Идеальное остекление для балконов в Санкт-Петербурге, предложим оптимальный вариант.
    Элитное остекление для балконов в Санкт-Петербурге, под ключ и без переплат.
    Изысканное остекление балконов в Петербурге, под заказ и с уникальным дизайном.
    Быстрое остекление для балконов в Санкт-Петербурге, без скрытых платежей и срочно.
    Остекление балкона под ключ в СПб, по лучшей цене и быстрой установкой.
    остекление балконов недорого https://balkon-spb-1.ru/ .

    回覆
  2. Narkolog na dom krasnodar_hiMi表示:
    2025-01-0400:34:03

    вызов нарколога на дом вызов нарколога на дом .

    回覆
  3. Narkolog na dom krasnodar_zdMi表示:
    2025-01-0400:18:12

    частного нарколога на дом narkolog-na-dom-krasnodar29.ru .

    回覆
  4. 狐 かっこいい 言葉表示:
    2025-01-0400:15:14

    Mathieson, Stuart (4 September 2015).

    回覆
  5. LarryHom表示:
    2025-01-0400:12:39

    https://canadianpharmacy.win/# drugs from canada

    回覆
  6. PROSTAZEN REVIEW表示:
    2025-01-0400:02:46

    PROSTAZEN REVIEW

    回覆
  7. Jamesknowl表示:
    2025-01-0400:00:55

    https://indianpharmacy.win/# best online pharmacy india

    回覆
  8. Vivod iz zapoya krasnodar_rion表示:
    2025-01-0323:53:58

    вывод из запоя анонимно краснодар вывод из запоя анонимно краснодар .

    回覆
  9. Vivod iz zapoya krasnodar_teon表示:
    2025-01-0323:41:16

    принудительный вывод из запоя краснодар принудительный вывод из запоя краснодар .

    回覆
  10. 国士舘大学 就職 強い表示:
    2025-01-0323:22:01

    Technical Analysis: The Complete Resource for Financial Market Technicians, p.

    回覆
  11. Vivod iz zapoya krasnodar_fpon表示:
    2025-01-0323:18:23

    вывод из запоя круглосуточно краснодар на дому [url=http://vyvod-iz-zapoya-krasnodar111.ru]вывод из запоя круглосуточно краснодар на дому[/url] .

    回覆
  12. Narkolog na dom krasnodar_hrMi表示:
    2025-01-0323:13:46

    частного нарколога на дом https://www.narkolog-na-dom-krasnodar29.ru .

    回覆
  13. Narkolog na dom krasnodar_gjki表示:
    2025-01-0323:03:46

    нарколог на дом срочно нарколог на дом срочно .

    回覆
  14. Narkolog na dom krasnodar_zuMi表示:
    2025-01-0322:40:33

    вызвать нарколога на дом вызвать нарколога на дом .

    回覆
  15. 吉田証言虚偽訂正記事表示:
    2025-01-0322:31:40

    Therefore the numerical vary for one unpacked BCD byte is zero by means of nine inclusive, whereas the vary for one packed BCD byte is zero by ninety-nine inclusive.

    回覆
  16. Narkolog na dom krasnodar_hyki表示:
    2025-01-0322:14:17

    срочный выезд нарколога на дом http://www.narkolog-na-dom-krasnodar28.ru .

    回覆
  17. 白鳥皿表示:
    2025-01-0322:13:43

    Because of this the blonde in the yoga pants might be far much less prone to hit her husband’s golf clubs when she pulls into the storage, as a result of the automotive will not block her view of the bottom instantly in front of her.

    回覆
  18. Narkolog na dom krasnodar_ttki表示:
    2025-01-0321:58:53

    нарколог на дом в краснодаре нарколог на дом в краснодаре .

    回覆
  19. Donaldarout表示:
    2025-01-0321:45:08

    Преимущества онлайн-образования в России
    дистанционные курсы
    Онлайн-образование в России продолжает активно развиваться, предлагая людям всё больше возможностей для получения знаний и профессионального роста. Сейчас его популярность достигла новых высот благодаря технологическим инновациям, доступности и гибкости. В этой статье мы рассмотрим ключевые преимущества онлайн-образования, которые делают его столь востребованным в современном обществе.
    Гибкость обучения
    Онлайн-образование позволяет учиться в удобное время и в любом месте. Это особенно важно для людей, совмещающих работу, учёбу и семейные обязанности. Например, студентка Мария из Новосибирска отмечает: «Благодаря онлайн-курсам я могу совмещать работу в IT-компании с изучением UX-дизайна». Эксперты также подтверждают, что гибкость форматов — от видеолекций до интерактивных заданий — делает обучение доступным для всех возрастных групп.
    Согласно данным исследования Университета онлайн-образования, 78% студентов отмечают, что возможность самостоятельно выбирать график занятий позволяет им сохранять мотивацию на протяжении всего курса. Кроме того, гибкость позволяет студентам адаптировать обучение под свою занятость, что делает его идеальным решением для работающих специалистов и родителей.
    Доступность для всех регионов
    На сегодняшний день цифровая инфраструктура в России значительно улучшилась, что сделало онлайн-образование доступным даже в отдалённых регионах. Например, жители Камчатки теперь могут посещать курсы программирования на таких платформах, как Хекслет и OTUS. Как отмечает эксперт по образованию Иван Кузнецов: «Цифровизация регионов помогла устранить образовательное неравенство и предоставила доступ к знаниям тысячам людей».
    На примере школьников из Якутии можно увидеть, как доступ к высокоскоростному интернету позволяет проходить курсы подготовки к ЕГЭ, повышая их результаты на 25%. В регионах, где раньше обучение ограничивалось лишь локальными ресурсами, теперь появилась возможность участвовать в международных образовательных проектах.

    回覆
  20. Robertloubs表示:
    2025-01-0321:44:47

    https://vglazok.ru/images/pgs/?melbet_promokod_bonus_za_registraciu.html

    回覆
  21. Jamesknowl表示:
    2025-01-0321:43:19

    http://indianpharmacy.win/# top online pharmacy india

    回覆
  22. Vivod iz zapoya krasnodar_ulon表示:
    2025-01-0321:22:24

    вывод из запоя круглосуточно краснодар на дому вывод из запоя круглосуточно краснодар на дому .

    回覆
  23. Brianchoky表示:
    2025-01-0321:20:25

    http://mexicanpharmacy.store/# mexico pharmacies prescription drugs

    回覆
  24. valuence 株価表示:
    2025-01-0320:49:56

    Q: What is Clinical Health Psychology?

    回覆
  25. Narkolog na dom krasnodar_zuki表示:
    2025-01-0320:41:36

    нарколог на дом срочно нарколог на дом срочно .

    回覆
  26. Brianchoky表示:
    2025-01-0320:29:59

    https://mexicanpharmacy.store/# mexico drug stores pharmacies

    回覆
  27. Jamestus表示:
    2025-01-0320:23:51

    ed drugs online from canada canadian pharmacy antibiotics canadian pharmacy meds review

    回覆
  28. Narkolog na dom krasnodar_vtMi表示:
    2025-01-0320:19:16

    вызвать нарколога на дом вызвать нарколога на дом .

    回覆
  29. Mazrrst表示:
    2025-01-0320:14:15

    Купить диплом о высшем образовании в Волжском

    回覆
  30. 漁船 仕組み表示:
    2025-01-0320:07:29

    Immediately, the company that may Keith Kellogg began almost a century in the past reigns as the No.

    回覆

發佈留言

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