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