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

  1. O melhor cassino do mundo, eu o recomendo Blaze

  2. A melhor casa de apostas para cassinos Blaze

  3. RobertZopof表示:

    purple pharmacy mexico price list: mexican drugstore online – mexico pharmacy

  4. ManuelinceX表示:

    buying prescription drugs in mexico online buying prescription drugs in mexico online mexican pharmacy

  5. AlbertBlelf表示:

    mexican mail order pharmacies: best online pharmacies in mexico – п»їbest mexican online pharmacies

  6. Williamdet表示:

    https://mexicanpharmacy1st.com/# mexican pharmaceuticals online

  7. RobertZopof表示:

    mexican pharmaceuticals online: mexican rx online – mexico pharmacies prescription drugs

  8. ManuelinceX表示:

    mexican rx online mexico drug stores pharmacies buying prescription drugs in mexico

  9. O site mais confiavel para cassinos Blaze

  10. O melhor cassino, eu o recomendo Blaze

  11. Williamdet表示:

    https://mexicanpharmacy1st.shop/# purple pharmacy mexico price list

  12. Timsothyabela表示:

    Hi to every one, the contents existing at this web site are genuinely awesome for people knowledge, well, keep up the good work fellows.
    arusak-attestats.ru

  13. RobertZopof表示:

    mexico drug stores pharmacies: reputable mexican pharmacies online – mexico drug stores pharmacies

  14. Melhor site para cassinos Blaze

  15. Otimo cassino, eu o recomendo Blaze

  16. ManuelinceX表示:

    mexico pharmacy best online pharmacies in mexico medicine in mexico pharmacies

  17. Williamdet表示:

    https://mexicanpharmacy1st.shop/# mexican mail order pharmacies

  18. RobertZopof表示:

    mexican drugstore online: medication from mexico pharmacy – medication from mexico pharmacy

  19. JseraldAposy表示:

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

  20. DichaelDax表示:

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

  21. Ppvvin表示:

    brand cialis elsewhere – forzest disturb penisole include

  22. ManuelinceX表示:

    п»їbest mexican online pharmacies mexican mail order pharmacies mexican pharmacy

  23. SLhaneevige表示:

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

  24. AlbertBlelf表示:

    mexican pharmaceuticals online: mexico drug stores pharmacies – mexico pharmacies prescription drugs

  25. Williamdet表示:

    https://mexicanpharmacy1st.online/# purple pharmacy mexico price list

  26. RobertZopof表示:

    buying from online mexican pharmacy: mexican online pharmacies prescription drugs – mexico drug stores pharmacies

  27. ManuelinceX表示:

    pharmacies in mexico that ship to usa buying prescription drugs in mexico online best online pharmacies in mexico

  28. Отличный сайт!Рекомендую!http://ac-holding.ru/

  29. Cassino comprovado, recomendado Blaze

  30. A escolha dos profissionais no mundo dos cassinos Blaze

發佈留言

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