html结构重构不是重写，而是用语义标签“校准”内容意图，良构性为底线；需依div占比超60%、class无业务语义、tab焦点跳脱三类信号判断优先级；替换时须满足独立性与标题要求，验证须通过lighthouse无障碍审计、纯html可读性及dom变更聚焦性测试。
老项目HTML不能直接重写，必须用渐进式升级——先让现有结构“活下来”，再分阶段替换语义标签、剥离冗余class、验证无障碍可用性。
怎么判断哪段HTML该优先重构
别从最丑的开始改。先跑这三行命令看真实信号：
-
document.querySelectorAll("div").length / document.querySelectorAll("*").length> 0.6 → 这类页面必须动 -
Array.from(document.querySelectorAll("[class]")).filter(el => el.className.split(" ").some(c => /^box|wrap|container/.test(c))).length→ class命名无业务含义，说明语义已丢失 - 按
Tab键走一遍焦点流，如果顺序跳到页脚再弹回导航栏 → 结构层级错乱，main或nav位置大概率错了
替换div时为什么不能全换成section
section不是“视觉分块”，而是“有主题的内容区”。它必须满足两个条件：能独立成文、有对应标题（h2或更高）。否则浏览器和屏幕阅读器会误判信息权重。
- 错误用法：
<div class="sidebar"></div>→<section class="sidebar"></section>（缺少主题与标题） - 正确替代：
<aside><h2>相关文章</h2>...</aside>或<section aria-labelledby="related-title"><h2 id="related-title">相关文章</h2>...</section> -
header和footer必须是body或最近的article/section的直系子元素；嵌套错层会导致NVDA等工具跳过整个区域
如何验证重构没引入新兼容问题
不靠人眼扫，用三个硬指标卡住上线门槛：
- Lighthouse Accessibility审计中，“heading-levels”、“landmark-roles”、“logical-tab-order”三项必须全部通过
- 禁用CSS后手动阅读HTML源码：是否仍能按“标题→导语→正文→侧边栏→页脚”自然顺序理解内容
- 在Chrome DevTools Elements面板里右键任意容器 → “Break on” → “Attribute modifications”，观察JS是否因class名变更意外触发DOM操作（比如旧JS绑了
document.querySelector(".nav-wrap")，而你已删掉这个class）
最常被忽略的是：重构后data-属性没同步迁移。比如原div class="product-card" data-id="123"改成article data-product-id="123"，但JS还读el.getAttribute("data-id")——这类断裂不会报错，只会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
