自动化HTML页面需逆向整治：先校验DOCTYPE、lang属性及meta标签；再将无语义div按上下文转为语义化标签；接着修复alt缺失，区分装饰性与内容性图片；最后用parse5预处理修复标签断裂与嵌套污染。
自动化生成的HTML页面，代码质量往往在上线后才暴露问题——不是结构错乱，就是语义缺失、alt空缺、标签嵌套失控。这类问题不能靠人工逐行修，得用可落地的逆向整治策略。
检查DOCTYPE和基础结构是否被模板引擎忽略
很多生成工具（如Next.js SSR、Vue SSG、CMS导出器）默认不写<!DOCTYPE html>，或漏掉<html lang="zh-CN">，导致IE兼容模式触发、SEO元信息失效。
- 用
cheerio提取根节点，验证doctype是否存在：$.root().get(0).type === 'root'且$.root().children()[0].type === 'directive' - 检查
<html>是否带lang属性，缺失时统一补lang="zh-CN"（不可硬编码为en） - 确认
<head>内至少含<meta charset="UTF-8">和<meta name="viewport">，否则移动端渲染直接失真
识别并替换非语义化div堆叠结构
自动化工具常把所有区块塞进<div class="section-1">，<div class="container">，完全丢失语义层级。这类结构W3C验证器不报错，但屏幕阅读器无法导航，SEO权重归零。
- 用CSS选择器定位高频无意义class：
div[class*="wrap"], div[class*="container"], div[class^="block"] - 按上下文自动映射：父级含
nav关键词 → 替换为<nav>；含footer→<footer>；含article或post→<article> - 警惕“伪语义”：如
<div role="main">应优先转为<main>，而非保留role属性
批量修复图片alt缺失与空值滥用
生成系统常把alt设为空字符串alt=""或干脆省略，既违反WCAG 2.1，又被Google视为低质信号。更麻烦的是，有些工具把图标SVG的alt硬填成“icon”，毫无描述性。
立即学习“前端免费学习笔记（深入）”；
- 区分装饰性与内容性图片：
img[src$=".svg"], img[aria-hidden="true"]允许alt=""；其余必须含非空、非泛化文本 - 对缺失
alt的img，优先从title、aria-label、邻近<h2>文本中提取关键词生成描述，而非统一填“图片” - 禁止
alt="logo"、alt="icon"等无效值；若原始数据无描述，留空不如加占位提示：alt="[需补充描述]"（后续人工介入标记）
清理动态注入导致的标签断裂与嵌套污染
React/Vue组件服务端渲染（SSR）或CMS富文本字段常输出未闭合的<p>、错位的<li>，甚至把<script>片段混进<body>中间——这些在浏览器里能“勉强渲染”，但cheerio解析会丢节点，W3C验证器直接报错。
- 用
parse5代替cheerio做预处理：它更严格模拟浏览器DOM构建，能暴露parse5.SyntaxError类错误 - 对常见断裂模式做正则兜底：
/<p>[^<]*$/i匹配未闭合段落，补</p>；/<ul>.*?<\/ul>/is外多出的<li>移到最近<ul>内 - 禁用
innerHTML直接插入富文本；改用DOMPurify.sanitize()清洗后再解析，避免<div><span><p>这种非法嵌套
逆向整治最难的不是规则本身，而是生成逻辑和修复逻辑之间的“语义鸿沟”——比如某个CMS字段叫“副标题”，但实际存的是HTML片段，里面可能含<h3>也可能含<div>。这时候硬替换成<h2>反而破坏原有层级。得先做字段级语义标注，再跑规则，否则越修越乱。
