历史遗留页重构不是简单替换标签，而是需先锁定dom缺陷、分层加固语义、再用工具链防倒退；优先重构对象包括js强耦合的div（onclick/onmouseover＞5个）、含语义线索class的div（如title/nav/footer）、以及axe检测出region-missing或heading-order错误的页面。
直接说结论：历史遗留页重构不是把 <div class="header"> 换成 <code><header></header> 就完事，而是得先锁定 DOM 结构缺陷、再分层加固语义意图、最后用工具链卡住倒退——否则改完三天，新提交又冒出三层嵌套 <div class="wrapper"><div class="inner"><div class="content">。
<h3>怎么快速识别哪些 HTML 必须优先重构</h3>
<p>别通读整个文件。打开 DevTools → Elements 面板，执行这几条命令，命中率高、风险明确：</p>
<ul>
<li>
<code>document.querySelectorAll('div[onclick], div[onmouseover]') 返回结果 > 5 个 → JS 强耦合 DOM 结构，必须加 data-legacy-js 标记并隔离逻辑
document.querySelectorAll('div[class*="title"], div[class*="nav"], div[class*="footer"]') → 这些 class 是语义线索，但当前用 <div> 包着，就是重构靶心
<li>
<code>axe.run().then(r => console.log(r.violations.filter(v => v.id === 'region-missing' || v.id === 'heading-order'))) → 若 region-missing 错误数 ≥ 1 或 heading-order 报错 > 0，说明主干结构已不可靠，得先补 <main></main> 和标题层级替换 <div> 时为什么不能全局搜索替换
<p>因为老系统里 <code><div class="header"> 可能出现在三个完全不同的上下文里：页面顶部、弹窗头部、评论区作者信息栏。一刀切替换成 <code><header></header> 会导致：
- CSS 选择器失效：原
div.header + .content 不再匹配 header + .content
- ARIA 关系断裂：JS 里
document.querySelector('div.header').nextElementSibling 拿不到预期节点
- 构建工具报错：Next.js 的
html-webpack-plugin lint 模式会拒绝无 <h1></h1> 的 <header></header>，而弹窗里的 <div class="header"> 本来就不该有 <code><h1></h1>
正确做法是基于 AST 精准定位：只替换父节点为 data-no-rewrite 属性的顶级 <div class="header">，保留 class 并补上 <code>role="banner"（若它确实是全站 banner）。
<main></main> 和 <section></section> 容易踩的硬性规则
这两个标签不是“用了就高级”，而是有浏览器和辅助技术强制校验的语义契约：
-
<main></main> 必须且只能出现一次，且不能嵌套在 <header></header>、<nav></nav>、<footer></footer> 内 —— 即使旧 CSS 依赖 div#main 的绝对定位，也得先把定位逻辑抽到 class 上，再换标签
-
<section></section> 必须自带显式标题（<h2></h2>–<h6></h6>），否则它语义上等价于 <div>；如果只是循环渲染用户列表，每条记录用 <code><article></article>，外层用 <div> 更准确
<li>所有 <code><section></section> 的标题层级必须连续：若页面已有 <h1></h1>，第一个 <section></section> 必须用 <h2></h2>，不能跳到 <h3></h3> —— 否则屏幕阅读器会把后续内容当新章节处理
重构后怎么防止代码质量倒退
人工改一次没用。真正卡住倒退的是三道防线：
- CI 中跑
html-validate，配置 "semantic-elements": "error"，禁止新增 <div class="nav"> 类写法
<li>Git pre-commit hook 执行 <code>npx html-validate --config .htmlvalidate.json src/**/*.html，本地就能拦截低级提交
- 对 legacy class 建立白名单（如
["btn-primary", "text-muted"]），允许保留但禁止新增；新 class 必须符合 BEM 规范，否则 lint 直接失败
最常被忽略的点是：重构不是终点，而是让每个新写的 <section></section> 自带 aria-labelledby、每个 <img> 在模板层强制校验 alt 是否非空——这需要服务端或构建时规则介入，不是前端改几个标签能解决的。
div.header + .content 不再匹配 header + .content
document.querySelector('div.header').nextElementSibling 拿不到预期节点html-webpack-plugin lint 模式会拒绝无 <h1></h1> 的 <header></header>，而弹窗里的 <div class="header"> 本来就不该有 <code><h1></h1>
正确做法是基于 AST 精准定位：只替换父节点为 且无 data-no-rewrite 属性的顶级 <div class="header">，保留 class 并补上 <code>role="banner"（若它确实是全站 banner）。
<main></main> 和 <section></section> 容易踩的硬性规则
这两个标签不是“用了就高级”，而是有浏览器和辅助技术强制校验的语义契约：
-
<main></main>必须且只能出现一次，且不能嵌套在<header></header>、<nav></nav>、<footer></footer>内 —— 即使旧 CSS 依赖div#main的绝对定位，也得先把定位逻辑抽到 class 上，再换标签 -
<section></section>必须自带显式标题（<h2></h2>–<h6></h6>），否则它语义上等价于<div>；如果只是循环渲染用户列表，每条记录用 <code><article></article>，外层用<div> 更准确 <li>所有 <code><section></section>的标题层级必须连续：若页面已有<h1></h1>，第一个<section></section>必须用<h2></h2>，不能跳到<h3></h3>—— 否则屏幕阅读器会把后续内容当新章节处理 - CI 中跑
html-validate，配置"semantic-elements": "error"，禁止新增<div class="nav"> 类写法 <li>Git pre-commit hook 执行 <code>npx html-validate --config .htmlvalidate.json src/**/*.html，本地就能拦截低级提交 - 对 legacy class 建立白名单（如
["btn-primary", "text-muted"]），允许保留但禁止新增；新 class 必须符合 BEM 规范，否则 lint 直接失败
重构后怎么防止代码质量倒退
人工改一次没用。真正卡住倒退的是三道防线：
最常被忽略的点是：重构不是终点，而是让每个新写的 <section></section> 自带 aria-labelledby、每个 <img> 在模板层强制校验 alt 是否非空——这需要服务端或构建时规则介入，不是前端改几个标签能解决的。
