Главная
Блог
Все сокращения и команды Emmet (Таблица)

Все сокращения и команды Emmet (Таблица)

Автор

Анатолий Ахматов

На чтение

3:27 мин

Обновлено

13.08.2021

Всем привет друзья! Сегодня вы научитесь использовать emmet и начнете кодить со скоростью света.

Для чего нужны сокращения?

В основном, большинство текстовых редакторов позволяют сохранять и повторно использовать куски кода, под названием “фрагменты”, но чтобы использовать фрагменты их необходимо заранее определить, это не всегда удобно. Так вот, команды Emmet - готовые сокращения для вывода определенных кусочков кода.

Как пользоваться?

В популярных редакторах кода - Sublime Text 3, Atom и Visual Studio Code, Brackets после установки emmet как плагина сразу появляется возможность использовать сокращения.

Обычно, чтобы протестировать работают ли сокращения, я открываю пустой html файл и пишу !. Чтобы сокращение превратилось в полноценный кусок кода необходимо нажать tab.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

</body>

</html>

Если восклицательный знак превратился в подобный код, значит emmet отлично работает. Поехали дальше

HTML аббревиатуры

Инициализаторы

! - это аббревиатура для создания в новом HTML документе стартовой разметки, вы можете использовать и другие варианты этого сокращения.

html:5 или !	HTML5 doctype
html:xt	XHTML transitional doctype
html:4s	HTML4 strict doctype

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:geform: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>

Классы ID и атрибуты

Классы

Чтобы добавить к создаваемому тегу класс необходимо прописать его в таком виде: тег.класс

h1.title даст такой результат <h1 class="title"></h1>

Для добавления ID к элементу используем такую запись: тег#ID

h1#title даст такой результат <h1 id="title"></h1>

Атрибуты

Чтобы добавить к элементу атрибут нербходимо использовать такой вид записи: тег[атрибут='значение'].

h1[name='title'] даст такой результат <h1 name="title"></h1> значение можно не указывать h1[active] выдаст <h1 active=""></h1>

Вложенность элементов

Используя селекторы > и + можно создать соответственно, дочерние и соседние элементы, а с помощью селектора ^ можно поднять элемент на уровень выше в иерархии элементов.

p>span <p><span></span></p> p+span <p></p> <span></span> p>span^p <p><span></span></p> <p></p>

Группировка

Для того чтобы работать с сокращениями эффективно, нужно использовать группировку операторов - работает как в математике)

(h2>span)+(p>span) <h2><span></span></h2> <p><span></span></p>

Добавление контента

В ходе написания цепочки сокращений вам может понадобится сразу добавить текст в элемент, сделать это вы можете используя фигурные скобки {}

p{Это мой текст} <p>Это мой текст</p> h1.title{Заголовок}+(div>p>span{Текст}) <h1 class="title">Заголовок</h1> <div> <p><span>Текст</span></p> </div>

Умножение

Вы можете определить сколько элементов должно выть выведено с помощью оператора умножения *

ul>li*3 <ul> <li></li> <li></li> <li></li> </ul>

Нумерация

Мы можем сделать изменение названия класса, ID или атрибута с каждым следующим повторением, для этого нужно всего лишь добавить к ним знак доллара $

ul>li.item$*10 <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> <li class="item8"></li> <li class="item9"></li> <li class="item10"></li> </ul>

CSS аббревиатуры

Основа работает так-же как и с HTML - пишем сокращение и жмем TAB, но есть некоторые различия, например добавление значение производиться по другому, конструктор вложенности не поддерживается и тд. Их мы рассмотрим после тегов.

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;