巧匠Developer Cheatsheet

Emmet Cheatsheet - Emmet Abbreviation & Syntax Reference

For hand-writing HTML in an editor like VSCode. Emmet expands one short abbreviation into a full nested structure, which is a large speed gain if you are not using a GUI page builder. By the end you can type an outline like a nav with nested items and produce complete markup, generate repetitive loops and attributes, and apply CSS shorthands without looking them up.

Web Services·39 commands·Last updated 2026-07-21
emmethtmlcssFrontend

HTML Basics 8

! or 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 is 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

  • VS Code ships with Emmet built in — press Tab to expand abbreviations in HTML, CSS, JSX and Pug files.
  • $ is an auto-incrementing placeholder; $$ zero-pads (01, 02) and $@- reverses the order.
  • CSS shorthands join multiple values with a hyphen, e.g. m10-20 expands to margin: 10px 20px.

Related Cheatsheets

6 related cheatsheets

Nginx Cheatsheet - Nginx Configuration & Command ReferenceAn Nginx configuration handbook for backend, DevOps, and frontend-integration engineers, covering nginx -t/-s reload syntax validation and hot reload, location matching priority, proxy_pass reverse proxies, access/error log troubleshooting, and the common causes of 502/504.curl Cheatsheet - curl HTTP Debugging Command ReferenceA curl request and troubleshooting handbook for backend developers, testers, and ops, covering GET/POST request bodies, -v/-I/-w request details and timing analysis, -k/-x TLS and proxies, -u/-F/-o auth and upload, plus practical combinations of cookies, redirects, and timeout retries.HTML Cheatsheet - HTML Tags & Attributes ReferenceAn HTML reference for building accessible, semantic web pages — document structure, text, lists, links & images, tables, forms, and the semantic tags that convey meaning to both browsers and screen readers.CSS3 Cheatsheet - CSS3 Properties & Layout ReferenceA CSS reference for styling pages without a framework, covering selectors, the box model, Flex/Grid layout, positioning, transitions & animation, and responsive patterns for both desktop and mobile.Sass/SCSS Cheatsheet - Sass Syntax & Mixin ReferenceA Sass/SCSS reference for structuring CSS that scales, covering variables, nesting, Mixins, @extend, math and color functions, and @each/@if control flow, plus how they compile down to plain CSS.CSS Flexbox Cheatsheet - Flexbox Layout ReferenceA Flexbox layout reference for building one-dimensional responsive layouts, covering container vs item properties, main-axis and cross-axis alignment, grow/shrink/basis sizing, and the classic toolbar, card, and centered layouts that Flexbox handles naturally.

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

Maintained by LaoHand

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

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.

Contact Us