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

7,983 Responses

  1. 1win879piodo表示:

    Самая Надежная Букмекерская контора – 1win

  2. Рекомендую Лучшую Букмекерскую контору 1win

  3. Davidtes表示:

    price for 5 mg lisinopril zestril 10 mg tablet website

  4. WilliamRhype表示:

    http://cytotec.club/# Abortion pills online

  5. RandallTaulp表示:

    buy ciprofloxacin: purchase cipro – cipro for sale

  6. Harrydup表示:

    Hello, this weekend is fastidious designed for me, because this moment i am reading this wonderful educational article here at my house.
    https://englishmax.ru/

  7. EarnestAvada表示:

    В нашем обществе, где диплом становится началом успешной карьеры в любой сфере, многие ищут максимально быстрый и простой путь получения качественного образования. Наличие документа об образовании сложно переоценить. Ведь именно диплом открывает двери перед всеми, кто стремится вступить в профессиональное сообщество или учиться в ВУЗе.
    Наша компания предлагает максимально быстро получить этот важный документ. Вы можете купить диплом нового или старого образца, и это становится отличным решением для всех, кто не смог завершить образование или утратил документ. Любой диплом изготавливается с особой аккуратностью, вниманием к мельчайшим нюансам. В итоге вы получите 100% оригинальный документ.
    Превосходство этого решения заключается не только в том, что вы сможете оперативно получить диплом. Весь процесс организовывается удобно, с нашей поддержкой. Начиная от выбора необходимого образца документа до консультации по заполнению персональных данных и доставки в любой регион страны — все находится под абсолютным контролем квалифицированных специалистов.
    Всем, кто ищет оперативный способ получить необходимый документ, наша услуга предлагает отличное решение. Заказать диплом – это значит избежать долгого процесса обучения и сразу переходить к достижению своих целей, будь то поступление в ВУЗ или начало карьеры.

    https://diplomanc-russia24.com

  8. 1win880piodo表示:

    Топовая Букмекерская контора – 1win

  9. Лучшая Букмекерская контора, рекомендую 1win

  10. 1win881piodo表示:

    Надёжная Букмекерская контора – 1win

  11. Топовая Букмекерская контора, рекомендую 1win

  12. Davidtes表示:

    lisinopril 25 mg tablet zestril 5 mg tablets lisinopril 10 12.55mg

  13. Timsothyabela表示:

    В нашем обществе, где диплом становится началом отличной карьеры в любом направлении, многие ищут максимально быстрый и простой путь получения образования. Факт наличия официального документа сложно переоценить. Ведь диплом открывает двери перед каждым человеком, который стремится начать трудовую деятельность или продолжить обучение в высшем учебном заведении.
    Предлагаем оперативно получить любой необходимый документ. Вы сможете купить диплом, и это является выгодным решением для всех, кто не смог закончить обучение или утратил документ. диплом изготавливается с особой тщательностью, вниманием к мельчайшим нюансам. В итоге вы сможете получить продукт, максимально соответствующий оригиналу.
    Плюсы данного подхода состоят не только в том, что вы оперативно получите свой диплом. Процесс организовывается удобно и легко, с нашей поддержкой. От выбора подходящего образца диплома до консультации по заполнению персональной информации и доставки в любое место России — все под абсолютным контролем качественных специалистов.
    Для всех, кто ищет быстрый способ получения необходимого документа, наша компания предлагает выгодное решение. Заказать диплом – значит избежать долгого обучения и сразу переходить к достижению личных целей: к поступлению в ВУЗ или к началу удачной карьеры.
    https://diploman-russiyans.com

  14. RandallTaulp表示:

    pct nolvadex: how does tamoxifen work – tamoxifen bone pain

  15. Timsothyabela表示:

    В современном мире, где диплом является началом отличной карьеры в любой отрасли, многие ищут максимально быстрый и простой путь получения образования. Наличие документа об образовании трудно переоценить. Ведь диплом открывает дверь перед каждым человеком, который собирается начать профессиональную деятельность или продолжить обучение в любом ВУЗе.
    В данном контексте наша компания предлагает очень быстро получить этот необходимый документ. Вы сможете заказать диплом нового или старого образца, что становится удачным решением для человека, который не смог закончить обучение или утратил документ. Каждый диплом изготавливается с особой аккуратностью, вниманием к мельчайшим деталям. На выходе вы сможете получить продукт, 100% соответствующий оригиналу.
    Плюсы этого решения заключаются не только в том, что можно быстро получить диплом. Процесс организован комфортно, с нашей поддержкой. От выбора нужного образца диплома до консультации по заполнению личной информации и доставки в любое место страны — все будет находиться под абсолютным контролем наших специалистов.
    Для всех, кто ищет максимально быстрый способ получить необходимый документ, наша услуга предлагает отличное решение. Заказать диплом – значит избежать продолжительного процесса обучения и не теряя времени перейти к достижению своих целей, будь то поступление в университет или старт карьеры.

    https://diploman-rossiya.com

  16. Davidtes表示:

    purchase cytotec п»їcytotec pills online buy cytotec pills

  17. 1win882piodo表示:

    Надёжная Букмекерская контора, всем советую 1win

  18. Топовая Букмекерская контора в мире 1win

  19. Great site ! I recommend everyone to watch it!paris escort

  20. WilliamRhype表示:

    http://lisinopril.network/# medication zestoretic

  21. RandallTaulp表示:

    buy propecia pill: propecia prices – cheap propecia price

  22. Davidtes表示:

    purchase cipro antibiotics cipro buy cipro online

  23. I have been examinating out a few of your posts and i must say pretty good stuff. I will definitely bookmark your website.

  24. GichardPheve表示:

    cat casino официальный сайт
    cat casino

  25. Davidtes表示:

    lisinopril 19 mg drug lisinopril cost for 2 mg lisinopril

  26. WilliamRhype表示:

    http://cytotec.club/# Cytotec 200mcg price

  27. Лучшая Букмекерская контора в мире 1win

  28. OLaneevige表示:

    Good day! This post couldn’t be written any better! Reading this post reminds me of my old room mate! He always kept talking about this. I will forward this write-up to him. Fairly certain he will have a good read. Many thanks for sharing!
    https://loveru.me/seks-znakomstva-s-transom/

  29. 1win883piodo表示:

    Топ Букмекерская контора, всем советую 1win

  30. RandallTaulp表示:

    does tamoxifen cause bone loss: tamoxifen chemo – clomid nolvadex

發佈留言

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