Emmet

Синтаксис эммета

Начало работы

Давайте начнем улучшать вашу разработку до скорости света.

• Emmet в Visual Studio Code (code.visualstudio.com)
• Emmet 2 для Sublime Text (github.com)
• Emmet для Coda (emmet.io)
• Emmet для Atom (github.com)

Умножение: *

ul>li*5

``html

Child: >

nav>ul>li

``html

Пользовательские атрибуты

p[title=“Hello world”]

``html

td[rowspan=2 colspan=3 title]

``html

[a=“value1” b=“value2”]

``html

Текст:

a{Нажмите на меня}

``html Нажмите на меня

p>{Кликните }+a{here}+{ для продолжения}

``html {.wrap}
<p>Нажмите <a href="">здесь</a>, чтобы продолжить</p>

Атрибуты ID и CLASS

#header

``html

.title

``html

form#search.wide

``html

p.class1.class2.class3

``html

Неявные имена тегов

.class

``html

em>.class

``html

ul>.class
``html
<ul>
    <li class="class"></li>
</ul>

table>.row>.col

``html

Родные братья и сестры: +

div+p+bq

``html

Восхождение: ^

div+div>p>span+em^bq

``html

div+div>p>span+em^^bq

``html

Группировка: ()

div>(header>ul>li*2>a)+footer>p

``html

(div>dl>(dt+dd)*4)+footer>p ``html

$

ul>li.item$*3

``html

h$[title=item$]{Заголовок $}*3

``html

ul>li.item$$$*3

``html

ul>li.item$@-*3 ``html

ul>li.item$@2*3 ``html

Также см.

• Шпаргалка Эммета (docs.emmet.io)