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

  1. I admire the precious tips you offer in your articles or blog posts. I will bookmark your blog and have my children check up here often. I am quite sure they will learn lots of new stuff here than anybody else! Yours trully, Shauna.

  2. This web site is often a walk-through for all of the knowledge you wanted concerning this and didn’t know who must. Glimpse here, and you’ll absolutely discover it.

  3. I believe that a simple and unassuming manner of life is best for everyone, best both for the body and the mind.

  4. I don’t unremarkably comment but I gotta say thank you for the post on this special one .

  5. thumbs up this song better than justin bieber all about money

  6. Casa de apostas com as melhores avaliacoes Tigrinho

  7. Spot on with this write-up, I truly assume this web site needs way more consideration. I’ll most likely be again to read rather more, thanks for that info.

  8. DavdidApari表示:

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

    Купить диплом строителя

  9. I am glad to be a visitant of this stark website ! , appreciate it for this rare info ! .

  10. Youre so cool! I dont suppose Ive read anything in this way just before. So nice to get somebody by original thoughts on this subject. realy appreciation for beginning this up. this website is one thing that is needed online, someone after some originality. helpful project for bringing new stuff towards the web!

  11. best suvs… […]we like to honor other sites on the web, even if they aren’t related to us, by linking to them. Below are some sites worth checking out[…]…

  12. Recomendo o melhor cassino Tigrinho

  13. Cassinos com as melhores avaliacoes Tigrinho

  14. Tente a sua sorte neste cassino Tigrinho

  15. Robertdiz表示:

    pharmacie en ligne france pas cher: Acheter Cialis 20 mg pas cher – pharmacie en ligne france livraison belgique

  16. Confie neste cassino confiavel Tigrinho

  17. Allenacurf表示:

    pharmacie en ligne france pas cher: Medicaments en ligne livres en 24h – Pharmacie Internationale en ligne

  18. As maiores probabilidades neste cassino Tigrinho

  19. Cassinos com condicoes favoraveis Tigrinho

  20. JuliusIntal表示:

    pharmacie en ligne: kamagra gel – pharmacie en ligne livraison europe

  21. SLhaneevige表示:

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

    Купить диплом строителя

  22. Robertdiz表示:

    Viagra gГ©nГ©rique sans ordonnance en pharmacie: viagra en ligne – Sildenafil teva 100 mg sans ordonnance

  23. Allenacurf表示:

    Viagra sans ordonnance 24h suisse: Meilleur Viagra sans ordonnance 24h – SildГ©nafil 100 mg sans ordonnance

  24. Kjofdw表示:

    fludrocortisone boy – lansoprazole pills whence lansoprazole coal

  25. click表示:

    This post was incredibly informative and well-organized. I learned so much from reading it. Thank you for your hard work and dedication!rendingnicheblog

  26. Allenacurf表示:

    trouver un mГ©dicament en pharmacie: Pharmacies en ligne certifiees – pharmacie en ligne livraison europe

  27. RobertBlica表示:

    https://phenligne.shop/# pharmacie en ligne fiable

  28. website表示:

    You consistently produce high-quality content that is both informative and enjoyable to read. This post was no exception. Keep it up!pulsepeak

  29. SShaneevige表示:

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

    http://http://diplomsagroups.com/diplomy-po-specialnosti/diplom-farmacevta.html

  30. Allenacurf表示:

    acheter mГ©dicament en ligne sans ordonnance: cialis sans ordonnance – pharmacie en ligne livraison europe

發佈留言

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