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

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

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

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

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

Сокращение

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

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

Дочерний: >
  1. nav>ul>li
  2. <nav>
  3. <ul>
  4. <li></li>
  5. </ul>
  6. </nav>
Соединение: +
  1. div+p+bq
  2. <div></div>
  3. <p></p>
  4. <blockquote></blockquote>
Поместить выше (в дереве HTML): ^
  1. div>p>span+em^bq
  2. <div>
  3. <p><span></span><em></em></p>
  4. <blockquote></blockquote>
  5. </div>
Группировать: ()
  1. div>(header>ul>li)+footer>p
  2. <div>
  3. <header>
  4. <ul>
  5. <li></li>
  6. </ul>
  7. </header>
  8. <footer>
  9. <p></p>
  10. </footer>
  11. </div>
Умножение: *
  1. ul>li*3
  2. <ul>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. </ul>
Нумерация: $
  1. ul>li.item_$*3
  2. <ul>
  3. <li class=”item_1″></li>
  4. <li class=”item_2″></li>
  5. <li class=”item_3″></li>
  6. </ul>
id и class
  1. #header+.class
  2. <div id=”header”></div>
  3. <div class=”class”></div>
  4. #hdr.cl_1.cl_2
  5. <div id=”hdr” class=”cl_1 cl_2″></div>
Атрибуты: []
  1. a[title=”Подсказка ссылки”]
  2. <a href=”” title=”Подсказка ссылки”></a>
  3. td[rowspan colspan title]
  4. <td rowspan=”” colspan=”” title=””></td>
Текст: {}
  1. .class{свободный текст}
  2. <div class=”class”>свободный текст</div>
  3. p>{Кликните }+a{сюда}+{ скорее}
  4. <p>Кликните <a href=””>сюда</a> скорее</p>
Сокращение тегов
  1. .class
  2. <div class=”class”></div>
  3. em>.class
  4. <em><span class=”class”></span></em>
  5. ul>.class
  6. <ul>
  7. <li class=”class”></li>
  8. </ul>
  9. table>.row>.col
  10. <table>
  11. <tr class=”row”>
  12. <td class=”col”></td>
  13. </tr>
  14. </table>

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

!
  1. <!doctype html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”UTF-8″>
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
a
  1. <a href=””></a>
a:link
  1. <a href=”http://”></a>
a:mail
  1. <a href=”mailto:”></a>
base
  1. <base href=””>
br
  1. <br>
link
  1. <link rel=”stylesheet” href=””>
link:css
  1. <link rel=”stylesheet” href=”style.css”>
link:favicon
  1. <link rel=”shortcut icon” type=”image/x-icon”
  2. href=”favicon.ico”>
link:rss
  1. <link rel=”alternate” type=”application/rss+xml”
  2. title=”RSS” href=”rss.xml”>
link:atom
  1. <link rel=”alternate” type=”application/atom+xml”
  2. title=”Atom” href=”atom.xml”>
meta:utf
  1. <meta http-equiv=”Content-Type”
  2. content=”text/html;charset=UTF-8″>
meta:vp
  1. <meta name=”viewport” content=”width=device-width,
  2. user-scalable=no, initial-scale=1.0,
  3. maximum-scale=1.0, minimum-scale=1.0″>
meta:compat
  1. <meta http-equiv=”X-UA-Compatible” content=”IE=7″>
script:src
  1. <script src=””></script>
img
  1. <img src=”” alt=””>
ifr
  1. <iframe src=”” frameborder=”0″></iframe>
emb
  1. <embed src=”” type=””>
obj
  1. <object data=”” type=””></object>
map
  1. <map name=””></map>
map+
  1. <map name=””>
  2. <area shape=”” coords=”” href=”” alt=””>
  3. </map>
area
  1. <area shape=”” coords=”” href=”” alt=””>
form
  1. <form action=””></form>
form:get
form:post
  1. <form action=”” method=”get”></form>
  2. <form action=”” method=”post”></form>
label
  1. <label for=””></label>
input
  1. <input type=”text”>
inp
  1. <input type=”text” name=”” id=””>
input:h
  1. <input type=”hidden” name=””>
input:p
  1. <input type=”password” name=”” id=””>
