tidy-html5 补闭合标签前必须确认存在 ，否则仅做最小修复；htmlhint 的 tag-pair 规则只报错不修复；浏览器 elements 面板中灰色斜体标签表明未闭合；playwright mcp 基于运行时 dom 上下文精准修补结构性缺陷。
用 tidy-html5 补闭合标签前，必须确认 DOCTYPE 是否存在
tidy-html5 不是无脑补全工具。它默认只在检测到 时才敢重排结构、插入缺失的 <code> 或 ；否则只做最小修复（比如修引号、删多余空格），根本不动嵌套逻辑。
常见错误现象：你把一段没声明 DOCTYPE 的 HTML 丢给 tidy -m，结果发现 <div>
<p>text 还是没补 </p>
<pre class="brush:php;toolbar:false;"></pre>
</div>
- 检查方式：
head -n 5 your-file.html | grep -i doctype - 补 DOCTYPE 最简写法：
（一行，不带其他注释或空行） - 如果项目强制用 XHTML，加
-xml参数，否则<img src="x">可能被改成<img src="x">，而这不是所有环境都接受
htmlhint 的 tag-pair 规则为何有时“报了却不修”
htmlhint 是校验器，不是编辑器。它能精准标出 index.html:42:17: Tag must be paired.，但不会动你一行代码——这点常被误认为“功能失效”。
使用场景很明确：CI 流程卡点、VS Code 插件实时提示、或者配合脚本做预检。
- 关键配置项必须显式启用：
"tag-pair": true（虽然默认开，但若用了自定义.htmlhintrc，得确认没被覆盖） - 别指望它修复
<p></p> <div> 这类非法嵌套——<code>tag-pair只管开闭数量匹配，不管 HTML5 规范是否允许 - 真实修复要靠后续动作：比如把
htmlhint --json输出喂给一个 Python 脚本，定位行号后调用sed或awk插入闭合标签
浏览器 Elements 面板里灰色斜体标签就是未闭合证据
别信源码缩进，信 DOM 实际结构。Chrome/Firefox 的 Elements 面板会把被浏览器自动补全的标签渲染成灰色斜体字体，这是最直接的未闭合信号。
典型表现：<div><p>hello</p></div> 在面板里会显示为两个独立节点：<p>hello</p>（正常黑体） + 底部一个孤立的、灰色斜体的 <div>。
<ul>
<li>验证方法：右键父节点 → “Edit as HTML”，删一个字符再回车，如果子树整体重排，说明原始 HTML 已被解析器修正过</li>
<li>注意：document.body.innerHTML 返回的是浏览器“修过”的版本，和你本地文件内容可能不一致</li>
<li>临时高亮所有元素看错位：<code>document.head.innerHTML += '<style>*{outline:1px solid red!important}</style>'，查完记得 document.querySelector('style').remove()
Playwright MCP 不是补全工具，而是 DOM 上下文感知的精准修补
Playwright MCP 的核心价值不在“多补几个 ”，而在理解错误发生的上下文：是某个 <script></script> 加载失败导致后续 DOM 解析中断？还是 fetch 返回 404 后 JS 报错打断了模板渲染？
它不依赖静态文本分析，而是通过 DevTools 协议监听真实浏览器行为，再结合预设规则库做外科手术式修改。
- 例如：捕获到
Failed to load resource: the server responded with a status of 404 (logo.png)，自动将对应<img src="logo.png">改成<img src="/assets/logo.png"> - 它不会碰业务逻辑，也不生成新代码——只改已知模式的结构性缺陷
- 真正落地难点不在配置 Playwright，而在定义清晰的“什么算错误”：比如
all script tags must have closing这类规则需精确表达为 DOM 查询路径 + 属性断言
