优先重构纯语义命名的div（如class="header"）、焦点顺序错乱区块及无效嵌套结构，替换为header/main/article等语义标签，并确保css选择器与js查询同步更新，验证lighthouse无障碍审计、纯文本可读性及dom层级合理性。
怎么判断哪块HTML该优先动
别一上来就全局替换。先用浏览器开发者工具执行这行代码：document.querySelectorAll("div").length / document.querySelectorAll("*").length，结果超过 0.6 就说明 div 泛滥，但真正要动的不是所有 div，而是那些只靠 class="header"、class="main-content" 这类纯语义命名支撑结构的节点——它们是重构收益最高、风险最低的切入点。
另外，打开页面后按 Tab 键测试焦点顺序：如果焦点跳到页脚再突然回到导航栏，说明 DOM 结构和视觉流错位，这类区块必须优先调整，否则无障碍审计必然失败。
- 只改有明确业务含义的容器，比如
class="article-list"→<section></section>，而class="clearfix"或class="wrap"这类纯样式用途的 div 暂时不动 - 避免在
<nav></nav>里塞面包屑或分页链接，它们不属于主导航，强行塞进去会破坏屏幕阅读器的N快捷键行为 - 检查
<main></main>是否被包在<article></article>或<aside></aside>里——这是无效嵌套，会导致 Lighthouse 报landmark-roles错误
如何确保CSS不崩、JS不受影响
语义标签替换本身不改变渲染，但 CSS 和 JS 很可能依赖旧选择器。重点排查三类写法：
-
div.header→ 改成header，否则样式失效 -
$('.content > div')→ 改成$('.content > section, .content > article')或更稳妥地加回 class（如<section class="content-item"></section>） - 用
document.querySelector('div[role="main"]')的 JS，应同步改为document.querySelector('main')，否则运行时报Cannot read property 'querySelector' of null
建议先在 DevTools Console 执行 getComputedStyle(document.querySelector("div.nav")).display，确认旧样式是否真由 div 驱动；如果不是，说明 class 才是关键，标签可放心换。
main 和 article 到底怎么选
<main></main> 是页面级语义容器，每个 HTML 文档只能有一个；<article></article> 是内容级独立单元，可复用、可 syndication（比如 RSS 抓取）。二者不是替代关系，而是协作关系。
- 博客列表页：外层用
<main></main>，每篇博文用<article></article> - 仪表盘首页：多个数据卡片不是独立内容，用
<section></section>更合适；若某张卡片是“今日公告”，且带独立 URL 和发布时间，则可用<article></article> - 千万别把整个
<main></main>塞进<article></article>—— 这违反 HTML5 规范，Lighthouse 会标红document-outline
一个快速验证法：删掉所有 CSS 后，纯文本能否按逻辑顺序读完？如果“页脚”出现在“主标题”前面，大概率是 <main></main> 位置错了。
重构后怎么验证才算过关
不是看代码漂亮了，而是看三个硬指标是否达标：
- Lighthouse Accessibility 审计中，
heading-levels、landmark-roles、logical-tab-order全部通过 - 关闭浏览器样式（DevTools → Elements → 右键任意元素 → “Hide styles”），纯 HTML 内容仍能按视觉流线性阅读
- 用
document.querySelectorAll("*").forEach(el => console.log(el.tagName.toLowerCase(), el.children.length))扫描，确认没有单个元素子节点超 50 个——这种节点极难维护，应拆为多个<section></section>
最容易被忽略的是嵌套层级：header/footer 必须是 或最近的 <article></article>/<section></section> 的直接子元素，错一层就会让辅助技术误判上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
