浏览帮助文章

Emmet 缩写

在 HTML/CSS 中用 Tab 展开 Emmet：完整 HTML 语法与 CSS 属性词典，以及 lorem、pixem、pixcm、piximg-*、pixreset、pixfont、pixicon、pixcdn 等自定义指令。

什么是 Emmet？

Emmet 让你用简短缩写快速生成 HTML 标签、CSS 属性或占位文本。HTML 与 CSS 编辑器已内置，无需额外配置。编辑器工具栏的键盘图标打开速查弹窗后，可在 Emmet 页签搜索本文的缩写词典（输入 max 即可找到 maw → max-width）。

如何展开

在 HTML 或 CSS 面板光标处输入缩写后按 Tab 展开。输入过程中可按 Ctrl+Shift+Space（Mac 为 Control+Shift+Space）打开 Emmet 补全。HTML 编辑器中 lorem、pixem、pixcm、piximg-*、pixfont、pixicon-* 与 pixcdn 支持 Tab 展开；CSS 编辑器中可用 pixreset、pixbody、pixc、pixfont，以及 Font Awesome 等纯 CSS 的 pixicon-*；pixcdn 与 Lucide / Feather 仍在 HTML/JS。

常用 HTML 缩写

可组合标签、class、ID、属性与乘法（*N）。展开后 Tab 会在可编辑位置（如 class 名、链接文字）间跳转。完整运算符与常用片段见下一节。

