Emmet 缩写语法大全
Emmet 是一个强大的 HTML/CSS 缩写工具，可以极大提高前端开发效率。以下是全面的 Emmet 语法指南：
基础 HTML 结构
- ! 或 html:5 → 生成 HTML5 基础结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>元素生成
- div → <div></div>
- p → <p></p>
- a → <a href=""></a>
- img → <img src="" alt="">
- input → <input type="text">
- form → <form action=""></form>
类与 ID
- div.container → <div class="container"></div>
- p#intro → <p id="intro"></p>
- div.header.logo → <div class="header logo"></div>
- ul#nav.main → <ul id="nav" class="main"></ul>
嵌套结构
- ul>li →
<ul>
<li></li>
</ul>- div>p>span →
<div>
<p><span></span></p>
</div>同级元素
- div+p →
<div></div>
<p></p>- div>h1+h2 →
<div>
<h1></h1>
<h2></h2>
</div>乘法运算
- ul>li*3 →
<ul>
<li></li>
<li></li>
<li></li>
</ul>- div.item*5 → 生成 5 个 <div class="item"></div>
属性
- a[href="#"] → <a href="#"></a>
- img[src="image.jpg" alt="Image"] → <img src="image.jpg" alt="Image">
- input[type="text" placeholder="Name"] → <input type="text" placeholder="Name">
内容文本
- p{Click here} → <p>Click here</p>
- a{Link} → <a href="">Link</a>
- div>p{Item $}*3 →
<div>
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>分组
- div>(header>ul>li*2)+footer →
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer></footer>
</div>CSS 缩写
- m10 → margin: 10px;
- p20-30 → padding: 20px 30px;
- bgc#f00 → background-color: #f00;
- w100+h50 → width: 100px; height: 50px;
- d:n → display: none;
进阶技巧
- 编号：使用 $ 生成序列号ul>li.item$*5 → 生成带编号的 lihtml复制下载运行<ul> <li class="item1"></li> <li class="item2"></li> <!-- ... --> </ul>
- 反向编号：$@-ul>li.item$@-*5 → 5,4,3,2,1
- 起始编号：$@3ul>li.item$@3*5 → 3,4,5,6,7
- 隐式标签：.container → <div class="container"></div>#main → <div id="main"></div>ul>.item → <ul><li class="item"></li></ul>
- Lorem Ipsum 文本：p>lorem → 生成随机文本p>lorem10 → 生成10个单词的随机文本
实际应用示例
- 导航菜单：nav>ul>(li>a[href="#"]{Menu $})*5
- Bootstrap 栅格：.container>.row>.col-md-4*3
- 表单：form.form-inline>div.form-group*3>label+input[type="text"].form-control
- 卡片布局：.card>(.card-header>h3{Title})+(.card-body>p>lorem)+(.card-footer>a.btn{Click})
记住，在 VS Code 中输入这些缩写后按 Tab 或 Enter 键即可展开为完整代码。
