Автоподстановка с Emmet
** Один из вариантов конструкции, записанный в БНФ: **
_ тэг {.название-класса} [количествоПовторений] { > тэг {.название-класса}[количествоПовторений]} > lorem [*количествоПовторений] _
Примечание:
- { … } - цепочка, которая может отсутствовать или повторяться некоторое число раз
- [ … ] - цепочка, которая может отсутствовать
Синтаксис:
- ** > ** вложенные тэги
- ** + ** тэги на одном уровне
- ** * ** количество повторений
- ** ( … ) ** группировка
- ** . ** добавление класса
- ** # ** добавление идентификатора (id)
- ** [ … ] ** атрибуты тэга
- ** $ ** нумерация элементов
- ** $@- ** изменение нумерации элементов на обратную
- ** { … } ** добавление текста к элементу
** Примеры: **
- тэг [tab]
<тэг></тэг>
- * a.name-class{text a} ** *[tab]
<a href="" class="name-class">text a</a>
- * div>ul>li ** *[tab]
1
2
3
4
5<div>
<ul>
<li></li>
</ul>
</div> - * ul>li.item$$3 * *[tab]
1
2
3
4
5<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul> - * ul>li.item$@-35 * *[tab]
1
2
3
4
5
6
7<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul> - * ul>li.item$@32 * *[tab]
1
2
3
4<ul>
<li class="item3"></li>
<li class="item4"></li>
</ul> - * div+p+bq ** *[tab]
1
2
3<div></div>
<p></p>
<blockquote></blockquote> - * div>(header>ul>li2>a)+footer>p * *[tab]
1
2
3
4
5
6
7
8
9
10
11<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div> - * td[title=”Hello world!” colspan=3] ** *[tab]
<td title="Hello world!" colspan="3"></td>