应先冻结样式依赖再分层解耦：筛选table相关css抽成legacy-table.css；对有语义意图的表格改用+aria属性；纯展示型表格保留；内联style和onclick需行为迁移而非暴力清除；ie条件注释与模板字符串须按构建流程平滑替换。
老旧HTML里嵌套<table>布局怎么安全替换成语义化标签
<p>直接全局替换<code><table>为<code><div>或<code><section></section>会崩样式，尤其当CSS里大量用了td、tr选择器。必须先冻结样式依赖，再分层解耦。
- 用浏览器开发者工具筛选出所有实际影响渲染的
table相关CSS规则（比如table td{padding:4px}），单独抽成legacy-table.css并保留引用
- 对每个
<table class="grid-layout">这类有明确语义意图的表格，优先改用<code><div role="grid"> + <code>aria-row/aria-col，而非盲目套<section></section>
- 纯展示型表格（如价格对比、参数列表）保留
<table>——它本就是语义正确的，强行改成<code>flex反而增加无障碍复杂度
内联style和onclick属性怎么批量剥离又不中断交互
搜索onclick=或style=字符串直接删会丢功能，得用“行为迁移”代替“暴力清除”。关键是把DOM操作从HTML里拎出来，但保持执行时机一致。
- 用正则
onclick="([^"]+)"提取逻辑，转成data-onclick-handler="xxx"，再在JS入口统一绑定：document.querySelectorAll('[data-onclick-handler]').forEach(el => el.addEventListener('click', handlers[el.dataset.onclickHandler]))
- 内联
style先用getComputedStyle(el)抓出现值，生成对应CSS类（如.bg-red-500{background:red}），再用className替换style属性
- 注意
document.write()和document.writeln()调用——这些必须重写为innerHTML或insertAdjacentHTML，否则在现代文档流下会清空整个页面
IE8遗留的
table相关CSS规则（比如table td{padding:4px}），单独抽成legacy-table.css并保留引用<table class="grid-layout">这类有明确语义意图的表格，优先改用<code><div role="grid"> + <code>aria-row/aria-col，而非盲目套<section></section>
<table>——它本就是语义正确的，强行改成<code>flex反而增加无障碍复杂度
内联style和onclick属性怎么批量剥离又不中断交互
搜索onclick=或style=字符串直接删会丢功能，得用“行为迁移”代替“暴力清除”。关键是把DOM操作从HTML里拎出来，但保持执行时机一致。
- 用正则
onclick="([^"]+)"提取逻辑，转成data-onclick-handler="xxx"，再在JS入口统一绑定：document.querySelectorAll('[data-onclick-handler]').forEach(el => el.addEventListener('click', handlers[el.dataset.onclickHandler])) - 内联
style先用getComputedStyle(el)抓出现值，生成对应CSS类（如.bg-red-500{background:red}），再用className替换style属性 - 注意
document.write()和document.writeln()调用——这些必须重写为innerHTML或insertAdjacentHTML，否则在现代文档流下会清空整个页面
