vs code 中 html 文件大纲需先切换为 html 语言模式（ctrl+shift+p → change language mode → html），再手动打开 outline 面板（ctrl+shift+o 或点击侧边栏图标）；其依赖 html language server，仅显示语义化元素（如、），默认不出现，须改用语义标签或添加role属性；折叠失效多因缩进混乱或标签未闭合；插件无法绕过 language server 限制，动态 dom 内容不纳入大纲。
VS Code 里怎么打开 HTML 文件大纲（Outline）
直接看右下角状态栏：如果显示的是 Plain Text，那 Outline 面板就是空的——必须先切到 HTML 语言模式。按 Ctrl+Shift+P 打开命令面板，输入 Change Language Mode，选 HTML 即可。
Outline 面板默认不自动弹出，得手动点侧边栏的 Outline 图标（或按 Ctrl+Shift+O）。它依赖 Language Server 解析结构，所以如果插件没装、HTML 语法有硬错误（比如 <div> 没闭合），树就无法生成。
<ul>
<li>确保已安装官方 <code>HTML Language Features（VS Code 自带，但可能被禁用）
"html.suggest.html5": true 和 "html.validate.scripts": true 是否开启<div> 默认不出现，<code><section></section>、<article></article>、<header></header> 等会列出来
为什么有些 <div> 在 Outline 里不显示？
<p>不是所有标签都会进大纲——VS Code 的 Outline 基于 HTML5 语义层级规范，只提取有明确文档结构意义的元素。纯布局用的 <code><div> 被视为“无语义容器”，默认过滤掉。
<p>想让它出现在大纲里，有两个办法：</p>
<ul><li>改用语义化标签：<code><section></section>、<aside></aside>、<nav></nav> 替代通用 <div>
<li>加 <code>role 属性强制识别，例如：<div role="region" aria-label="用户设置"> —— 这样 Outline 就能抓到并显示 “用户设置”
<p>注意：<code>id 或 class 名称不会影响 Outline 显示，别指望写个 class="header" 就能冒出来。
折叠代码时某段死活不显示折叠标记（▶）
最常见原因是缩进混乱：同一层级混用了 Tab 和空格，或者某行开头多了不可见字符（比如从 Word 粘贴过来的全角空格）。VS Code 折叠策略默认用 syntax，它靠标签配对判断，但若 <ul></ul> 缺了 ，整块就无法折叠。
- 快捷键
Ctrl+Shift+P→ 输入Folding: Toggle Fold，光标在标签内才生效；不在标签里按了也没反应 - 检查设置：
"editor.foldingStrategy": "syntax"（比indent更准），且"editor.folding": true - 临时验证：把疑似问题段落复制到新文件，单独测试——如果能折，说明原文件有隐藏结构错误
用插件增强结构导航，但 Outline 仍是空的
像 Code Outline 这类插件，本质是调用 VS Code 内置的 HTML Language Server。如果 Outline 面板本身是空的，插件也吐不出东西——它不是独立解析器，只是界面包装。
真正要排查的，是 Language Server 是否正常工作：
- 打开命令面板 →
Developer: Toggle Developer Tools→ 控制台里搜html，看有没有报错如Failed to start HTML language server - 关掉所有非必要插件，重启 VS Code，再试一次
- 检查当前文件是否被排除在工作区之外（比如在
.gitignore或files.exclude里）
大纲树不是“渲染结果”，而是静态语法分析产物。DOM 动态生成的结构、JS 插入的标签，Outline 一律看不到——这点容易被忽略。
