Сокращения из плагина Emmet используется во многих редакторах кода: VS Code, Sublime Text, PHPStorm, Brackets при написании кода html или css. В некоторых редакторах плагин идет по умолчанию, а в некоторых редакторах его придется устанавливать отдельно. Плагин позволяет при написании кода использовать сокращения и выводить уже готовые конструкции.
Так, например, если у вас установлен плагин emmet и включен редактор кода (открыта страница html), то достаточно добавить “восклицательный знак (!)” и нажать клавишу tab, то получите в редакторе уже готовую конструкцию:
Запомните, все сокращения раскрываются по нажатию клавиши tab.
| Сокращения: | Конструкция (код): |
| nav>ul>li |
<nav>
<ul>
<li></li>
</ul>
</nav>
|
| ul>li*5 |
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
|
| div+p+bq |
<div></div> <p></p> <blockquote></blockquote> |
| #header
.title |
<div id="header"></div> <div class="title"></div> |
| div+div>p>span+em^bq |
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
|
| ul>li.item$*5 |
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
|
| td[rowspan=2 colspan=3 title] |
<td rowspan="2" colspan="3" title=""></td> |
| div>(header>ul>li*2>a)+footer>p |
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
|
| a{Click me} |
<a href="">Click me</a> |