重构老旧项目：HTML代码质量平滑升级方案

应先冻结样式依赖再分层解耦：筛选table相关CSS抽成legacy-table.css；对有语义意图的表格改用<div role="grid">+ARIA属性；纯展示型表格保留<table>；内联style和onclick需行为迁移而非暴力清除；IE条件注释与模板字符串须按构建流程平滑替换。

老旧HTML里嵌套<table>布局怎么安全替换成语义化标签

直接全局替换<table>为<div>或<section>会崩样式，尤其当CSS里大量用了td、tr选择器。必须先冻结样式依赖，再分层解耦。

• 用浏览器开发者工具筛选出所有实际影响渲染的table相关CSS规则（比如table td{padding:4px}），单独抽成legacy-table.css并保留引用
• 对每个<table class="grid-layout">这类有明确语义意图的表格，优先改用<div role="grid"> + aria-row/aria-col，而非盲目套<section>
• 纯展示型表格（如价格对比、参数列表）保留<table>——它本就是语义正确的，强行改成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遗留的<!--[if IE]>条件注释如何平滑移除

条件注释本身在Chrome/Firefox里被当普通注释忽略，但它的存在会让构建工具误判兼容性需求，导致不敢升级Babel目标或CSS前缀策略。移除前必须确认替代方案已生效。

• 检查条件注释包裹的内容：如果是加载html5shiv.js，确认现代打包已通过@babel/preset-env自动注入polyfill，且target设为["defaults", "not IE 11"]
• 如果是针对IE8的hack样式（如*display:inline），用PostCSS插件autoprefixer配browserslist剔除IE8后，这些规则会被自动过滤掉
• 最后一步：全局搜索<!--[if（注意转义方括号），逐个确认无真实IE8用户访问日志后再删除，别信“没人用IE了”这种假设

模板字符串混在HTML里（<%= name %>）怎么对接现代构建流程

老旧项目常用服务端模板语法直接写在HTML里，Webpack/Vite默认不处理，直接打包会留空或报错。不能靠正则替换，得让构建系统识别并预编译。

立即学习“前端免费学习笔记（深入）”；

• 用html-webpack-plugin的templateParameters注入变量，把<%= title %>改成<%= htmlWebpackPlugin.options.title %>
• 若用Vite，装vite-plugin-html，配置inject: { title: 'My App' }，模板中写<%= title %>即可
• 最危险的是<%= JSON.stringify(data) %>这类——必须用escape函数防XSS，推荐改用data-json属性存JSON字符串，JS里JSON.parse(el.dataset.json)取值

语义化不是贴标签比赛，而是让每个标签承担它该担的责任。最容易被跳过的其实是测试环节：改完一个页面后，用axe.run()扫一遍无障碍，用Lighthouse看下SEO和性能分——分数掉下去的地方，往往就是你没真正理解那段HTML原本在做什么。