input:c
  1. <input type=”checkbox” name=”” id=””>
input:r
  1. <input type=”radio” name=”” id=””>
input:f
  1. <input type=”file” name=”” id=””>
input:s
  1. <input type=”submit” value=””>
input:i
  1. <input type=”image” src=”” alt=””>
input:b
  1. <input type=”button” value=””>
input:reset
  1. <input type=”reset” value=””>
select
  1. <select name=”” id=””></select>
select+
  1. <select name=”” id=””>
  2. <option value=””></option>
  3. </select>
opt
  1. <option value=””></option>
tarea
  1. <textarea name=”” id=”” cols=”30″ rows=”10″>
  2. </textarea>
video
  1. <video src=””></video>
audio
  1. <audio src=””></audio>
bq
  1. <blockquote></blockquote>
fst
  1. <fieldset></fieldset>
btn
  1. <button></button>
btn:s
  1. <button type=”submit”></button>
btn:b
  1. <button type=”button”></button>
btn:r
  1. <button type=”reset”></button>
sect
  1. <section></section>
art
  1. <article></article>
hdr
  1. <header></header>
ftr
  1. <footer></footer>
str
  1. <strong></strong>
ol+
  1. <ol>
  2. <li></li>
  3. </ol>
ul+
  1. <ul>
  2. <li></li>
  3. </ul>
dl+
  1. <dl>
  2. <dt></dt>
  3. <dd></dd>
  4. </dl>
table+
  1. <table>
  2. <tr>
  3. <td></td>
  4. </tr>
  5. </table>
tr+
  1. <tr>
  2. <td></td>
  3. </tr>
c
  1. <!– Комментарий –>
cc:ie6
  1. <!–[if lte IE 6]>
  2. <![endif]–>
cc:ie
  1. <!–[if IE]>
  2. <![endif]–>
cc:noie
  1. <!–[if !IE]><!–>
  2. <!–<![endif]–>
Любой тег
  1. div
  2. <div></div>
  3. span
  4. <span></span>
  5. Любой другой тег
  6. <tagname></tagname>

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

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

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

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

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

48
Оставить комментарий

avatar
48 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
45 Авторы комментариев
JeffreymaxJeffreymaxMichaeldusMichaeldusfinsnef Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Noilacoag
Гость

