html劣化必然发生，需通过ci/cd嵌入语义校验、上下文感知转义、健康度仪表盘三重自动化拦截机制防控。
大型系统里，HTML代码劣化不是“会不会发生”的问题，而是“什么时候发生、以什么形式爆发”的问题。它往往不表现为语法错误，而表现为结构松散、语义错乱、安全边界模糊、可维护性断崖式下降——最终在某次上线后，突然出现XSS漏洞、SEO降权、无障碍访问失败或自动化测试大面积飘红。防劣化机制的核心，不是靠人盯代码，而是靠可落地的约束力和自动化的拦截点。
HTML语义校验必须嵌入CI/CD流水线
靠开发自觉写<article></article>而不是<div class="article">行不通。语义标签一旦被随意替换，后续所有基于语义的自动化检查（如SEO分析、屏幕阅读器兼容性扫描）都会失效。
<ul><li>在CI阶段接入<code>html-validate或axe-core CLI，配置强制规则：禁止<div>替代<code><header></header>/<nav></nav>/<main></main>等语义容器；禁止<span></span>替代<strong></strong>/<em></em>
<div role="button">，但业务页面中必须优先用<code><button></button>
fail-on-error，且错误信息要直接定位到行号+具体违反的WCAG条款（如aria-required-attr）模板层强制执行上下文感知编码
90%的XSS漏洞源于开发者在错误上下文中用了错误的转义函数。比如把用户昵称用escapeHtml()处理后，再塞进onclick="doAction('<value>')"</value>里——这根本没用，因为引号未闭合，恶意输入仍可逃逸。
- 禁用通用转义函数（如
escape()、htmlspecialchars()无参数调用），只允许使用带明确上下文标识的函数：escapeHtmlText()（用于文本节点）、escapeHtmlAttr()（用于属性值）、escapeJsString()（用于JS字符串内插） - 模板引擎（如Nunjucks、Handlebars）必须启用
autoescape，且默认上下文为html；若需输出非HTML内容（如JSON配置块），必须显式声明{{ data | safe | tojson }}并加注释说明理由 - 所有动态拼接的
style或href属性，必须走专用校验函数：validateCssUrl()、validateHrefUrl()，拒绝javascript:、data:、vbscript:等危险协议
构建HTML结构健康度仪表盘
劣化是渐进过程。等发现<table>被滥用为布局、<code><img>缺失alt率超60%时，修复成本已远高于预防成本。
- 每日定时抓取生产环境关键页面（首页、商品页、用户中心），用Puppeteer加载后提取DOM指标：
div-count / semantic-tag-count比值、img[alt]覆盖率、form[aria-label]存在率、script[src]与script:not([src])比例 - 指标阈值必须可配置且联动告警：例如当
div-only-components占比连续3天＞45%，自动创建Jira任务并@前端架构组 - 禁止将“无报错”等同于“健康”——仪表盘需包含可读性衰减指数（如嵌套深度＞6的
<div>数量、CSS类名平均长度） <p>真正难的不是写一套规则，而是让规则在千人协作、多技术栈、长生命周期的系统里持续生效。所有校验点必须能回答一个问题：“如果这条规则被绕过，下一个拦截点在哪？”——否则，一次临时<code>// eslint-disable-next-line就可能成为劣化的起点。
