Emmet插件需手动安装并启用：通过Package Control安装sergeche维护的Emmet，重启后检查右下角是否显示“HTML (Emmet)”，否则右键设语法为HTML；缩写如div>ul>li*3按Tab展开，需英文符号、光标在行首或空格后；CSS缩写如m10→margin:10px;，支持自定义规则。
Emmet 插件是否已启用？先确认基础环境
Sublime Text 默认不带 Emmet，必须手动安装。如果敲 div>ul>li*3 按 Tab 没反应，大概率是插件没装或没生效。
- 用
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）打开命令面板，输入Package Control: Install Package，回车后搜Emmet，选官方维护的Emmet（作者为 sergeche）安装 - 安装后重启 Sublime，或手动执行
Emmet: Enable/Disable in Current Syntax确保 HTML 语法下已启用 - 检查右下角状态栏是否显示
HTML (Emmet)；若只显示HTML，说明 Emmet 未接管当前文件类型，可右键 →Set Syntax: HTML再试
常用缩写怎么写？别记全，掌握高频组合就行
Emmet 不靠死记，靠模式推导。核心是理解符号含义：> 表示父子，+ 表示兄弟，* 表示重复，$ 表示计数器。
-
ul>li*5→ul里生成 5 个li，内容自动带$（即li1…li5） -
div.container>h1{标题}+p{段落}→div带class="container"，内部一个h1和一个p，文本内容用大括号包裹 -
input[type="text"].form-control#username→ 生成<input type="text" class="form-control" id="username"> - 注意：缩写必须在标签开始前输入，且光标需位于行首或空格/制表符后，否则
Tab不触发
为什么 Tab 没反应？常见拦截点和修复方式
不是 Emmet 失效，而是被其他功能抢了焦点或语法识别错位。
- 当前文件未识别为 HTML：扩展名不是
.html或.htm，或手动设成了Plain Text；解决：右下角点击语法名 → 选HTML - 输入时混入中文标点或全角空格：Emmet 只认英文
>、*、{等，粘贴代码务必检查字符集 - 被 Snippets 或其他插件劫持
Tab：临时禁用其他补全类插件（如 AutoFileName、SublimeCodeIntel），再测试 - 缩写太短（如只输
div）：默认需至少两个字符才触发，可改配置——在Preferences → Package Settings → Emmet → Settings中添加：{ "preferences": { "emmet.triggerExpansionOnTab": true, "emmet.expand_abbreviation_by_tab": true } }
进阶但实用：自定义缩写和 CSS 快速补全
Emmet 不只写 HTML 标签，CSS 属性也能极速展开，比如 m10 → margin: 10px;，bd1s#333 → border: 1px solid #333;。
立即学习“前端免费学习笔记（深入）”；
- HTML 中写样式时，直接在
style属性内输入缩写 +Tab：例如div[style="m10+p20"]→<div style="margin: 10px; padding: 20px;"> <li>想加自己的缩写？编辑 <code>Preferences → Package Settings → Emmet → Key Bindings，添加自定义规则，比如让btn展开为<button class="btn">$1</button> - 注意：CSS 缩写对大小写敏感，
M10和m10结果不同；单位默认是px，要rem得写m10r
实际用起来，80% 场景靠
div>ul>li*3、section.container、img[src=""][alt=""] 这几类就够。别纠结所有语法，先跑通一个缩写，再按需查文档——Emmet 的设计本意就是“写得像手写，扩得像机器”。
