Emmet 常用语法速查表
把 Emmet 前端开发最常用的缩写语法整理成速查，写 HTML/CSS 时对照查。
返回 Web 服务HTML 基础 8
! 或 html:5展开 HTML5 文档骨架
div#app<div id="app"></div>
div.container<div class="container"></div>
ul>li*3ul 下生成 3 个 li
ul>li.item$*3li 带递增 class：item1, item2, item3
p>span^divspan 在 p 内，div 与 p 同级（上溯）
a[href="#" title="link"]带属性的 a 标签
img<img src="" alt="">
HTML 常用结构 8
form:postform 带 method="post"
input:text<input type="text">
input:email<input type="email">
btn:submit<button type="submit"></button>
select>option*3select 下 3 个 option
table>tr^tr>td*3两行表格，第二行 3 列
lorem10生成 10 个单词的占位文本
lorem-cn生成中文占位文本（需插件）
CSS 简写 18
w100width: 100px
w100pwidth: 100%
h50height: 50px
m10margin: 10px
m10-20margin: 10px 20px
p10-20-30padding: 10px 20px 30px
bgc#333background-color: #333
c#fffcolor: #fff
fz16font-size: 16px
fw700font-weight: 700
d:fdisplay: flex
d:gdisplay: grid
jc:cjustify-content: center
ai:calign-items: center
pos:aposition: absolute
t0 r0 b0 l0top/right/bottom/left: 0
bd1-s-#cccborder: 1px solid #ccc
br8border-radius: 8px
嵌套与循环 5
div>ul>li*5>a{Item $}嵌套 + 循环 + 文本插值
div+p+bq兄弟节点（+）
{Hello}文本节点
${Item}带编号文本
(#header>ul>li*2>a)+footer>p分组（）组合多个结构
💡 提示
- VSCode 默认内置 Emmet，HTML/CSS/JSX/Pug 文件里直接 Tab 即可展开。
- $ 是递增占位符，$$ 补零（01, 02），$@- 倒序。
- CSS 简写用 - 连接多个值，如 m10-20 展开为 margin: 10px 20px。