emmet是基于css选择器语法的结构化代码生成器，非上下文感知的自动补全；核心操作符包括>（子嵌套）、+（同级兄弟）、*（重复）、$（编号）、^（上提）及[]（属性）、{}（内容），须严格遵循无空格、引号闭合、括号分组等规则，否则易输出错乱结构。
Zen Coding（现名 Emmet）不是“自动补全”，而是基于缩写规则的结构化代码生成器——输入一串类似 CSS 选择器的表达式，按快捷键后直接输出完整 HTML 片段。它不依赖上下文、不分析已有代码，只做单向展开，这点决定了它快，也决定了它容易因语法错位而输出空或错乱结构。
Emmet 缩写语法核心操作符怎么写才不出错
常见错误是把缩写当 CSS 写，比如 div.class#id 看似合理，但 Emmet 要求 ID 必须在 class 前：div#id.class 才合法；否则会忽略 #id 或整个属性部分。
-
>表示严格子嵌套，div>ul>li→<div><ul><li></ul></div>；多一个空格（如div > ul）就无法识别 -
+是同级兄弟，h1+p+blockquote生成三个并列标签，不是嵌套；误用>会导致层级错乱 -
*N必须紧贴元素名，li*5合法，li *5或li* 5都失效 -
$用于编号，li.item-$*3→<li class="item-1"> <li class="item-2"> <li class="item-3">；$$补零，$单个不补零
属性和内容怎么加进缩写里
Emmet 不靠弹窗填属性，所有属性必须内联书写，格式固定：[key="value"]，不能省引号，也不能用单引号或无引号；内容用 {text} 包裹，且只能出现在元素末尾。
-
a[href="https://example.com"]{Click me}→@#@#@#@#@#@#@#@#@#@0 -
input[type="checkbox"][name="agree"]→<input type="checkbox" name="agree">；漏掉引号会变成type=checkbox，浏览器可能解析异常 -
span.color{red}合法，但{red}span.color无效——{}必须紧贴元素名或属性后 - 多个 class 可连写：
div.left.right.fixed→<div class="left right fixed"></div>；中间不能有空格或逗号
复杂结构必须用括号分组
没有 ()，+ 和 > 的作用域会全局生效，导致意外交叉嵌套。比如想写「header + main + footer」各含不同子结构，不加括号就会变成 header>main>footer。
-
(header>h1+nav>ul>li*3)+(main>p*2)+(footer>small)才能正确生成三块平行区域 -
ul>li*3+div>p实际输出：<ul> <li> <li> <li> </ul> <div><p></p></div>；而ul>(li*3)+div>p会让div成为ul的子元素 -
^是“上提”操作符，用于跳出当前嵌套层级，比如div>p>span+em^bq中bq与p同级；但多数场景用括号更直观、更少出错
不同编辑器的触发方式和兼容性差异
Emmet 默认绑定 Tab，但在 VS2010、Notepad++ 等老环境里常被设为 Ctrl+E 或 Ctrl+Shift+Enter；更重要的是，VS2010 的 Zen Coding 插件早已停止维护，不支持 {} 内容插入或 [] 属性语法，仅识别基础 #/./*。
- Sublime Text / VS Code：默认
Tab，支持全部语法，包括html:5生成 HTML5 模板 - PHPStorm：需确认设置中 Emmet 已启用，且在 HTML/CSS 文件类型下生效；
Tab有时被 Live Templates 拦截，可临时禁用冲突模板 - Notepad++：v0.6.1 插件仅支持到 Emmet 1.x 早期语法，
div#id.class[attr="val"]会失败，应降级为div#id.class+ 手动补属性 - VS2010：原生不支持，需装第三方插件，且 ASP.NET 控件扩展（如
a:gv）依赖定制配置文件，替换zen-coding.json后仍需重启并检查工具菜单是否出现 ZenCoding 项
真正卡住人的往往不是语法记不住，而是缩写展开后发现结构不对——这时别急着改代码，先回退一步检查有没有漏括号、属性引号不闭合、或者编辑器根本没加载 Emmet 支持。尤其在老旧 IDE 里，Tab 键可能被其他功能劫持，务必去键盘快捷键设置里确认 Emmet Expand Abbreviation 绑定的是哪个组合键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
