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

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

这份表格涵盖了 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;`

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

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

结果：

html 复制代码

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

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

结果：

html 复制代码

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

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

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