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...

11,715 Responses

  1. Robertder表示:

    Обучающие бесплатные и платные курсы программирования 1C https://курсы-1с-программирование.рф
    для новичков специалистов онлайн – получите азы разработки 1С от лучших преподавателей, курс с трудоустройством, в т.ч. основы бухгалтерского учета администрирования, заданиями для слушателей в учебном центре, стоимость на сайте

  2. Robertder表示:

    Обучение 1С программирования https://курсы-1с-программирование.рф
    с нуля для разработчиков online – получите азы разработки 1С от лучших преподавателей, курсы с сертификатами, включая уроки бух учета администрирования, материалами для студентов в учебном центре, цена со скидкой указана в обзоре

  3. Robertder表示:

    Обучение 1С программирования курсы 1С программирование: лучшие для обучения программистов 1С – курсы-1с-программирование.рф
    для начинающих программистов онлайн – освойте профессию профессии “Программист 1С” от лучших преподавателей, обучение с сертификатом, в т.ч. основы бух учета администрирования, заданиями для слушателей в учебном центре, цена со скидкой указана в обзоре

  4. Robertder表示:

    Обучение программистов 1С программирование
    для начинающих программистов в интернете – изучите профессию программирования 1С от сертифицированных преподавателей, курсы с сертификатом и трудоустройством, включая азы бух учетаадминистрирования 1С предприятия, материалами для студентов в учебном центре, стоимость по ссылке

  5. Robertder表示:

    Базовый курс 1С программирования курсы программистов 1С на курсы-1с-программирование.рф
    с нуля для начинающих программистов online – получите азы программирования 1С от сертифицированных учителей, обучение с сертификатами, в т.ч. азы бухгалтерии администрирования, заданиями для студентов в учебном центре, цена в обзоре

  6. Robertder表示:

    Обучающие курсы программирования 1C https://курсы-1с-программирование.рф
    с нуля для специалистов онлайн – освойте азы разработки 1С от сертифицированных преподавателей, курсы с трудоустройством, в т.ч. уроки бух учета администрирования, материалами для студентов в учебном центре, цена по ссылке

  7. Robertder表示:

    Обучающий курс программирования 1С https://курсы-1с-программирование.рф
    для новичков разработчиков online – освойте азы профессии “Программист 1С” от сертифицированных преподавателей, обучение с сертификатами, в т.ч. уроки бухгалтерского учета администрирования, заданиями для студентов в учебном центре, цены по ссылке

  8. Robertder表示:

    Курс программирования 1C курсы-1с-программирование.рф/
    с нуля для программистов онлайн – освойте практические навыки 1С программирования от лучших учителей, курсы с сертификатом и трудоустройством, в том числе азы бухгалтерииадминистрирования 1С предприятия, материалами для слушателей в учебном центре, стоимость по ссылке

  9. Robertder表示:

    Курс 1С программирование курсы
    с нуля для специалистов в интернете – получите профессию на практике программирования 1С от сертифицированных учителей, курс с трудоустройством, в т.ч. основы бух учетаадминистрирования 1С предприятия, заданиями для студентов в учебном центре, цена в обзоре

  10. Robertder表示:

    Обучающие курсы 1С программирования курсы
    для начинающих программистов онлайн – получите профессию программирования 1С от сертифицированных преподавателей, курсы с сертификатом, в том числе основы бухгалтерского учета администрирования, материалами для студентов в учебном центре, цена со скидкой указана на сайте

  11. Robertder表示:

    Обучающие бесплатные и платные курсы 1С программирования https://курсы-1с-программирование.рф
    для начинающих программистов online – получите практические навыки разработки 1С от лучших преподавателей, курс с сертификатом, включая основы бухгалтерского учета администрирования, материалами для слушателей в учебном центре, стоимость на сайте

  12. Robertder表示:

    Обучающие бесплатные курсы программистов 1С https://курсы-1с-программирование.рф
    для новичков специалистов в интернете – получите навыки профессии “Программист 1С” от сертифицированных преподавателей, обучение с сертификатами, в т.ч. уроки бухгалтерского учетаадминистрирования 1С предприятия, заданиями для студентов в учебном центре, цена в обзоре

  13. Robertder表示:

    Курсы программирования 1C https://курсы-1с-программирование.рф
    с нуля для программистов в интернете – получите навыки на практике 1С программирования от лучших учителей, курсы с сертификатом и трудоустройством, в т.ч. азы бухгалтерии администрирования, материалами для слушателей в учебном центре, цены на сайте

  14. Robertder表示:

    Обучающий курс 1С программирование курсы
    с нуля для разработчиков в интернете – освойте профессию на практике профессии “Программист 1С” от лучших учителей, курсы с сертификатом и трудоустройством, включая основы бухгалтерии администрирования, материалами для студентов в учебном центре, цена по ссылке

  15. Robertder表示:

    Обучающий курс программистов 1С курсы 1С программирование: лучшие для обучения программистов 1С – курсы-1с-программирование.рф
    для новичков программистов в интернете – изучите азы 1С программирования от сертифицированных преподавателей, обучение с трудоустройством, включая уроки бухгалтерииадминистрирования 1С предприятия, заданиями для слушателей в учебном центре, цены на сайте

  16. Robertder表示:

    Обучающие бесплатные и платные курсы программистов 1С курсы 1С программирование: лучшие для обучения программистов 1С – курсы-1с-программирование.рф
    для новичков специалистов online – изучите практическую профессию разработки 1С от сертифицированных учителей, курс с сертификатом, включая азы бух учета администрирования, материалами для студентов в учебном центре, цена по ссылке

  17. Robertder表示:

    Курс 1C программирование https://курсы-1с-программирование.рф
    с нуля для начинающих программистов online – освойте азы программирования 1С от сертифицированных учителей, обучение с сертификатом и трудоустройством, включая азы бух учетаадминистрирования 1С предприятия, заданиями для слушателей в учебном центре, цена с учетом скидки указана по ссылке

  18. Attarrori表示:

    Cialis Soft Tabs are quick-dissolving uncoated chewable tablets containing the active ingredient tadalafil 20 mg buy priligy tablets Dizziness Flushing Stuffy nose Back pain Headache Upset stomach Fainting Light-headedness Nausea

  19. Robertder表示:

    Базовый курс программирование 1С https://курсы-1с-программирование.рф
    с нуля для начинающих специалистов онлайн – получите профессию 1С программирования от сертифицированных преподавателей, курсы с сертификатом и трудоустройством, в т.ч. основы бух учетаадминистрирования 1С предприятия, материалами для студентов в учебном центре, цена по ссылке

  20. kiscill表示:

    priligy amazon uk The drug can also be taken on an as-needed basis about 30 minutes prior to sexual activity, similar to Viagra

  21. BainiaSig表示:

    can i buy priligy in mexico Il Viagra ГЁ prodotto sotto forma di compresse ed ГЁ disponibile in tre varianti di dosaggio 25 mg, 50 mg e 100 mg di Sildenafil

  22. Emaleepisn表示:

    gay universe chat
    gay chat webcam room facebook
    reddit gay sex chat room

  23. Chieffica表示:

    Tadalafil 40mg stop PDE5 from doing harm to the nitric oxide, hence, blood flows towards the penis do i need a doctor prescription to buy priligy Best Penis Extender in 2022

  24. BainiaSig表示:

    Erectile dysfunction also known as impotence is the inability to get and keep an erection hard enough to achieve sexual intercourse pastillas priligy en mexico

  25. Trateheva表示:

    PossibilitГ  di ottenere la consegna veloce e gratis where can i buy priligy online safely 622 Persistence 3 months 3 66 0

  1. 2022-09-03

    gay chat room finding sex https://newgaychat.com/

  2. 2022-09-03

    gay chat rndom https://gaychatcams.net/

  3. 2022-09-03

    gay chat mesa az https://gaychatspots.com/

  4. 2022-09-04

發佈留言

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