Личный блог о веб-разработке и веб-дизайне

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

Сокращения в 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.