Emmet основной синтаксис
Сокращение Расшифровка сокращений
Дочерний: >
  1. <!-- nav>ul>li -->
  2. <nav>
  3. <ul>
  4. <li></li>
  5. </ul>
  6. </nav>
Соединение: +
  1. <!-- div+p+bq -->
  2. <div></div>
  3. <p></p>
  4. <blockquote></blockquote>
Поместить выше (в дереве HTML): ^
  1. <!-- div+div>p>span+em^bq -->
  2. <div></div>
  3. <div>
  4. <p><span></span><em></em></p>
  5. <blockquote></blockquote>
  6. </div>
  7. <!-- div+div>p>span+em^^bq -->
  8. <div></div>
  9. <div>
  10. <p><span></span><em></em></p>
  11. </div>
  12. <blockquote></blockquote>
Группировка: ()
  1. <!-- div>(header>ul>li*2>a)+footer>p -->
  2. <div>
  3. <header>
  4. <ul>
  5. <li><a href=""></a></li>
  6. <li><a href=""></a></li>
  7. </ul>
  8. </header>
  9. <footer>
  10. <p></p>
  11. </footer>
  12. </div>
Умножение: *
  1. <!-- ul>li*3 -->
  2. <ul>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. </ul>
Нумерация: $


  1. <!-- ul>li.item$*3 -->
  2. <ul>
  3. <li class="item1"></li>
  4. <li class="item2"></li>
  5. <li class="item3"></li>
  6. </ul>
  7. <!-- h$[title=item$]{Header $}*3 -->
  8. <h1 title="item1">Header 1</h1>
  9. <h2 title="item2">Header 2</h2>
  10. <h3 title="item3">Header 3</h3>
  11. <!-- ul>li.item$$$*3 -->
  12. <ul>
  13. <li class="item001"></li>
  14. <li class="item002"></li>
  15. <li class="item003"></li>
  16. </ul>
  17. <!-- ul>li.item$@-*3 -->
  18. <ul>
  19. <li class="item3"></li>
  20. <li class="item2"></li>
  21. <li class="item1"></li>
  22. </ul>
  23. <!-- ul>li.item$@3*5 -->
  24. <ul>
  25. <li class="item3"></li>
  26. <li class="item4"></li>
  27. <li class="item5"></li>
  28. <li class="item6"></li>
  29. <li class="item7"></li>
  30. </ul>



id и class
  1. <!-- #header -->
  2. <div id="header"></div>
  3. <!-- .title -->
  4. <div class="title"></div>
  5. <!-- form#search.wide -->
  6. <form id="search" class="wide"></form>
  7. <!-- p.class1.class2.class3 -->
  8. <p class="class1 class2 class3"></p>
Атрибуты: []
  1. <!-- p[title="Hello world"] -->
  2. <p title="Hello world"></p>
  3. <!-- td[rowspan=2 colspan=3 title] -->
  4. <td rowspan="2" colspan="3" title=""></td>
  5. <!-- [a='value1' b="value2"] -->
  6. <div a="value1" b="value2"></div>
Текст: {}
  1. <!-- a{Click me} -->
  2. <a href="">Click me</a>
  3. <!-- p>{Click }+a{here}+{ to continue} -->
  4. <p>Click <a href="">here</a> to continue</p>
Сокращение тегов:
  1. <!-- .class -->
  2. <div class="class"></div>
  3. <!-- em>.class -->
  4. <em><span class="class"></span></em>
  5. <!-- ul>.class -->
  6. <ul>
  7. <li class="class"></li>
  8. </ul>
  9. <!-- table>.row>.col -->
  10. <table>
  11. <tr class="row">
  12. <td class="col"></td>
  13. </tr>
  14. </table>
Генератор текста: lorem
  1. <!-- .wrapper>h1{My Text}+p*3>lorem5 -->
  2. <div class="wrapper">
  3. <h1>My Text</h1>
  4. <p>Lorem ipsum dolor sit amet.</p>
  5. <p>Debitis dolorum illo nisi suscipit!</p>
  6. <p>Animi explicabo libero quis voluptates?</p>
  7. </div>
Менеджер
Сафронова Екатерина
Ведущий специалист
+7 000-00-88
Консультация специалиста
Наш менеджер перезвонит вам в течении 5 минут
Менеджер
Команда ГВОЗДЕВСОФТ
Оставить заявку
Менеджер
Хорошова Анастасия
Сметчик
+7 000-00-99
Заказать расчет
Бесплатный расчет сметы в течении одного дня