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="#"]{导航$} -
结果 ：
html<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 -
结果 ：
html<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 场景需要解答，随时告诉我。