Emmet 默认不补全属性，需开启“Emmet: Trigger Expansion On Tab”才能实现输入标签名后按Tab生成带src、alt等属性的完整标签；属性值通过方括号语法（如img[src=logo.png]）手动指定，class/id用.和#简写，且不得有空格。
Emmet 默认不补全属性？检查 triggerExpansionOnTab 设置
VSCode 新版本默认关闭了按 Tab 触发 Emmet 展开的开关，导致输入 img 后按 Tab 只生成 <img>，不带 src、alt 等常用属性。
必须手动开启才能恢复「输标签名 + Tab 补全带属性」的行为：
- 打开设置（
Ctrl+,），搜索emmet trigger - 勾选
Emmet: Trigger Expansion On Tab - 重启编辑器或重新打开 HTML 文件生效
开启后，输入 img → Tab，会直接生成 <img src="" alt="">；输入 a → Tab 得到 <a href=""></a>。
img 标签的 src 路径怎么自动补全？别依赖插件
VSCode 自身不解析文件系统路径来补全 src 值，所谓“自动补全”其实是靠你提前写好相对路径片段，再用 Emmet 扩展它——不是智能推荐，是模式匹配。
立即学习“前端免费学习笔记（深入）”；
常见有效写法：
-
img[src=img/]→<img src="img/">（光标停在引号内，可继续输入文件名） -
img[src=./assets/logo.png]→<img src="./assets/logo.png" alt=""> -
img[alt=占位图]→<img src="" alt="占位图">（src仍为空，但alt已填）
注意：src 值不会从项目目录里自动列出图片供选择，VSCode 没这个功能。想快速选图，得靠资源管理器拖拽或手动补全路径。
a 标签的 target 和 href 怎么一次写全？用方括号语法
Emmet 支持在标签后用 [] 直接声明属性，比先生成再手动敲快得多，尤其适合带固定值的属性。
实操示例：
-
a[href=#top][target=_self]{回到顶部}→<a href="#top" target="_self">回到顶部</a> -
a[href=https://example.com][target=_blank]→<a href="https://example.com" target="_blank"></a> -
a[href=about.html][class=nav-link]→<a href="about.html" class="nav-link"></a>
要点：多个 [] 顺序无关；href 值含 / 或 : 时，引号可省略；但含空格或特殊字符必须加引号，比如 [href="page 1.html"]。
为什么 class 和 id 能直接用点和井号？这是 Emmet 的简写约定
这不是插件额外功能，而是 Emmet 内置语法糖，专为快速写样式钩子设计，和属性补全无关，但能大幅减少键盘输入。
典型组合：
-
div.header→<div class="header"></div> -
section#main.content→<section id="main" class="content"></section> -
ul.nav>li*3→<ul class="nav"><li></li><li></li><li></li></ul>
容易踩的坑：. 和 # 必须紧跟标签名，中间不能有空格；多个 class 用连续 .，如 div.box.highlight；id 只能一个，写第二个会被忽略。
属性补全和语法糖是两套机制，混用时优先级是：标签名 → ./# → []。比如 input.text[type=text][placeholder=请输入] 是合法且高效的写法。
