Технические статьи

html генератор

Автоподстановка с 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$@-3*5 [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$@3*2 [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>li*2>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>
Поделиться