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

  1. Ismaelfer表示:

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

  2. Henryfet表示:

    neurontin 150mg: neurontin 600 mg capsule – neurontin 150mg

  3. A melhor casa de apostas para apostar 1win

  4. Richardorele表示:

    buy doxycycline without prescription: doxycycline without a prescription – buy cheap doxycycline online

  5. A melhor opcao para apostas esportivas 1win

  6. Shaneevige表示:

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

  7. Gdyxuh表示:

    cenforce whole – tadacip online get brand viagra miserable

  8. Casa de apostas confiavel, recomendada 1win

  9. MarvinRoave表示:

    doxycycline 100mg price doxycycline 100mg tablets purchase doxycycline online

  10. StephenDeery表示:

    Valuable information. Fortunate me I found your web site unintentionally, and I am surprised why this twist of fate didn’t came about earlier! I bookmarked it.

    https://kinodorama.ru/

  11. Billyved表示:

    https://prednisoned.online/# prednisone 10mg tablet price

  12. FobertWen表示:

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

  13. Henryfet表示:

    amoxicillin discount: over the counter amoxicillin – amoxicillin 500mg buy online canada

  14. Escolha apenas esta casa de apostas 1win

  15. Ebevob表示:

    brand cialis smoke – zhewitra bend penisole swirl

  16. Recomendo uma excelente empresa de apostas 1win

  17. MarvinRoave表示:

    can you buy prednisone over the counter prednisone 2.5 mg cost can you buy prednisone over the counter

  18. Отличный сайт! Тут Вы можете приобрестиГелиевые шары

  19. StephenDeery表示:

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

  20. Billyved表示:

    http://amoxila.pro/# where to buy amoxicillin 500mg without prescription

  21. StephenDeery表示:

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

  22. Henryfet表示:

    amoxicillin 500mg price canada: amoxicillin azithromycin – amoxicillin 500 mg where to buy

  23. Eu recomendo a melhor casa de apostas 1win

  24. Richardorele表示:

    zithromax generic cost: how to get zithromax over the counter – buy zithromax without presc

  25. Ir para a melhor casa de apostas 1win

  26. Отличный сайт! Тут Вы можете приобрестиШары на день рождения

  27. MarvinRoave表示:

    prednisone generic cost prednisone 50 mg tablet cost online order prednisone 10mg

發佈留言

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