Bảng tra cứu nhanh Emmet
Tài liệu tra cứu Emmet có thể tìm kiếm và in: toán tử lồng nhau, nhân bản, nhóm, thuộc tính, viết tắt HTML và CSS. Miễn phí.
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
Không có mục nào khớp với “:q”.
Giới thiệu về Bảng tra cứu nhanh Emmet
Bảng tra cứu Emmet này biến cú pháp viết tắt thành một trang có thể tìm kiếm: toán tử lồng nhau, nhân bản và đánh số, nhóm, cú pháp ID, class và thuộc tính, văn bản và tên thẻ ngầm định, khung HTML, các viết tắt HTML phổ biến, viết tắt CSS, giá trị và đơn vị CSS, tiền tố nhà cung cấp, và các thao tác bao bọc và trình soạn thảo.
Emmet tự hoàn vốn khi các toán tử đã thuộc: các ký tự con, anh em và leo lên, phép nhân và đánh số $ sinh ra cả một danh sách, và các cách viết tắt CSS mở rộng một thuộc tính cùng giá trị của nó từ ba chữ cái. Mỗi hàng cho thấy cách viết tắt và đoạn đánh dấu hoặc CSS mà nó mở rộng thành.
Như mọi bảng tra cứu trong nhóm này, nó miễn phí và chạy phía máy khách: lọc hàng trực tiếp bằng ô tìm kiếm, nhảy giữa các phần bằng mục lục cố định, sao chép bất kỳ cách viết tắt nào chỉ với một cú nhấp và in trang để tham khảo trong trình soạn thảo của bạn.
Cách sử dụng Bảng tra cứu nhanh Emmet
- Mở bảng và xem các phần, từ Toán tử lồng nhau đến Thao tác bao bọc & trình soạn thảo.
- Tìm một từ khóa như numbering, boilerplate hoặc grid để lọc mọi hàng trực tiếp.
- Nhảy tới Viết tắt CSS khi bạn muốn các cách viết tắt thuộc tính thay vì viết tắt đánh dấu.
- Nhấp vào một cách viết tắt hoặc biểu tượng sao chép của nó để sao chép vào khay nhớ tạm, rồi mở rộng nó trong trình soạn thảo.
- Dùng In để có bản giấy của toàn bộ tài liệu tham khảo Emmet.
Câu hỏi thường gặp
Mười một phần: toán tử lồng nhau, nhân bản và đánh số, nhóm, ID, class và thuộc tính, văn bản và tên thẻ ngầm định, khung HTML, các viết tắt HTML phổ biến, viết tắt CSS, giá trị và đơn vị CSS, tiền tố nhà cung cấp, và thao tác bao bọc và trình soạn thảo.
Có: Emmet được tích hợp sẵn trong VS Code và cũng đi kèm hầu hết trình soạn thảo và IDE hiện đại khác, nên các cách viết tắt trên bảng này mở rộng được ngay.
Phần nhân bản và đánh số cho thấy toán tử * với ký hiệu giữ chỗ $, gồm cả đệm số 0 và độ lệch bắt đầu, để một cách viết tắt sinh ra danh sách phần tử được đánh số.
Có. Nhấp vào bất kỳ hàng nào hoặc biểu tượng sao chép của nó và cách viết tắt được sao chép ngay lập tức.
Có, hoàn toàn miễn phí và chạy trong trình duyệt của bạn mà không cần đăng nhập.
Tìm kiếm phổ biến
emmet cheat sheet
viết tắt emmet
phím tắt html emmet
viết tắt css emmet
tài liệu tham khảo cú pháp emmet
phím tắt emmet vs code
emmet nhân bản và đánh số
Cần trợ giúp?
Gặp sự cố với công cụ này? Hãy cho đội ngũ của chúng tôi biết.