Справочник сокращений для плагина Emmet

Недавно, я размещал запись в которой говорил о полезных плагинах для Sublime Text 3. Я говорил там о плагине Emmet и описывал его работу.
Если кто то не видел, эту запись — вы можете перейти на неё по этой ссылке http://prog-time.ru/poleznye-plaginy-dlya-sublime-text-3/

Если кратко говорить о плагине Emmet, то он помогает быстро набирать код с помощью специальных сокращений. Это значительно облегчает и ускоряет работу. На данный момент, я активно пользуюсь данным плагином. Для быстрого написания, нужно ввести в редактор сокращение и после этого нажать на клавишу «Tab».
Важно, для корректного преобразования кода необходимо что бы курсор находился в конце сокращения. Вы это поймёте кода попробуете активировать сокращение.

Я представил для вас полный список сокращений для HTML и CSS.

Сокращения для Emmet.

Сокращение	Расшифровка сокращения
Базовый синтаксис 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 сокращения для Emmet
!	<!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:get form: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>
CSS сокращения для Emmet
pos	position: relative;
posa	position: absolute;
posr	position: relative;
posf	position: fixed;
t	top: ;
t:a	top: auto;
r	right: ;
r:a	right: auto;
b	bottom: ;
b:a	bottom: auto;
l	left: ;
l:a	left: auto;
z	z-index: ;
za	z-index: auto;
fl	float: left;
fln	float: none;
fr	float: right;
cl	clear: both;
d	display: block;
dn	display: none;
di	display: inline;
dib	display: inline-block;
dt	display: table;
dtc	display: table-cell;
dtr	display: table-row;
v	visibility: hidden;
vv	visibility: visible;
oh	overflow: hidden;
ovv	overflow: visible;
os	overflow: scroll;
oa	overflow: auto;
zm	zoom: 1;
cu	cursor: ;
cup	cursor: pointer;
cud	cursor: default;
cuh	cursor: hand;
cuhe	cursor: help;
cum	cursor: move;
cut	cursor: text;
m	margin: ;
m:a	margin: auto;
mt	margin-top: ;
mta	margin-top: auto;
mr	margin-right: ;
mra	margin-right: auto;
mb	margin-bottom: ;
mba	margin-bottom: auto;
ml	margin-left: ;
mla	margin-left: auto;
p	padding: ;
pt	padding-top: ;
pr	padding-right: ;
pb	padding-bottom: ;
pl	padding-left: ;
bsh	-webkit-box-shadow: inset hoff voff blur color; -moz-box-shadow: inset hoff voff blur color; box-shadow: inset hoff voff blur color;
bshn	-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
w	width: ;
wa	width: auto;
h	height: ;
ha	height: auto;
maw	max-width: ;
mah	max-height: ;
mw	min-width: ;
mh	min-height: ;
f	font: ;
f+	font: 1em Arial,sans-serif;
fw	font-weight: ;
fwn	font-weight: normal;
fwb	font-weight: bold;
fs	font-style: italic;
fsn	font-style: normal;
fsi	font-style: italic;
fz	font-size: ;
ff	font-family: ;
ffs	font-family: serif;
ffss	font-family: sans-serif;
ffm	font-family: monospace;
ffa	font-family: Arial, «Helvetica Neue», Helvetica, sans-serif;
va	vertical-align: top;
vm	vertical-align: middle;
vabl	vertical-align: baseline;
vb	vertical-align: bottom;
vs	vertical-align: sub;
ta	text-align: left;
tac	text-align: center;
tar	text-align: right;
taj	text-align: justify;
td	text-decoration: none;
tdu	text-decoration: underline;
tdo	text-decoration: overline;
tdl	text-decoration: line-through;
tt	text-transform: uppercase;
ttn	text-transform: none;
ttl	text-transform: lowercase;
ts	text-shadow: hoff voff blur #000;
tra	text-shadow: h v blur rgba(0, 0, 0, .5);
ts+	text-shadow: 0 0 0 #000;
tsn	text-shadow: none;
lh	line-height: ;
lts	letter-spacing: ;
ws	white-space: ;
wsn	white-space: normal;
wsnw	white-space: nowrap;
bg	background: #000;
bg+	background: #fff url() 0 0 no-repeat;
bn	background: none;
bgc	background-color: #fff;
bgt	background-color: transparent;
bgi	background-image: url();
bgin	background-image: none;
bgr	background-repeat: ;
bgrn	background-repeat: no-repeat;
bgrx	background-repeat: repeat-x;
bgry	background-repeat: repeat-y;
bga	background-attachment: ;
baf	background-attachment: fixed;
bas	background-attachment: scroll;
bgp	background-position: 0 0;
bgs	-webkit-background-size: ; background-size: ;
bsa	-webkit-background-size: auto; background-size: auto;
c	color: #000;
cra	color: rgba(0, 0, 0, .5);
op	opacity: ;
ct	content: »;
q	quotes: ;
ol	outline: ;
on	outline: none;
tbl	table-layout: ;
cs	caption-side: ;
ec	empty-cells: ;
bd	border: ;
bd+	border: 1px solid #000;
bdn	border: none;
bdc	border-color: #000;
bdi	-webkit-border-image: url(); -moz-border-image: url(); -o-border-image: url(); border-image: url();
bdin	-webkit-border-image: none; -moz-border-image: none; -o-border-image: none; border-image: none;
bf	-webkit-border-fit: repeat; border-fit: repeat;
bdle	border-length: ;
bsp	border-spacing: ;
bds	border-style: ;
bw	border-width: ;
bt	border-top: ;
bt+	border-top: 1px solid #000;
bdtn	border-top: none;
br	border-right: ;
br+	border-right: 1px solid #000;
bdrn	border-right: none;
bb	border-bottom: ;
bb+	border-bottom: 1px solid #000;
bdbn	border-bottom: none;
bl	border-left: ;
bl+	border-left: 1px solid #000;
bdln	border-left: none;
bdrs	-webkit-border-radius: ; -moz-border-radius: ; border-radius: ;
btrr	border-top-right-radius: ;
bdtrs	border-top-left-radius: ;
bbrr	border-bottom-right-radius: ;
bblr	border-bottom-left-radius: ;
lis	list-style: ;
lisn	list-style: none;
lst	list-style-type: ;
lstn	list-style-type: none;
lstd	list-style-type: disc;
lstc	list-style-type: circle;
lsts	list-style-type: square;
lstdc	list-style-type: decimal;
lsi	list-style-image: ;
lsin	list-style-image: none;
!	!important
@f	@font-face { font-family:; src:url(); }
@f+	@font-face { font-family: ‘FontName’; src: url(‘FileName.eot’); src: url(‘FileName.eot?#iefix’) format(’embedded-opentype’), url(‘FileName.woff’) format(‘woff’), url(‘FileName.ttf’) format(‘truetype’), url(‘FileName.svg#FontName’) format(‘svg’); font-style: normal; font-weight: normal; }
@i	@import url();
@m	@media screen { }
anim	-webkit-animation: ; -o-animation: ; animation: ;
ap	-webkit-appearance: none; -moz-appearance: none; appearance: none;
bgie	filter:progid:DXImageTransform .Microsoft.AlphaImageLoader (src=‘x.png’,sizingMethod=‘crop’);
cm	/* Комментарий */
colm	columns: ;
trf	-webkit-transform: ; -moz-transform: ; -ms-transform: ; -o-transform: ; transform: ;
trfr	-webkit-transform: rotate(angle); -moz-transform: rotate(angle); -ms-transform: rotate(angle); -o-transform: rotate(angle); transform: rotate(angle);
trfsc	-webkit-transform: scale(x, y); -moz-transform: scale(x, y); -ms-transform: scale(x, y); -o-transform: scale(x, y); transform: scale(x, y);
trft	-webkit-transform: translate(x, y); -moz-transform: translate(x, y); -ms-transform: translate(x, y); -o-transform: translate(x, y); transform: translate(x, y);
tfo	-webkit-transform-origin: ; -moz-transform-origin: ; -ms-transform-origin: ; -o-transform-origin: ; transform-origin: ;
trs	-webkit-transition: prop time; -moz-transition: prop time; -ms-transition: prop time; -o-transition: prop time; transition: prop time;
trsde	-webkit-transition-delay: time; -moz-transition-delay: time; -ms-transition-delay: time; -o-transition-delay: time; transition-delay: time;
trsdu	-webkit-transition-duration: time; -moz-transition-duration: time; -ms-transition-duration: time; -o-transition-duration: time; transition-duration: time;
trsp	-webkit-transition-property: prop; -moz-transition-property: prop; -ms-transition-property: prop; -o-transition-property: prop; transition-property: prop;
us	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

Советую вам распечатать данный материал, что бы он всегда был под рукой.
Если что то не понятно, напишите об это в комментариях.

Так же посмотрите и другие плагины, облегчающие работу http://prog-time.ru/poleznye-plaginy-dlya-sublime-text-3/12/web/

Справочник сокращений для плагина Emmet

Сокращения для Emmet.

Сокращение

Расшифровка сокращения

Базовый синтаксис Emmet

HTML сокращения для Emmet

CSS сокращения для Emmet

Вам также будет интересно

Добавляем видео с YouTube на сайт через iframe. Дополнительные настройки встраивания видео из Youtube

HTML теги для SEO . Как правильно оптимизировать HTML сайт

Спецсимволы HTML. Как добавить смайлики в HTML

Последние записи

Docker сборка для web-проектов | Nginx, PHP, PgSQL, PgAdmin, Redis, Grafana, Loki

Отправка логов в Telegram. Модуль для Laravel

Создание своего VPN сервера с неограниченным количества устройств

Контакты