结论是：别一上来就全局替换，先用w3c validator定位首个非法嵌套点，再按“保留class+增加语义标签”双轨推进，否则样式崩、js失效、无障碍树错乱三连击会立刻反扑。

直接说结论：别一上来就全局替换 <div>，先用 W3C Validator 定位首个非法嵌套点，再按“保留 class + 增加语义标签”双轨推进，否则样式崩、JS 失效、无障碍树错乱三连击会立刻反扑。 <h3>怎么快速定位第一个 DOM 结构错误</h3> <p>浏览器 Elements 面板看到的结构 ≠ 实际解析结果。肉眼检查 <code><p></p> 里有没有 <div>、<code><main></main> 是否被 <section></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></p> 里写 <div> 会导致 JS 查询失效 <p>浏览器根本不会按你写的解析：<code><p>文字</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div>区块</div>

实际生成的是两个兄弟节点：<p>文字</p> 和 <div>区块</div>。DOM 树结构被强制修正，所有依赖父子关系的逻辑都会断。

• document.querySelector('p > div') 返回 null，因为 <div> 已不在 <code><p></p> 内部
• CSS 选择器如 p div 永远不匹配，导致样式丢失
• 父容器高度塌陷：被“踢出”的 <div> 脱离文档流，外层 <code><p></p> 高度只剩文字行高
• 屏幕阅读器按修正后 DOM 朗读，源码顺序和语音顺序错位，无障碍测试直接失败

语义化替换时怎么避免样式崩塌

直接删掉 class="header" 改成 <header></header> 是最常见翻车点。CSS 选择器强耦合在 div.header 上，一换就白屏。

• 第一步：改成 <header class="header"></header>，同时保留旧选择器 div.header, header.header，给样式迁移留缓冲期
• 第二步：同步更新 JS 查询，把 document.querySelector('div.header') 批量替换成 document.querySelector('header')，但要排除第三方库内部调用（如 node_modules/xxx）
• 第三步：对复杂组件，先加 data-semantic="header" 过渡，让 CSS 和 JS 分阶段切换，比硬切更可控
• 禁止把 <main></main> 塞进 <header></header> 或 <nav></nav> —— 这是硬性语义规则，哪怕旧 CSS 依赖 div#main 的绝对定位，也得先抽离再重写定位逻辑

CI 流水线里怎么卡住新问题不倒退

人工改完一次，下次 PR 又冒出一堆 <div class="card-body">，说明没建立防线。自动化不是锦上添花，是防止退回原点的底线。 <ul> <li>在 GitHub Actions 或 GitLab CI 中加 <code>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> 换成 <code><main></main>，而是让每个新写的 <section></section> 都自带 aria-labelledby、每个 <img> 都强制校验 alt 是否非空——语义和可访问性必须成为代码的默认行为，而不是每次都要靠人想起来补。