ul>li.item$*3
缩写含义展开示例
div空 div<div></div>
div.container带 class 的 div<div class="container"></div>
ul>li*33 项无序列表<ul><li></li><li></li><li></li></ul>
table>tr*3>td*43 行 × 4 列表格<table>…</table>
a[href=#]带 href 的链接<a href="#"></a>
div>p+loremdiv 内含段落 + lorem 文本<div><p>…</p></div>

HTML 语法与片段

任意单词都能展开成标签（foo → <foo></foo>）。下面是嵌套运算符、属性写法，以及编辑器内置的常用片段。缩写中间不能有空格。

缩写含义展开示例
>子元素div>ul>li
+同级元素div+p+bq
^回到上一层div>p>span^bq
*N重复 N 次ul>li*5
()分组div>(header+footer)
.class #idclass 与 iddiv.page#hero
[attr]自定义属性a[href=# target=_blank]
$重复项序号ul>li.item$*3
{}元素文本a{Click me}

文档与资源

缩写展开示例
! / html:5<!DOCTYPE html>…html>head+body
dochtml>head+body
link:css<link rel="stylesheet" href="style.css">
script:src<script src=""></script>
meta:vp<meta name="viewport" content="width=device-width…">

链接

缩写展开示例
a<a href=""></a>
a:blank<a href="http://" target="_blank" rel="noopener noreferrer">
a:mail<a href="mailto:"></a>
a:tel<a href="tel:+"></a>

图片与媒体

缩写展开示例
img<img src="" alt="">
img:s / img:srcset<img srcset="" src="" alt="">
pic<picture></picture>
video<video src=""></video>
audio<audio src=""></audio>

表单

缩写展开示例
form<form action=""></form>
input:text / input:t<input type="text">
input:email<input type="email">
input:c / input:checkbox<input type="checkbox">
btn<button></button>
btn:s / button:submit<button type="submit">
label<label for=""></label>
select<select name="" id=""></select>

语义标签别名

缩写展开示例
hdr<header></header>
ftr<footer></footer>
sect<section></section>
art<article></article>
mn<main></main>
bq<blockquote></blockquote>
fig<figure></figure>
figc<figcaption></figcaption>
dlg<dialog></dialog>
str<strong></strong>

CSS 缩写

CSS 面板中 Emmet 以相同方式展开属性缩写。未写单位时整数默认 px、小数默认 em。HTML 与 CSS 行首输入 // 会转为注释（HTML 为 <!-- -->，CSS 为 /* */）；CSS 输入 /* 会自动补上关闭符；pixc 再按 Tab 也可在 CSS 插入注释。完整属性对照见文末词典。

缩写含义展开示例
t10top: 10pxtop: 10px;
m10margin: 10pxmargin: 10px;
p20padding: 20pxpadding: 20px;
w100pwidth: 100%width: 100%;
bdrs5border-radius: 5pxborder-radius: 5px;
bdrs50pborder-radius: 50%border-radius: 50%;
d:fdisplay: flexdisplay: flex;
pos:aposition: absoluteposition: absolute;

CSS 写法规则

属性缩写后直接跟数值，不必写冒号：t10 → top: 10px。多个值用连字符分隔；后一个负值用两个连字符。单位别名写在数字后面。也可用属性:关键字（d:f）或末尾 ! 表示 !important。

单位别名

别名单位
p%
eem
xex

数值展开示例

缩写展开示例
t10top: 10px;
m10margin: 10px;
m10-20margin: 10px 20px;
m-10--20margin: -10px -20px;
m1.5margin: 1.5em;
w100pwidth: 100%;
m10p30e5xmargin: 10% 30em 5ex;
bdrs50pborder-radius: 50%;
c#3color: #333;
bd5#0sborder: 5px #000 solid;
fw400font-weight: 400;
d:fdisplay: flex;
pos:aposition: absolute;
p!padding: !important;

CSS 属性词典

下列缩写与官方 Emmet CSS snippets 对齐。找到属性后可直接加数值，例如 bdrs50p → border-radius: 50%。单角圆角是 bdtlrs / bdtrrs / bdblrs / bdbrrs（bdrst 是 border-right-style，不是圆角）。可用浏览器查找（⌘F / Ctrl+F）。

@ 规则

缩写属性
@f@font-face
@ff@font-face (full src)
@i / @import@import url()
@kf@keyframes
@m / @media@media

定位

缩写属性
posposition
ttop
rright
bbottom
lleft
zz-index
iinset
ibinset-block
iiinset-inline
ibsinset-block-start
ibeinset-block-end
iisinset-inline-start
iieinset-inline-end

显示、弹性与网格

缩写属性
ddisplay
flfloat
fxflex
fxbflex-basis
fxdflex-direction
fxfflex-flow
fxgflex-grow
fxshflex-shrink
fxwflex-wrap
acalign-content
aialign-items
asalign-self
jcjustify-content
jijustify-items
jsjustify-self
ordorder
ggap
cgcolumn-gap
rgrow-gap
gdgrid
gtgrid-template
gtcgrid-template-columns
gtrgrid-template-rows
gtagrid-template-areas
gggrid-gap
gcggrid-column-gap
grggrid-row-gap
gacgrid-auto-columns
gargrid-auto-rows
gafgrid-auto-flow
gcgrid-column
gcsgrid-column-start
gcegrid-column-end
grgrid-row
grsgrid-row-start
gregrid-row-end
gagrid-area

盒模型

缩写属性
mmargin
mtmargin-top
mrmargin-right
mbmargin-bottom
mlmargin-left
mblmargin-block
mimargin-inline
mbsmargin-block-start
mbemargin-block-end
mismargin-inline-start
miemargin-inline-end
ppadding
ptpadding-top
prpadding-right
pbpadding-bottom
plpadding-left
pblpadding-block
pipadding-inline
pbspadding-block-start
pbepadding-block-end
pispadding-inline-start
piepadding-inline-end
w / widwidth
hheight
mawmax-width
mahmax-height
miwmin-width
mihmin-height
mabmax-block-size
maimax-inline-size
mibmin-block-size
miimin-inline-size
bsblock-size
isinline-size
bxszbox-sizing
bxshbox-shadow
araspect-ratio

边框与圆角

缩写属性
bdborder
bdcborder-color
bdsborder-style
bdwborder-width
bdrsborder-radius
bdtlrsborder-top-left-radius
bdtrrsborder-top-right-radius
bdblrsborder-bottom-left-radius
bdbrrsborder-bottom-right-radius
bdtborder-top
bdrborder-right
bdbborder-bottom
bdlborder-left
bdtcborder-top-color
bdrcborder-right-color
bdbcborder-bottom-color
bdlcborder-left-color
bdtsborder-top-style
bdrstborder-right-style
bdbsborder-bottom-style
bdlsborder-left-style
bdtwborder-top-width
bdrwborder-right-width
bdbwborder-bottom-width
bdlwborder-left-width
bdclborder-collapse
bdspborder-spacing
bdiborder-image
bdblborder-block
bdinborder-inline
bbs / bdblsborder-block-start
bbe / bdbleborder-block-end
bdisborder-inline-start
bdieborder-inline-end

背景

缩写属性
bgbackground
bg:nbackground: none
bgcbackground-color
bgibackground-image
bgrbackground-repeat
bgpbackground-position
bgpxbackground-position-x
bgpybackground-position-y
bgszbackground-size
bgcpbackground-clip
bgobackground-origin
bgabackground-attachment
lgbackground-image: linear-gradient()

文字

缩写属性
ccolor
crcolor: rgb()
cracolor: rgba()
ffont
fffont-family
fszfont-size
fwfont-weight
fsfont-style
fvfont-variant
fstfont-stretch
fszafont-size-adjust
fdfont-display
fvsfont-variation-settings
lhline-height
tatext-align
taltext-align-last
tdtext-decoration
tttext-transform
titext-indent
tjtext-justify
ltsletter-spacing
tshtext-shadow
tovtext-overflow
twtext-wrap
vavertical-align
whswhite-space
wobword-break
wowword-wrap
wosword-spacing
tetext-emphasis

溢出、透明与轮廓

缩写属性
ovoverflow
ovxoverflow-x
ovyoverflow-y
vvisibility
op / opaopacity
curcursor
clclear
oloutline
olcoutline-color
olsoutline-style
olwoutline-width
olooutline-offset
ususer-select
apappearance
bfvbackface-visibility
rszresize

变换、过渡与动画

缩写属性
trftransform
trfotransform-origin
trfstransform-style
trstransition
trsdetransition-delay
trsdutransition-duration
trsptransition-property
trstftransition-timing-function
animanimation
animnanimation-name
animduranimation-duration
animdelanimation-delay
animdiranimation-direction
animtfanimation-timing-function
animfmanimation-fill-mode
animicanimation-iteration-count
animpsanimation-play-state

列表、表格与多栏

缩写属性
lislist-style
lisilist-style-image
lisplist-style-position
listlist-style-type
tbltable-layout
cntcontent
colmcolumns
colmccolumn-count
colmfcolumn-fill
colmgcolumn-gap
colmrcolumn-rule
colmrccolumn-rule-color
colmrscolumn-rule-style
colmrwcolumn-rule-width
colmscolumn-span
colmwcolumn-width

其他

缩写属性
cm/* comment */
cpclip
coicounter-increment
corcounter-reset
cpscaption-side
ecempty-cells
oriorientation
orporphans
widowidows
wmwriting-mode
qquotes
sbscroll-behavior
spbsscroll-padding-block-start
spbescroll-padding-block-end
spisscroll-padding-inline-start
spiescroll-padding-inline-end
marmax-resolution
mirmin-resolution
zomzoom
fftfont-family: Times
ffafont-family: Arial
ffvfont-family: Verdana
fsmfont-smoothing
feffont-effect
femfont-emphasize
fempfont-emphasize-position
femsfont-emphasize-style
bgbkbackground-break
bdbiborder-bottom-image
bdbkborder-break
bdbliborder-bottom-left-image
bdbriborder-bottom-right-image
bdciborder-corner-image
bdfborder-fit
bdlenborder-length
bdliborder-left-image
bdriborder-right-image
bdtiborder-top-image
bdtliborder-top-left-image
bdtriborder-top-right-image
ovsoverflow-style
pgbapage-break-after
pgbbpage-break-before
pgbipage-break-inside
qenquotes (EN)
qruquotes (RU)
thtext-height
totext-outline
trtext-replace
whscwhite-space-collapse

占位文本

HTML 与 CSS 中有多种占位与辅助工具：Emmet lorem 生成经典拉丁假文；pixem 与 pixcm 插入可读英文或简体中文 UI 文案；piximg-* 从 Picsum、pravatar、randomuser.me 或 DiceBear 插入随机占位图或头像；pixfont 插入 CDN Fonts 或 Google Fonts 样式表；pixicon-* 可直插常用图标 CDN。

工具缩写示例语言风格计量
Emmet loremlorem / lorem30拉丁文经典 Lorem ipsum单词
pixempixem / pixemN英文可读 UI 文案词
pixcmpixcm / pixcmN简体中文可读 UI 文案字
piximg-picsumpiximg-picsum / piximg-picsum1200x600HTML / CSSPicsum 随机摄影图像素（宽×高）
piximg-avatarpiximg-avatar / piximg-avatar128—pravatar 真人头像像素（裸缩写无路径边长；或用 64/128/256 预设）
piximg-randomuserpiximg-randomuser / piximg-randomuser128—randomuser.me 真人肖像像素（映射 thumb/med/large）
piximg-dicebearpiximg-dicebear / piximg-dicebear-lorelei—DiceBear 插画头像像素（正方形边长）
pixfontpixfont / pixfont-inter—CDN Fonts 网页字体字体族

Emmet lorem

输入 lorem 缩写后按 Tab 展开。字数按单词计数。

缩写含义展开示例
lorem默认段落（约 30 词）—
lorem30指定 N 个单词的段落30
lorem*3N 段正文（每段默认长度）3

pixem、pixcm、piximg-*、pixreset、pixfont 与 pixicon（自定义指令）

pixcm 插入简体中文 UI 占位文本，按字计数；pixem 插入英文 UI 文案，按词计数；piximg-picsum / piximg-avatar / piximg-randomuser / piximg-dicebear 插入 Picsum 随机图、pravatar 真人头像、randomuser.me 真人肖像或 DiceBear 插画头像。CSS 面板可用 pixreset 插入通配符最小清零，或 pixreset-all 插入完整 reset；两者都不含伪元素，以免盖掉图标字体。pixbody 插入居中铺满视口的 body，光标停在 background-color 后方便手写颜色。pixc 插入块注释并把光标停在中间。pixfont 打开网页字体搜索弹窗（CDN Fonts / Google Fonts）；pixfont-<slug> 仍直插 CDN Fonts 预设；pixicon-<slug> 直插常用图标 CDN（如 Font Awesome、Lucide）。文案类支持长度、多段与 -t（标题）等字段后缀；piximg-* 支持尺寸与 -url（仅 URL）。完整缩写表见自定义指令专题。

缩写含义展开示例
piximg-picsumPicsum 占位图（随机宽×高，完整 img 标签）<img src="https://picsum.photos/…" alt="">
piximg-picsum1200x600Picsum 占位图（1200×600，完整 img 标签）<img src="https://picsum.photos/seed/pix42/1200/600" alt="">
piximg-avatarpravatar 真人头像（默认尺寸，路径无边长）<img src="https://i.pravatar.cc/?img=12" alt="">
piximg-randomuser128randomuser.me 真人肖像（128×128）<img src="https://randomuser.me/api/portraits/med/men/42.jpg" alt="">
piximg-dicebearDiceBear 插画头像（avataaars）<img src="https://api.dicebear.com/7.x/avataaars/png?…" alt="">
piximg-picsum-url仅 Picsum 图片 URL（随机宽×高）https://picsum.photos/…
pixcm中文正文（约 30 字）—
pixcmN指定 N 字的中文正文20
pixem英文正文（约 30 词）—
pixemN指定 N 词的英文正文20
pixcm-t / pixem-name字段型占位（标题、姓名、电话等）—
pixresetCSS 清零（最小通配符）* { margin: 0; … }
pixreset-allCSS 清零（完整 reset）—
pixbody居中 body（光标停在 background-color）body { min-height: 100vh; … }
pixcCSS 块注释（光标停在开闭定界符中间）/* */
pixfont搜索网页字体（打开弹窗）打开网页字体搜索弹窗
pixfont-inter插入 CDN Fonts 预设字体<link href="https://fonts.cdnfonts.com/css/inter" rel="stylesheet">

自定义指令完整指南