HTML代码质量自动修复需分层处理：语法错误用html-tidy兜底，结构问题靠DOM树推断，语义缺陷由规则引擎标记；html-tidy必须指定--doctype html5或--doctype xhtml以确保正确修复。
HTML代码质量自动修复不是“一键全修”，而是按错误类型分层处理：语法错误靠解析器补全，结构问题靠DOM树推断，语义缺陷靠规则引擎标记。真正能落地的机制，必须把html-tidy、eslint-plugin-jsx-a11y和document.designMode三类工具拆开用，而不是混在一起跑。
用 html-tidy 做基础语法兜底
html-tidy是唯一能稳定处理未闭合标签、属性引号缺失、嵌套错位等底层语法问题的命令行工具。它不依赖运行时环境，直接读取字符串或文件做AST重构，修复结果可预测。
- 必须指定
--doctype html5或--doctype xhtml，否则默认按HTML4宽松模式处理，可能漏掉XHTML强制闭合要求 - 对
&、等字符的转义行为受<code>--fix-uri和--quote-ampersand控制，不显式设为yes时可能保留原始写法 - 输出格式用
--indent auto比--indent yes更安全，后者在<pre class="brush:php;toolbar:false;"></pre>内也会缩进，破坏原意 - CI流程中建议加
--show-warnings no --quiet yes，避免日志污染，只让exit code != 0触发失败
用 eslint-plugin-jsx-a11y 检测语义与可访问性缺陷
这类问题html-tidy完全不管——比如<img alt="自适应工作流中HTML代码质量的自动修复机制" >缺alt、<button></button>没type、表单控件无label关联。必须用基于AST的lint规则，在JSX/HTML混合场景下尤其关键。
- 规则启用要分层级：
jsx-a11y/alt-text和jsx-a11y/label-has-associated-control建议设为error；jsx-a11y/no-static-element-interactions这类可降级为warning，避免阻塞开发流 - 对老项目，用
/* eslint-disable jsx-a11y/... */临时屏蔽比全局关闭更可控，但必须配eslint-disable-next-line注释说明原因 - 注意
jsx-a11y/anchor-is-valid会误报href="#top"，需配合aspects: ['invalidHref']配置项过滤
别把 document.designMode 当修复工具用
document.designMode = "on"只是临时编辑开关，不是修复机制。它不校验、不回滚、不保存，且对React/Vue区域完全无效。
立即学习“前端免费学习笔记（深入）”；
- 开启后
<button></button>点击失灵、<select></select>无法展开是正常现象，不是bug，是富文本编辑模型接管了事件流 - 修改后的DOM不会触发框架diff，下次state更新直接覆盖你手动输的内容，等于白改
- 唯一合理用途：快速验证某段文字是否被
display: none或visibility: hidden隐藏，或检查z-index堆叠顺序 - 真要改结构，用DevTools的Elements面板右键“Edit as HTML”，它会触发框架重渲染，比
designMode可靠得多
真正难的不是修复动作本身，而是判断“该不该修”——比如<div class="row"><div class="col"></div></div>在Bootstrap 3里合法，在Bootstrap 5里已废弃，html-tidy不会报错，但eslint-plugin-jsx-a11y也管不了。这种上下文感知的修复，目前仍得靠人盯规则版本和项目约束。