cbd oil hemp cbd buy cbd oil buy cbd oil online [url=https://cbdoilww.com/ ]cbd gummies [/url]

StepFoush
Гость

Worldwide Real Acticin 30gm From Canada [url=http://apcialisle.com/#]Buy Cialis[/url] Viagra Preiswert Billig Cialis Viagra Para Diabeticos

JanleF
Гость

Malegra Dxt No Prescription [url=http://apcialisle.com/#]generic 5mg cialis best price[/url] Allopurinol Long Term Side Effects Buy Cialis Cost Of Generic Viagra

StepFoush
Гость

Is Expired Amoxicillin Dangerous [url=https://apcialisle.com/#]Cialis[/url] Propecia 0.25 Eod Cialis Propecia En Prostata

JanleF
Гость

Amoxicillin Maximum Adult Dose [url=https://buyciallisonline.com/#]Cialis[/url] Viagra A Vendre cheapest cialis 20mg Cialis Cheap Canada

JanleF
Гость

Fedex Macrobid 100mg Get Website [url=https://abcialisnews.com/#]cialis coupons[/url] Is Viamedic Legitimate cialis generic 2017 Viagra 130mg Generic

bemnite
Гость
bemnite

viagra buy online australia https://canadianpharmacystorm.com buy levitra overnight shipping

AlvinCox
Гость
AlvinCox

levitra buy canada order cialis can order levitra online

CharlesGOP
Гость
CharlesGOP

cheap generic levitra online click here viagra sale chemist

Waltonplort
Гость
Waltonplort

can buy viagra las vegas generic viagra online buy viagra in dublin

BarryNaW
Гость
BarryNaW

viagra sale toronto buy ed pills online viagra buy uk no prescription

Jefferykap
Гость
Jefferykap

is it illegal to order viagra online 100mg viagra without a doctor prescription can cialis pills be cut in half

Marvinerulk
Гость
Marvinerulk

order real cialis online http://zithazi.com – Azithromycin best pharmacy to buy cialis

Marvinerulk
Гость
Marvinerulk

legal order viagra online canada http://alexa24ph.com – buy sildenafil buy viagra tablets uk

Marvinerulk
Гость
Marvinerulk

buy viagra usa online http://kaletra24.com – cheap kaletra cheap viagra and cialis

Marvinerulk
Гость
Marvinerulk

levitra professional sale http://zithazi.com – Azithromycin cheapest cialis internet

Marvinerulk
Гость
Marvinerulk

viagra sale high street http://kaletra24.com – buy generic kaletra viagra sale nhs

Marvinerulk
Гость
Marvinerulk

buy cialis 5 mg canada http://zithazi.com – zithromax price buy jelly viagra online

Marvinerulk
Гость
Marvinerulk

viagra sale canada http://zithazi.com – zithromax Azithromycin cialis for sale in us

Marvinerulk
Гость
Marvinerulk

where to order viagra for women http://tadal24ph.com – cialis coupon online viagra

Marvinerulk
Гость
Marvinerulk

cheap online viagra no prescription http://alexa24ph.com – buy sildenafil viagra cialis buy online

Marvinerulk
Гость
Marvinerulk

can you just buy viagra http://aralenph.com – alaren online where can i buy a viagra

AlfredAdvog
Гость
AlfredAdvog

buy viagra
buy viagra online usa

AlfredAdvog
Гость
AlfredAdvog
AlfredAdvog
Гость
AlfredAdvog

cheap viagra
how to order cialis online

AlfredAdvog
Гость
AlfredAdvog

generic viagra
viagra cheap real

AlfredAdvog
Гость
AlfredAdvog

buy viagra
daily cialis pills

AlfredAdvog
Гость
AlfredAdvog

buy sildenafil
viagra sale leeds

AlfredAdvog
Гость
AlfredAdvog

buy sildenafil
order viagra overnight delivery

AlfredAdvog
Гость
AlfredAdvog
AlfredAdvog
Гость
AlfredAdvog

sildenafil
buy viagra melbourne australia

AlfredAdvog
Гость
AlfredAdvog

buy sildenafil
viagra men sale

DennisLof
Гость
DennisLof

viagra vs cialis generic cialis
daily use of cialis

DennisLof
Гость
DennisLof

generic cialis without prescription cialis online
cialis 20mg

DonaldTwill
Гость
DonaldTwill

what helps viagra work better buy viagra
over counter viagra walgreens

DonaldTwill
Гость
DonaldTwill

generic viagra available buy sildenafil online
natural viagra alternatives that work

JosephDiona
Гость
JosephDiona

what are the side effects of cialis cialis canada
canadian viagra cialis

JosephDiona
Гость
JosephDiona

cialis erection penis 5mg cialis
cialis vs levitra

Thomasreeld
Гость
Thomasreeld

when will viagra become generic: best price 100mg generic viagra cheap cialis and levitra

Thomasreeld
Гость
Thomasreeld

sildenafil citrate generic viagra 100mg: generic viagra cheap viagra inurl /profile/

JohnnieQuabs
Гость
JohnnieQuabs

viagra without doctor prescription amazon comfortis without vet prescription how to get prescription drugs without doctor onlinepharmacyero.com

JohnnieQuabs
Гость
JohnnieQuabs

carprofen without vet prescription meds online without doctor prescription ed meds online without doctor prescription onlinepharmacyero.com

PutinObeft
Гость

Putin – excel training – https://www.youtube.com/c/ExcelStore excel training excel courses excel lessons sql training sql courses sql lessons

finsnef
Гость

[url=https://timeblock.ru/read/frequently-asked-question/]timeblock 4 monatspackung[/url] или [url=https://timeblock.ru/category/raskazy-o-timeblock/]nivea крем морщин[/url]

https://timeblock.ru/category/intervyu/

Michaeldus
Гость
Michaeldus

price of cialis cheap cialis

Michaeldus
Гость
Michaeldus
Jeffreymax
Гость
Jeffreymax

canada price on cialis: cialis without doctor prescription

Jeffreymax
Гость
Jeffreymax

cialis without a doctor’s prescription: 30ml liquid cialis