Форма Бэкуса — Наура

БНФ - формальная система описания синтаксиса

  • { … } - цепочка, которая может отсутствовать или повторяться некоторое число раз
  • [ … ] - цепочка, которая может отсутствовать
  • ** | ** - или
  • ** * ** - конструкция может повторяться произвольное число раз
  • ** ::= ** - “по определению”, “это”
  • ** < … > ** - описание структуры языка
  • ** ( …) ** - для ограничения альтернативных конструкций
  • Нетерминал - определяемое понятие
  • Терминал - неопределяемый символ

Правило граматики: Нетерминал ::= последовательность нетерминалов и терминалов

Пример: <цифра> ::= [-]0|1|2|3|4|5|6|7|8|9

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$@-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>