VS Code中输入!或html:5生成HTML骨架需先确认语言模式为HTML（右下角显示“HTML”），再按Tab；ul>li5等缩写须严格遵循符号规则：>嵌套、+同级、重复、#/.紧贴标签名、{}紧贴无空格，否则不展开。
VS Code 里敲 ! 或 html:5 就能生成骨架
不是所有输入都有效，必须先确认当前文件语言模式是 HTML（右下角状态栏显示“HTML”，不是“Plain Text”）。如果显示不对，按 Ctrl+K Ctrl+M，再选 HTML。
确认语言模式后，在空文件中输入：
– ! + Tab，或
– html:5 + Tab
两者效果一致，都会生成含 、、、 的标准结构。
常见失效原因：
– 文件未保存为 .html 后缀（.txt 不触发）
– Emmet 被禁用（检查设置中 emmet.includeLanguages 是否包含 "html": "html"）
– 输入后按了 Enter 而非 Tab（部分旧版插件仅响应 Tab）
ul>li*5 这类 Emmet 缩写怎么写才不出错
Emmet 不是自由语法，符号含义固定，写错一个字符就可能只输出文字、不展开。
关键规则：
– > 表示父子嵌套（div>p →
– + 表示同级并列（header+main+footer）
– * 表示重复次数（li*3 → 3 个 ）
– # 和 . 必须紧跟标签名，中间不能有空格（div#app.container ✅，div #app .container ❌）
– {} 内写文本内容，且需紧贴前面符号（a{登录} ✅，a {登录} ❌）
容易踩的坑：
– 把 > 打成中文全角＞
– 在 class 名里误加空格（div.my-class btn 会生成两个 class，但 div.my-class.btn 才对）
– 用 > 连续两次（div>>p）导致解析失败，应改用 div>p
批量生成列表、表单等结构时怎么避免手动补全
靠手敲 效率低还易漏闭合。Emmet 可一步到位：
阿拉丁·前端工程工坊把「前端只会写页面、规范停在文档里、脚手架手敲、构建靠抄、性能靠猜、可访问性靠忘」从「手动搭项目、抄配置、肉眼查规范」升级成一条本地工具链——多框架脚手架生成(React/Vue3/Svelte + Vite)、可复用组件生成(Props 类型+样式+示例)、规范落地检查(lint-lite:命名/未用变量/console残留/TS any/目录结构)、构建配置生成与产物体积预算、性能审计(依赖体积/重复/懒加载/Lighthouse 清单)、可访问性(a11y)校验(alt/aria
常用组合：
– 表单项：form>label+input[type="text"] + Tab
– 带编号的导航：nav>ul>li*3>a[href="#"]{菜单$}（$ 自动替换为 1/2/3）
– 卡片结构：article.card>h3+p+img[src=""]+footer.time
注意点：
– 属性值必须用双引号包裹（input[type="text"]），单引号或无引号会中断展开
– src、href 等属性若留空，生成的是 src=""，不是省略；如需占位，写 src="#"
– 若缩写过长，可分段写：先输 div> + Tab，光标会停在 中间，再继续输子结构
为什么格式化后标签缩进错乱？怎么救
VS Code 默认格式化（Alt+Shift+F）依赖 Prettier 或内置 HTML 格式化器，但若 Emmet 生成的代码含非法嵌套或未闭合标签，格式化会失效甚至反向破坏结构。
排查步骤：
– 检查控制台是否报 Unable to format document 类错误
– 用 Ctrl+Shift+P → 输入 Format Document With...，确认选的是 Default Formatter（非其他插件）
– 关闭所有非必要插件（尤其自定义格式化器），重启编辑器再试
更稳妥的做法：
– 先用 Emmet 写完结构，再用 Ctrl+Shift+P → Emmet: Balance Tag（快捷键 Alt+Shift+E Alt+I）选中整个标签块校验嵌套
– 对已写好的混乱代码，用 Ctrl+A 全选后手动触发一次格式化，比逐段操作更稳定
真正容易被忽略的是：Emmet 生成的内容默认不带换行和缩进，全靠格式化器补足——所以格式化器本身是否启用、是否配置正确，比 Emmet 输入本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
