ورقة مرجعية لـ Emmet

جميع الأدوات
مجاني

مرجع Emmet قابل للبحث والطباعة — عوامل التداخل والتكرار والتجميع والسمات واختصارات HTML وCSS. مجاني.

Nesting operators

8
div>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

9
ul>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

8
div>(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

10
div#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

9
a{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

14
a
<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

15
m10
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

11
m10
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

11
Wrap 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

  1. افتح الورقة وراجع الأقسام، من «معاملات التداخل» إلى «إجراءات التغليف والمحرر».
  2. ابحث عن كلمة مفتاحية مثل numbering أو boilerplate أو grid لتصفية كل صف مباشرة.
  3. انتقل إلى «اختصارات CSS» عندما تريد اختصارات الخصائص بدلًا من اختصارات الترميز.
  4. انقر على اختصار أو أيقونة النسخ الخاصة به لنسخه إلى الحافظة، ثم وسّعه في محررك.
  5. استخدم «طباعة» للحصول على نسخة ورقية من مرجع Emmet الكامل.

الأسئلة الشائعة

أحد عشر قسمًا: معاملات التداخل، والمضاعفة والترقيم، والتجميع، والمعرّف والفئة والسمات، والنص وأسماء الوسوم الضمنية، وقالب HTML الجاهز، واختصارات HTML الشائعة، واختصارات CSS، وقيم CSS ووحداتها، وبادئات الموردين، وإجراءات التغليف والمحرر.

نعم — Emmet مدمج في VS Code، ويأتي مع معظم المحررات وبيئات التطوير الحديثة الأخرى أيضًا، لذا تتوسّع الاختصارات في هذه الورقة مباشرةً دون إعداد.

يعرض قسم المضاعفة والترقيم معامل * مع عناصر $ النائبة، بما في ذلك التصفير البادئ وإزاحات البدء، بحيث يولّد اختصار واحد قائمة عناصر مرقّمة.

نعم. انقر على أي صف أو على أيقونة النسخ الخاصة به وسيُنسخ الاختصار فورًا.

نعم، إنه مجاني تمامًا ويعمل في متصفحك دون تسجيل دخول.
شارك هذا
أدوات ذات صلة
ورقة مرجعية لـ HTML مرجع HTML5 قابل للبحث والطباعة — هيكل المستند والوسوم الدلالية والروابط والوسائط والجداول والنماذج والسمات والكيانات. مجاني. مجاني
ورقة CSS المرجعية مرجع CSS قابل للبحث والطباعة — المحددات ونموذج الصندوق وflexbox وgrid والطباعة والانتقالات والميزات الحديثة. مجاني. مجاني
ورقة VS Code المرجعية مرجع Visual Studio Code قابل للبحث والطباعة — اختصارات لوحة المفاتيح للتحرير والتنقل والمؤشر المتعدد والبحث والطرفية. مجاني. مجاني
ورقة JavaScript المرجعية مرجع قابل للبحث والطباعة لـ JavaScript الحديثة — البنية والمصفوفات والسلاسل والكائنات وasync/await وDOM وميزات ES2022+. مجاني. مجاني
ورقة PHP المرجعية مرجع PHP 8.3+ قابل للبحث والطباعة — البنية والسلاسل والمصفوفات والدوال والأصناف والتعدادات والخصائص والميزات الحديثة. مجاني. مجاني
ورقة MySQL المرجعية مرجع MySQL قابل للبحث والطباعة — الاستعلامات والوصلات والفهارس والدوال وأنواع البيانات وأوامر الإدارة. مجاني. مجاني
عمليات البحث الشائعة
emmet cheat sheet اختصارات emmet اختصارات emmet html اختصارات emmet css مرجع بنية emmet اختصارات emmet في vs code ترقيم التكرار في emmet
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.
الإبلاغ عن مشكلة

أضف هذه الأداة المجانية إلى موقعك الخاص — انسخ والصق الكود أدناه.