1. 基础标签：输入标签名+Tab键
- 例：p → <p></p>
- 例：div → <div></div>
2. 多标签批量创建：标签名*数量+Tab键
- 例：span*5 → 生成5个<span></span>
- 例：li*4 → 生成4个<li></li>
3. 父子级关系标签：父标签>子标签+Tab键
- 例：nav>ul>li → <nav><ul><li></li></ul></nav>
- 例：div>h3 → <div><h3></h3></div>
4. 兄弟级关系标签：标签1+标签2+Tab键
- 例：h2+p+div → <h2></h2><p></p><div></div>
- 例：header+main+footer → <header></header><main></main><footer></footer>
5. 带类名/ID的标签：.类名 或 #ID+Tab键
- 例：.box → <div class="box"></div>
- 例：#header → <div id="header"></div>
- 例：p.text → <p class="text"></p>
6. 有序类名标签：.类名$*数量+Tab键
- 例：.item$*3 → <div class="item1"></div><div class="item2"></div><div class="item3"></div>
7. 标签内带固定内容：标签名{内容}+Tab键
- 例：a{首页} → <a href="">首页</a>
- 例：button{提交} → <button>提交</button>
8. HTML5标准文档模板：!+Tab键
- 例：! → <!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>
9. 标签分组创建：(分组内容)+Tab键
- 例：(div>h2+p)+(section>ul>li) → <div><h2></h2><p></p></div><section><ul><li></li></ul></section>
10. 带自定义属性的标签：标签名[属性=值]+Tab键
- 例：img[src="pic.jpg" alt="示例图片" width="300"] → <img src="pic.jpg" alt="示例图片" width="300">
- 例：a[href="https://www.example.com" target="_blank"] → <a href="https://www.example.com" target="_blank"></a>
11. 文本自增标签：标签名{内容$}*数量+Tab键
- 例：li{列表项$}*4 → <li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>
12. 省略div标签（默认生成div）：直接写类名/ID+Tab键
- 例：.container → <div class="container"></div>
- 例：#content → <div id="content"></div>
1. 宽度：w数值+Tab键
- 例：w200 → width: 200px;
- 例：w50% → width: 50%;
2. 高度：h数值+Tab键
- 例：h100 → height: 100px;
- 例：hauto → height: auto;
3. 行高：lh数值+Tab键
- 例：lh26px → line-height: 26px;
- 例：lh1.5 → line-height: 1.5;
4. 内边距：p数值（或pt/pl/pr/pb+数值）+Tab键
- 例：p10 → padding: 10px;
- 例：pt20 → padding-top: 20px;
- 例：pl15 → padding-left: 15px;
5. 外边距：m数值（或mt/ml/mr/mb+数值）+Tab键
- 例：m15 → margin: 15px;
- 例：mt30 → margin-top: 30px;
- 例：mr10 → margin-right: 10px;
6. 字体大小：f数值+Tab键
- 例：f16 → font-size: 16px;
- 例：f1.2rem → font-size: 1.2rem;
7. 文本颜色：c颜色值+Tab键
- 例：c#333 → color: #333;
- 例：c#fff → color: #fff;
- 例：crgb(255,0,0) → color: rgb(255, 0, 0);
8. 背景相关：bgc颜色值（或bgurl路径）+Tab键
- 例：bgc#f5f5f5 → background-color: #f5f5f5;
- 例：bgcwhite → background-color: white;
- 例：bgurl("bg.jpg") → background: url("bg.jpg");
9. 边框：bd数值+样式+颜色（或bdt/bdl/bdr/bdb+数值+样式+颜色）+Tab键
- 例：bd1px solid #ccc → border: 1px solid #ccc;
- 例：bdt2px dashed red → border-top: 2px dashed red;
10. 圆角：br数值+Tab键
- 例：br5px → border-radius: 5px;
- 例：br50% → border-radius: 50%;
11. 定位：posa/posr/posf+Tab键
- 例：posa → position: absolute;
- 例：posr → position: relative;
- 例：posf → position: fixed;
12. 浮动：fl/fr+Tab键
- 例：fl → float: left;
- 例：fr → float: right;
13. 显示模式：dib/dn/df/di+Tab键
- 例：dib → display: inline-block;
- 例：dn → display: none;
- 例：df → display: flex;
- 例：di → display: inline;
14. 弹性布局：jc-属性/ai-属性/flex数值+Tab键
- 例：jc-center → justify-content: center;
- 例：jc-between → justify-content: space-between;
- 例：ai-center → align-items: center;
- 例：flex1 → flex: 1;
15. 字体粗细：fw数值/fwbold/fwnormal+Tab键
- 例：fw600 → font-weight: 600;
- 例：fwbold → font-weight: bold;
- 例：fwnormal → font-weight: normal;
16. 文本对齐：ta-center/ta-left/ta-right+Tab键
- 例：ta-center → text-align: center;
- 例：ta-left → text-align: left;
- 例：ta-right → text-align: right;
1. 手动格式化：使用快捷键
- 例：shift+alt+f（选中代码或直接按，快速统一代码格式）
2. 自动保存格式化：通过设置开启
- 操作路径：文件 → 首选项 → 设置
- 搜索关键词：emmet.include
- 配置代码（添加到settings.json的「工作区设置」）：
"editor.formatOnType": true, // 输入时自动格式化
"editor.formatOnSave": true // 保存文件时自动格式化
