LaoHandDeveloper Cheatsheet

Emmet Cheatsheet - Emmet Abbreviation & Syntax Reference

All essential Emmet commands organized by use case, with 39+ entries you can copy and run directly. Find the right command fast when you need it.

Web Services·39 commands·Last updated 2026-07-21
emmethtmlcss前端
Back to Web Services

HTML Basics 8

! 或 html:5⧉
Expand HTML5 document skeleton
div#app⧉
<div id="app"></div>
div.container⧉
<div class="container"></div>
ul>li*3⧉
3 li elements under ul
ul>li.item$*3⧉
li with incrementing class: item1, item2, item3
p>span^div⧉
span inside p, div sibling of p (climb-up)
a[href="#" title="link"]⧉
a tag with attributes
img⧉
<img src="" alt="">

Common HTML Structures 8

form:post⧉
form with method="post"
input:text⧉
<input type="text">
input:email⧉
<input type="email">
btn:submit⧉
<button type="submit"></button>
select>option*3⧉
3 options under select
table>tr^tr>td*3⧉
Two-row table, 3 cells in second row
lorem10⧉
Generate 10-word placeholder text
lorem-cn⧉
Generate Chinese placeholder (plugin required)

CSS Shorthand 18

w100⧉
width: 100px
w100p⧉
width: 100%
h50⧉
height: 50px
m10⧉
margin: 10px
m10-20⧉
margin: 10px 20px
p10-20-30⧉
padding: 10px 20px 30px
bgc#333⧉
background-color: #333
c#fff⧉
color: #fff
fz16⧉
font-size: 16px
fw700⧉
font-weight: 700
d:f⧉
display: flex
d:g⧉
display: grid
jc:c⧉
justify-content: center
ai:c⧉
align-items: center
pos:a⧉
position: absolute
t0 r0 b0 l0⧉
top/right/bottom/left: 0
bd1-s-#ccc⧉
border: 1px solid #ccc
br8⧉
border-radius: 8px

Nesting & Loops 5

div>ul>li*5>a{Item $}⧉
Nesting + loop + text interpolation
div+p+bq⧉
Sibling nodes (+)
{Hello}⧉
Text node
${Item}⧉
Numbered text
(#header>ul>li*2>a)+footer>p⧉
Group () combines multiple structures

💡 Tips

  • VSCode 默认内置 Emmet，HTML/CSS/JSX/Pug 文件里直接 Tab 即可展开。
  • $ 是递增占位符，$$ 补零（01, 02），$@- 倒序。
  • CSS 简写用 - 连接多个值，如 m10-20 展开为 margin: 10px 20px。

Related Cheatsheets

6 related cheatsheets

Nginx Cheatsheet - Nginx Configuration & Command ReferenceOne-page Nginx reference covering config testing with nginx -t/-s reload, location matching priority, proxy_pass reverse proxy snippets, and access/error log troubleshooting. Quick reference, copy directly.curl Cheatsheet - curl HTTP Debugging Command ReferenceOne-page curl HTTP debugging reference covering GET/POST basics, -v/-I/-w for detailed debugging, -x proxy & timeout, -u/-F/-o for auth and upload. Quick reference, copy directly.SSH Cheatsheet - SSH Connection & Configuration Command ReferenceOne-page SSH reference covering ssh -i/-p/-vvv for login debugging, ssh-keygen & ssh-copy-id for key management, ~/.ssh/config aliases & ProxyJump, -L/-R/-D port forwarding & SOCKS proxy. Quick reference, copy directly.HTTP Status Codes Cheatsheet - HTTP Response Status Code ReferenceOne-page HTTP Status Codes quick reference with 38+ common commands across 5 grouped sections (http, nginx, rest). Quick lookup, copy and run.Regex Cheatsheet - Common Patterns & Syntax ReferenceOne-page Regex reference covering character classes, anchors, quantifiers, groups, lookahead/lookbehind, greedy vs lazy matching, plus practical patterns for email, URL and phone. Quick lookup, copy directly.Markdown Cheatsheet - Markdown Syntax ReferenceOne-page Markdown syntax reference covering headings, text formatting, links & images, lists, code blocks, tables, blockquotes, and GFM extensions. For writing docs and READMEs. Quick lookup, copy and paste.

Official References

Commands are compiled from the official docs below. Click to verify the latest usage.

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Found an error? Report it

Wrong command or description? Open an issue to help us fix it.

Found an error? Report it