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

  1. Apresentando uma casa de apostas confiavel 1win

  2. Eu recomendo esta casa de apostas 1win

  3. Henryfet表示:

    amoxicillin 500mg price: over the counter amoxicillin – amoxicillin 500mg capsules antibiotic

  4. DichaelDax表示:

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

  5. MarvinRoave表示:

    generic neurontin neurontin 1800 mg neurontin capsules 300mg

  6. Отличный сайт! Тут Вы можете приобрестиВоздушные шары

  7. Billyved表示:

    https://doxycyclinea.online/# buy cheap doxycycline

  8. Henryfet表示:

    purchase prednisone: prednisone 20mg cheap – prednisone pill 10 mg

  9. Apresentando a melhor casa de apostas 1win

  10. MarvinRoave表示:

    buy generic prednisone online prednisone 10mg tabs prednisone

  11. Escolha de uma casa de apostas confiavel 1win

  12. Melhor site de apostas, recomendado 1win

  13. StephenDeery表示:

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

  14. Henryfet表示:

    doxycycline 100mg price: buy doxycycline online – generic doxycycline

  15. Passando para a melhor casa de apostas 1win

  16. Melhor site de apostas 1win

  17. MarvinRoave表示:

    zithromax online australia zithromax z-pak price without insurance buy zithromax without prescription online

  18. Billyved表示:

    https://amoxila.pro/# generic for amoxicillin

  19. Henryfet表示:

    neurontin cap 300mg: cost of neurontin 800 mg – neurontin 300mg capsule

  20. FobertWen表示:

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

  21. Купить диплом с гарантией качества
    купить диплом Гознак http://diplom-msk.ru/ .

  22. MarvinRoave表示:

    purchase neurontin canada neurontin cap 300mg price neurontin capsule 400 mg

  23. Отличный сайт! Тут Вы можете найтиновые сервера майнкрафт

  24. Billyved表示:

    http://doxycyclinea.online/# doxycycline hydrochloride 100mg

  25. Henryfet表示:

    prednisone uk over the counter: prednisone 30 mg tablet – how can i get prednisone online without a prescription

  26. Recomendo uma excelente casa de apostas 1win

  27. MarvinRoave表示:

    can we buy amoxcillin 500mg on ebay without prescription amoxicillin 500mg prescription amoxicillin without a prescription

發佈留言

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