Сокращения в Emmet — справочник. Ускоряем верстку

Emmet может очень сильно упростить и ускорить процесс написания HTML разметки. В этом посте я поделюсь своими наиболее часто используемыми сокращениями и полным списком HTML сокращений в Emmet для Sublime Text, и других редакторов кода.
Полный список всех сокращений (HTML, CSS, XSL) можно посмотреть на его официальном сайте, в документации Emmet.
Шаблон документа
! // coздаст шаблон с html5 доктайпом
Быстрое меню в Emmet
.nav>ul>li*4>a[href="#"]{Меню $}
Работа с формами
input:t // <input type="text" name="" id=""> input:p // <input type="password" name="" id=""> input:s // <input type="submit" name="" id="">
CSS сокращения в Emmet
CSS сокращения в Emmet работают по принципу написания двух первых букв свойства, или свойства + значения. Я напишу только несколько, остальные свойства работаю аналогично.
m10 // margin: 10px pt10p // padding-top: 10% d:n // display: none, можно также просто dn ff // font-family
Базовый синтаксис EMMET
Сокращение | Расшифровка сокращения |
Дочерний: > | nav>ul>li <nav> <ul> <li></li> </ul> </nav> |
Соединение: + | div+p+bq <div></div> <p></p> <blockquote></blockquote> |
Поместить выше (в дереве HTML): ^ | div>p>span+em^bq <div> <p><span></span><em></em></p> <blockquote></blockquote> </div> |
Группировать: () | div>(header>ul>li)+footer>p <div> <header> <ul> <li></li> </ul> </header> <footer> <p></p> </footer> </div> |
Умножение: * | ul>li*3 <ul> <li></li> <li></li> <li></li> </ul> |
Нумерация: $ | ul>li.item_$*3 <ul> <li class="item_1"></li> <li class="item_2"></li> <li class="item_3"></li> </ul> |
id и class | #header+.class <div id="header"></div> <div class="class"></div> #hdr.cl_1.cl_2 <div id="hdr" class="cl_1 cl_2"></div> |
Атрибуты: [] | a[title="Подсказка ссылки"] <a href="" title="Подсказка ссылки"></a> td[rowspan colspan title] <td rowspan="" colspan="" title=""></td> |
Текст: {} | .class{свободный текст} <div class="class">свободный текст</div> p>{Кликните }+a{сюда}+{ скорее} <p>Кликните <a href="">сюда</a> скорее</p> |
Сокращение тегов | .class <div class="class"></div> em>.class <em><span class="class"></span></em> ul>.class <ul> <li class="class"></li> </ul> table>.row>.col <table> <tr class="row"> <td class="col"></td> </tr> </table> |
HTML сокращения | |
! | <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> |
a | <a href=""></a> |
a:link | <a href="http://"></a> |
a:mail | <a href="mailto:"></a> |
base | <base href=""> |
br | <br> |
link | <link rel="stylesheet" href=""> |
link:css | <link rel="stylesheet" href="style.css"> |
link:favicon | <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> |
link:rss | <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml"> |
link:atom | <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml"> |
meta:utf | <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> |
meta:vp | <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
meta:compat | <meta http-equiv="X-UA-Compatible" content="IE=7"> |
script:src | <script src=""></script> |
img | <img src="" alt=""> |
ifr | <iframe src="" frameborder="0"></iframe> |
emb | <embed src="" type=""> |
obj | <object data="" type=""></object> |
map | <map name=""></map> |
map+ | <map name=""> <area shape="" coords="" href="" alt=""> </map> |
area | <area shape="" coords="" href="" alt=""> |
form | <form action=""></form> |
form:getform:post | <form action="" method="get"></form> <form action="" method="post"></form> |
label | <label for=""></label> |
input | <input type="text"> |
inp | <input type="text" name="" id=""> |
input:h | <input type="hidden" name=""> |
input:p | <input type="password" name="" id=""> |
input:c | <input type="checkbox" name="" id=""> |
input:r | <input type="radio" name="" id=""> |
input:f | <input type="file" name="" id=""> |
input:s | <input type="submit" value=""> |
input:i | <input type="image" src="" alt=""> |
input:b | <input type="button" value=""> |
input:reset | <input type="reset" value=""> |
select | <select name="" id=""></select> |
select+ | <select name="" id=""> <option value=""></option> </select> |
opt | <option value=""></option> |
tarea | <textarea name="" id="" cols="30" rows="10"> </textarea> |
video | <video src=""></video> |
audio | <audio src=""></audio> |
bq | <blockquote></blockquote> |
fst | <fieldset></fieldset> |
btn | <button></button> |
btn:s | <button type="submit"></button> |
btn:b | <button type="button"></button> |
btn:r | <button type="reset"></button> |
sect | <section></section> |
art | <article></article> |
hdr | <header></header> |
ftr | <footer></footer> |
str | <strong></strong> |
ol+ | <ol> <li></li> </ol> |
ul+ | <ul> <li></li> </ul> |
dl+ | <dl> <dt></dt> <dd></dd> </dl> |
table+ | <table> <tr> <td></td> </tr> </table> |
tr+ | <tr> <td></td> </tr> |
c | <!-- Комментарий --> |
cc:ie6 | <!--[if lte IE 6]> <![endif]--> |
cc:ie | <!--[if IE]> <![endif]--> |
cc:noie | <!--[if !IE]><!--> <!--<![endif]--> |
Любой тег | div <div></div> span <span></span> Любой другой тег <tagname></tagname> |
Помимо HTML и CSS сокращений, Emmet также имеет и XSL сокращения. Подробнее в документации Emmet.