结论是：别一上来就全局替换<div>，先用W3C Validator定位首个非法嵌套点，再按“保留class+增加语义标签”双轨推进，否则样式崩、JS失效、无障碍树错乱三连击会立刻反扑。
直接说结论：别一上来就全局替换 <div>，先用 W3C Validator 定位首个非法嵌套点，再按“保留 class + 增加语义标签”双轨推进，否则样式崩、JS 失效、无障碍树错乱三连击会立刻反扑。
怎么快速定位第一个 DOM 结构错误
浏览器 Elements 面板看到的结构 ≠ 实际解析结果。肉眼检查 <p> 里有没有 <div>、<main> 是否被 <section> 包裹，效率极低且容易漏。W3C Validator 不渲染、不执行 JS，只校验 content model，报错精准到标签层级。
- 打开 validator.w3.org → “Validate by Input” → 粘贴出问题的 HTML 片段（不是整个文件，而是疑似区域）
- 重点盯第一条 Error，比如
Element div not allowed as child of element p或Element main not allowed as child of element header - 忽略后续 Warning——它们大概率是第一条 Error 引发的连锁反应，修完第一个，后面常自动消失
为什么 <p> 里写 <div> 会导致 JS 查询失效
浏览器根本不会按你写的解析：<p>文字<div>区块</div></p> 实际生成的是两个兄弟节点：<p>文字</p> 和 <div>区块</div>。DOM 树结构被强制修正，所有依赖父子关系的逻辑都会断。
-
document.querySelector('p > div')返回null，因为<div>已不在<p>内部 - CSS 选择器如
p div永远不匹配，导致样式丢失 - 父容器高度塌陷：被“踢出”的
<div>脱离文档流，外层<p>高度只剩文字行高 - 屏幕阅读器按修正后 DOM 朗读，源码顺序和语音顺序错位，无障碍测试直接失败
语义化替换时怎么避免样式崩塌
直接删掉 class="header" 改成 <header> 是最常见翻车点。CSS 选择器强耦合在 div.header 上，一换就白屏。
立即学习“前端免费学习笔记（深入）”；
- 第一步：改成
<header class="header">，同时保留旧选择器div.header, header.header，给样式迁移留缓冲期 - 第二步：同步更新 JS 查询，把
document.querySelector('div.header')批量替换成document.querySelector('header')，但要排除第三方库内部调用（如node_modules/xxx） - 第三步：对复杂组件，先加
data-semantic="header"过渡，让 CSS 和 JS 分阶段切换，比硬切更可控 - 禁止把
<main>塞进<header>或<nav>—— 这是硬性语义规则，哪怕旧 CSS 依赖div#main的绝对定位，也得先抽离再重写定位逻辑
CI 流水线里怎么卡住新问题不倒退
人工改完一次，下次 PR 又冒出一堆 <div class="card-body">，说明没建立防线。自动化不是锦上添花，是防止退回原点的底线。
- 在 GitHub Actions 或 GitLab CI 中加
npm run html:lint步骤，失败不合并 PR - 用
html-validate配置"semantic-elements": "error"，禁止新增非语义容器 - 本地 pre-commit hook 运行
npx html-validate --config .htmlvalidate.json src/**/*.html，提前拦截 - 对 legacy class 建立白名单（如
["btn-primary", "text-muted"]），允许保留但禁止新增；新 class 必须符合 BEM 规范，否则 lint 报错
真正难的不是把 <div> 换成 <main>，而是让每个新写的 <section> 都自带 aria-labelledby、每个 <img> 都强制校验 alt 是否非空——语义和可访问性必须成为代码的默认行为，而不是每次都要靠人想起来补。
