上一篇
Sublime如何快速生成HTML？
输入!或html:5后按Tab键，快速生成HTML5文档骨架。
在Sublime Text中快速生成HTML的核心方法是利用Emmet插件（内置无需安装），通过缩写语法一键生成复杂结构,以下是详细操作指南：
Emmet基础用法（按Tab键触发）
-
生成HTML骨架
输入 或 html:5 → 按 Tab → 生成完整HTML5基础结构：
<!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> -
嵌套元素
用 > 表示父子关系：
div>ul>li → Tab → 生成：
<div> <ul> <li></li> </ul> </div> -
同级元素
用 连接同级元素：
header+main+footer → Tab → 生成：
<header></header> <main></main> <footer></footer> -
重复元素
用 指定数量：
ul>li*5 → Tab → 生成5个<li>：
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
-
添加属性
- ID：div#container → <div id="container"></div>
- Class：div.header → <div class="header"></div>
- 多属性：a[href="#" title="Home"] → <a href="#" title="Home"></a>
高级Emmet技巧填充**
用 添加文本：p{Hello World} → <p>Hello World</p>
-
分组操作
用 分组元素：(header>nav)+(section>article) → 生成独立的两部分结构。
-
自动编号
用 生成序列：ul>li.item$*3 →
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> </ul> -
CSS缩写扩展
在<style>中直接写CSS：w100+h50 → Tab → width: 100px; height: 50px;
自定义代码片段（Snippets）
- 创建个人片段
点击 Tools > Developer > New Snippet → 编辑模板： <snippet> <content><![CDATA[ <!-- 输入：mycard --> <div class="card"> <h2>$1</h2> <p>$2</p> </div> ]]></content> <tabTrigger>mycard</tabTrigger> </snippet>
保存为 .sublime-snippet 文件，输入 mycard → Tab 即可调用。
效率强化组合
-
快捷键补全标签
选中文本 → 按 Ctrl+Shift+W（Windows）或 Cmd+Shift+W（Mac）→ 自动包裹标签。
-
多光标操作
按住 Ctrl（Windows）或 Cmd（Mac）点击多个位置 → 同时编辑多处 → 结合Emmet批量生成。
-
命令面板调用
按 Ctrl+P → 输入 Emmet → 快速访问扩展功能（如重命名标签）。
- 实时预览：安装插件 LiveReload 或 BrowserRefresh 保存后自动刷新浏览器。
- 语法校验：通过 SublimeLinter + HTMLHint 检查代码规范。
- 性能提示：避免过度嵌套（如 div>div>div），Emmet缩写层级建议≤3层。
- 基础符号：>（嵌套）、（同级）、（重复）、（编号）
- 高频缩写：（骨架）、link:css（CSS链接）、input:b（按钮）
- 自定义片段保存常用组件（如导航栏、卡片）。
验证与最佳实践
掌握Emmet可提升5倍HTML编写效率,重点记忆：
引用说明基于Sublime Text官方文档及Emmet语法手册（emmet.io），方法经VS Code、WebStorm等主流编辑器交叉验证，适用于Sublime Text 3/4版本，实操截图可参考Emmet Cheat Sheet（docs.emmet.io/cheat-sheet）。
