Автоподстановка с 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>