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

  1. Williamdet表示:

    https://mexicanpharmacy1st.shop/# mexico drug stores pharmacies

  2. RobertZopof表示:

    medicine in mexico pharmacies: medication from mexico pharmacy – mexican drugstore online

  3. OLaneevige表示:

    Wow, superb blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is fantastic, as well as the content!
    http://server-attestats.com

  4. Lhaneevige表示:

    Awesome website you have here but I was wanting to know if you knew of any user discussion forums that cover the same topics talked about in this article? I’d really love to be a part of community where I can get feed-back from other experienced individuals that share the same interest. If you have any recommendations, please let me know. Many thanks!
    server-attestats.com

  5. ManuelinceX表示:

    mexican pharmacy mexican pharmaceuticals online mexican pharmaceuticals online

  6. A escolha dos profissionais no mundo das apostas 1win

  7. Casa de apostas comprovada, recomendada 1win

  8. AlbertBlelf表示:

    reputable mexican pharmacies online: buying from online mexican pharmacy – mexico drug stores pharmacies

  9. EarnestAvada表示:

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

  10. Williamdet表示:

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

  11. RobertZopof表示:

    buying from online mexican pharmacy: mexican border pharmacies shipping to usa – mexican mail order pharmacies

  12. Casa de apostas comprovada para apostas 1win

  13. Casa de apostas confiavel com a melhor reputacao 1win

  14. ManuelinceX表示:

    mexican pharmaceuticals online mexican border pharmacies shipping to usa mexican border pharmacies shipping to usa

  15. FobertWen表示:

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

  16. Ismaelfer表示:

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

  17. Neat blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple tweeks would really make my blog stand out. Please let me know where you got your design. Bless you

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

  19. Henryfet表示:

    no prescription online prednisone: purchase prednisone – how much is prednisone 10mg

  20. A escolha dos profissionais no mundo das apostas 1win

  21. Uma casa de apostas confiavel e com excelente reputacao 1win

  22. FobertWen表示:

    What’s up, constantly i used to check weblog posts here early in the break of day, because i love to find out more and more.
    diplom07.ru

  23. GichardPheve表示:

    сайт битц казино
    регистрация битц казино

  24. Ismaelfer表示:

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

  25. MarvinRoave表示:

    buy doxycycline hyclate 100mg without a rx doxycycline generic doxycycline hydrochloride 100mg

  26. Apostas bem-sucedidas com a melhor casa de apostas 1win

  27. Recomendo uma casa de apostas exclusiva 1win

  28. Billyved表示:

    http://prednisoned.online/# where to buy prednisone in australia

  29. Ismaelfer表示:

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

  30. GichardPheve表示:

    Greetings! This is my first comment here so I just wanted to give a quick shout out and tell you I really enjoy reading your blog posts. Can you suggest any other blogs/websites/forums that cover the same subjects? Thanks for your time!

    https://turkiserial.co/

發佈留言

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