Бърза справка за Emmet
Справочник за Emmet с търсене и печат: оператори за влагане, умножение, групиране, атрибути, HTML и CSS съкращения. Безплатно.
Nesting operators
8div>ul>li
> child: li inside ul inside div
div+p+blockquote
+ sibling: elements on the same level
div+div>p>span+em
Combine child and sibling operators
div+div>p>span+em^bq
^ climb up: bq is a sibling of p
div+div>p>span+em^^^bq
Each ^ climbs one more level up
nav>ul>li*4>a
A four-link navigation in one line
ul>li>a[href=#]{Link}
Nest, attribute and text combined
div>p+p+p
One parent, three paragraph children
Multiplication & numbering
9ul>li*5
* repeats the element 5 times
li.item$*3
$ = counter: item1, item2, item3
li.item$$$*3
Pad with zeros: item001, item002...
li.item$@-*3
@- counts down: item3, item2, item1
li.item$@3*5
@3 starts counting at 3 (3..7)
li.item$@-3*5
Count down ending at 3 (7..3)
h$[title=item$]{Header $}*3
$ works in tag, attribute and text
ul>li*3>a{Link $}
Counter follows the repeated parent
td*5
Five empty table cells
Grouping
8div>(header>ul>li*2>a)+footer>p
() groups a subtree; footer stays in div
(div>dl>(dt+dd)*3)+footer>p
Nested groups, repeated dt/dd pairs
(li>a)*5
Multiply a whole group, not one tag
ul>(li>a{Item $})*4
Grouped repeat with counters
(header+main+footer)
Page skeleton as one abbreviation
table>(tr>td*3)*4
4x3 table via nested groups
(div.col)*2
Two sibling columns
section>(h2+p)*3
Repeat heading + paragraph blocks
ID, class & attributes
10div#header
# sets the id attribute
div.title
. sets the class attribute
p.class1.class2.class3
Chain multiple classes
form#search.wide
Combine id and class
#page
No tag: div is implied
.card
Same: expands to div.card
td[title="Hello" colspan=3]
[] sets custom attributes
a[href=# data-id=5]
Multiple attributes, space-separated
input[type=text required]
Boolean attributes need no value
img[src=logo.png alt=Logo]
Quotes optional for simple values
Text & implicit tag names
9a{Click me}
{} inserts text into the element
a{click}+b{here}
<a>click</a><b>here</b>
a>{click}+b{here}
<a>click<b>here</b></a>: b inside a
p>{Text }+a{link}+{ more}
Mix raw text nodes and elements
.wrap>.content
div is implied at block level
em>.hint
Inside inline: span is implied
ul>.item*3
Inside ul/ol: li is implied
table>.row>.col
tr and td are implied in tables
select>.opt*3
option is implied inside select
HTML boilerplate
10!
Full HTML5 boilerplate (html:5)
html:5
Same: doctype, head, meta, body
!!!
Just the <!DOCTYPE html> line
meta:utf
<meta charset="UTF-8">
meta:vp
Responsive viewport meta tag
link
<link rel="stylesheet" href="">
link:css
Stylesheet link to style.css
link:favicon
Favicon link tag
script:src
<script src=""></script>
doc
Document without the doctype
Common HTML abbreviations
14a
<a href=""></a>
a:mail
<a href="mailto:"></a>
img
<img src="" alt="">
btn
<button></button>
form:post
Form with method="post"
input:email
Email input with name and id
input:password
Password input
input:checkbox / input:radio
Checkbox / radio inputs
input:submit
Submit button input
sel>opt*3
Select with three options
label+input
Label and input pair
tarea
<textarea></textarea>
table+
table>tr>td expanded
ol+ / ul+ / dl+
List with its first item(s)
CSS abbreviations
15m10
margin: 10px;
p10-20
padding: 10px 20px;
m10-auto
margin: 10px auto;
w100 / h50
width: 100px; / height: 50px;
df
display: flex;
dib / dn
display: inline-block; / none;
pos:a / pos:r / pos:f
position absolute/relative/fixed
t0+l0
top: 0; left: 0;
fz14
font-size: 14px;
fwb / fw700
font-weight: bold / 700
c#f00
color: #f00;
bgc#fff
background-color: #fff;
bd+
border: 1px solid #000;
tac / tar
text-align: center / right
bdrs5
border-radius: 5px;
CSS values & units
11m10
Integers default to px: 10px
m10p
p suffix = percent: 10%
m1.5
Floats default to em: 1.5em
m10e
e suffix = em: 10em
m10r
r suffix = rem: 10rem
m10x
x suffix = ex unit
w100p
width: 100%;
m-10
Negative value: margin: -10px;
m10-20-30-40
Four values: top right bottom left
lh1.5
line-height: 1.5em (or unitless)
fz2r
font-size: 2rem;
Vendor prefixes
9-bdrs
Prefix with all vendors + plain
-wm-trf
Only -webkit- and -moz- variants
-w-bxsh
w=webkit, m=moz, s=ms, o=opera
trf:r
transform: rotate(angle);
trf:s
transform: scale(x, y);
trs
transition shorthand
anim
animation shorthand
us:n
user-select: none;
-super-foo
Unknown props get prefixed too
Wrap & editor actions
11Wrap with Abbreviation
Wrap the selection in an abbreviation
ul>li*
While wrapping: one li per line
a[href=$#]{$#}
$# outputs the wrapped content
Balance (outward/inward)
Select the matching tag pair
Go to Matching Pair
Jump between open and close tags
Remove Tag
Delete a tag, keep its children
Split/Join Tag
Toggle <p></p> and <p/> forms
Toggle Comment
Comment out the current tag/rule
Increment Number by 1/10/0.1
Bump a number under the cursor
Select Next/Previous Item
Hop between tags, attrs, classes
Update Image Size
Insert real width/height of an img
Няма запис, който да съответства на „:q“.
За Бърза справка за Emmet
Тази бърза справка за Emmet превръща синтаксиса на съкращенията в една страница за търсене: оператори за влагане, умножение и номериране, групиране, синтаксис за ID, клас и атрибути, текст и имплицитни имена на тагове, HTML шаблона, обичайни HTML съкращения, CSS съкращения, CSS стойности и единици, представки за доставчици, и действията за обвиване и редактор.
Emmet си заслужава, щом операторите се затвърдят: символите за дете, съседен елемент и изкачване нагоре, умножението и номерирането с $, които генерират цял списък, и CSS съкращенията, които разширяват свойство и стойността му от три букви. Всеки ред показва съкращението и маркирането или CSS кода, в който то се разгъва.
Както всяка бърза справка в тази група, тя е безплатна и от страна на клиента: филтрирайте редовете на живо с полето за търсене, скачайте между разделите с фиксираното съдържание, копирайте всяко съкращение с едно щракване и отпечатайте страницата за справка в редактора си.
Как да използвате Бърза справка за Emmet
- Отворете справката и прегледайте разделите, от Оператори за влагане до Обвиване и действия на редактора.
- Търсете ключова дума като номериране, шаблон или grid, за да филтрирате всеки ред на живо.
- Отидете на CSS съкращения, когато искате съкращенията за свойства, а не за маркиране.
- Щракнете върху съкращение или неговата иконка за копиране, за да го копирате в клипборда си, после го разгънете в редактора си.
- Използвайте Печат за хартиено копие на пълния справочник за Emmet.
Често задавани въпроси
Единадесет раздела: оператори за влагане, умножение и номериране, групиране, ID, клас и атрибути, текст и имплицитни имена на тагове, HTML шаблона, обичайни HTML съкращения, CSS съкращения, CSS стойности и единици, представки за доставчици, и обвиване и действия на редактора.
Да: Emmet е вграден във VS Code и се доставя с повечето други съвременни редактори и IDE-та, така че съкращенията от тази справка се разгъват веднага, без настройка.
Разделът за умножение и номериране показва оператора * с плейсхолдъри $, включително допълване с нули и начални отмествания, така че едно съкращение генерира номериран списък от елементи.
Да. Щракнете върху който и да е ред или иконката му за копиране и съкращението веднага се копира.
Да, напълно безплатен е и работи в браузъра ви без вход в акаунт.
Популярни търсения
бърза справка за emmet
съкращения в emmet
html съкращения в emmet
css съкращения в emmet
справочник за синтаксиса на emmet
съкращения на emmet във vs code
умножение и номериране в emmet
Нуждаете се от помощ?
Открихте проблем с този инструмент? Кажете ни.