VsCode 前端开发快捷语法，Emmet 快捷语法整理，markdown 表格格式

VsCode 前端开发快捷语法，Emmet 快捷语法整理，markdown 表格格式

没问题，根据你的需求，我为你整理了一份 Emmet 快捷语法速查表 ，并严格按照 Markdown 表格格式 进行了排版。

这份表格涵盖了 Emmet 的核心操作符、属性设置、文本内容以及高级用法，你可以直接复制使用，或者将其作为备忘录保存。

🚀 Emmet 常用语法速查表

语法符号	功能描述	输入示例 (缩写)	生成结果 (代码)
基本结构
!	生成 HTML5 标准文档骨架	!	<!DOCTYPE html>... (完整结构)
tag	生成指定标签	div	<div></div>
tag*	生成多个同级标签	div*3	<div></div><div></div><div></div>
层级关系
>	嵌套子元素 (父子关系)	ul>li	<ul><li></li></ul>
+	同级元素 (兄弟关系)	h2+p	<h2></h2><p></p>
^	向上返回一级 (跳出当前标签)	div>p^div	<div><p></p></div><div></div>
()	分组包裹	div>(header+footer)	<div><header></header><footer></footer></div>
属性与ID
.	设置 class 类名	p.center	<p class="center"></p>
#	设置 id 属性	div#main	<div id="main"></div>
[]	设置自定义属性	a[href="#" target]	<a href="#" target=""></a>
内容与序号
{}	添加标签文本内容	p{Hello}	<p>Hello</p>
$	序号递增 (配合 * 使用)	li.item$*3	<li class="item1"></li>...<li class="item3"></li>
@-	序号递减	li.item$@-*3	<li class="item3"></li>...<li class="item1"></li>
CSS 简写
prop:value	常用 CSS 属性缩写	d:f; jc:c	display: flex; justify-content: center;
w/p/m	宽高与内外边距	w100+p10	width: 100px; padding: 10px;

---

💡 重点语法详解

为了让你更灵活地运用这些语法，这里补充几个常用的组合技巧：

1. 组合拳：嵌套与同级

你可以混合使用 > 和 + 来构建复杂的 DOM 结构。

• 示例 ：nav>ul>li*3>a[href="#"]{导航$}

• 结果 ：

  <nav>
    <ul>
      <li><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li><a href="#">导航3</a></li>
    </ul>
  </nav>

2. 智能序号 $

$ 符号非常强大，可以放在类名、ID、属性值甚至文本内容中。

• 补零功能 ：$$$ 表示不足三位自动补零（如 001, 002）。

• 起始值 ：$@3 表示从 3 开始计数。

• 示例 ：img[src="image$.jpg" alt="图片$"]*2

• 结果 ：

  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2">

3. 隐式标签

如果你只输入 .class 或 #id 而没有写标签名，Emmet 默认会生成 div 标签（在 ul 下默认生成 li，在 table 下默认生成 tr 等）。

• 示例 ：.container
• 结果 ：<div class="container"></div>

🛠️ 使用提示

• 触发方式 ：在支持 Emmet 的编辑器（如 VS Code, WebStorm）中输入缩写后，按下 Tab 键即可展开。
• CSS 单位 ：CSS 缩写中，数字默认单位通常是 px（例如 w100 展开为 width: 100px;）。

希望这份整理能帮到你！如果还有其他具体的 Emmet 场景需要解答，随时告诉我。