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><ahref="#">导航1</a></li><li><ahref="#">导航2</a></li><li><ahref="#">导航3</a></li></ul></nav>
2. 智能序号$
$符号非常强大，可以放在类名、ID、属性值甚至文本内容中。
- 补零功能：
$$$表示不足三位自动补零（如 001, 002）。 - 起始值：
$@3表示从 3 开始计数。 - 示例：
img[src="image$.jpg" alt="图片$"]*2 - 结果：
<imgsrc="image1.jpg"alt="图片1"><imgsrc="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 场景需要解答，随时告诉我。