必须先确认无用HTML元素未被JS或CSS隐式引用：通过Chrome DevTools的“Break on Attribute modifications”监控运行时修改，执行document.querySelectorAll()检查DOM引用，全局搜索类名/ID在JS/CSS中的调用，并用vscode-html-validate扫描静态问题，删前建Git分支、分组操作、添加注释标记。
用浏览器开发者工具定位无用 HTML 元素
直接删代码前，得先确认它真没被用——很多 <div id="old-banner"> 看似闲置，其实被 JS 动态插入、或被 CSS 的 <code>[data-legacy] 选择器引用。打开 Chrome DevTools（F12），在 Elements 面板右键任意元素 → “Break on” → “Attribute modifications”，再刷新页面，观察哪些元素在运行时被 JS 修改过；同时用 Console 执行 document.querySelectorAll('div[id^="old-"]') 检查是否还存在 DOM 引用。
检查 CSS 和 JS 中对 HTML 的隐式依赖
无效 HTML 往往不是孤立存在的。比如删掉一个 <span class="loading-indicator"></span>，但 JS 里还有 document.querySelector('.loading-indicator').style.display = 'block'，运行时就会报 Cannot read property 'style' of null。搜索整个项目：
- 全局搜
loading-indicator（类名、ID、data 属性值） - 检查所有
querySelector、getElementById、$()（jQuery）调用的参数 - 留意 CSS 中的伪类或属性选择器，如
input:valid + .hint，删了.hint就会断链
用 HTMLHint 或 vscode-html-validate 做静态扫描
人工排查易漏，尤其内联 style 或废弃标签。VS Code 安装 vscode-html-validate 插件后，在 settings.json 加：
"html-validate.options": { "rules": { "no-unused-id": "error", "no-duplicate-attributes": "error", "no-unknown-elements": "warn" } } 它能标出未定义的 id、重复的 class、以及像 <center></center> 这种已废除标签。注意：它不检测 JS 动态生成的元素，所以必须和上一步配合。
删之前保留可逆操作，别直接 Ctrl+A + Delete
index.html 是入口文件，改错可能让整个页面白屏。建议：
- 用 Git 分支隔离，比如
git checkout -b cleanup-index - 每次只删一组语义明确的块（如整个
<footer class="v1"></footer>），删完立刻本地起服务测试路由、表单提交、滚动锚点 - 保留注释标记，比如
<!-- [REMOVED] legacy analytics script, 2024-03 -->，方便回溯 - 如果用了构建工具（Vite/Webpack），确认
index.html是否被插件注入内容（如vite-plugin-html），删了可能被自动还原
立即学习“前端免费学习笔记（深入）”；
最麻烦的不是删多少，而是判断“谁还在读它”——JS 可能通过 parentElement.children[2] 这种脆弱索引访问节点，这种根本不会出现在搜索结果里。
