应使用grep命令或W3C Validator快速识别废弃标签；<font>、<center>、<u>、<strike>、<marquee>等已废弃，需用CSS替代，、虽未废弃但语义弱于、。
怎么快速定位页面里还活着的废弃标签
直接 grep 比等浏览器报错更早发现问题。用这条命令扫 HTML 文件：grep -i -o "<\(font\|center\|u\|strike\|marquee\|frame\|frameset\|noframes\)>" index.html。注意它不匹配 <b> 或 <i>——这两个没被废弃，但语义弱，是否替换得看上下文。
W3C Validator 是更准的判断依据，它会明确标出 Element font is obsolete 这类提示，不是警告，是规范级淘汰声明。
特别小心动态生成的 HTML：JS 里拼字符串时写 innerHTML = "<center>...</center>"，运行时不报错，但 DOM 已偏离语义预期，后续 JS 操作可能失效。
<font> 和 <center> 替换时最常翻车的三件事
别直接套 text-align: center 就完事——它只对行内内容生效，<div>、<section> 这类块级子元素不会动；margin: 0 auto 必须配合 width 或 max-width 才起作用；Flex 布局里忘了给父容器设 height，align-items: center 就看不出垂直居中效果。
立即学习“前端免费学习笔记（深入）”；
<font size="+2"> 这种相对尺寸没有 CSS 直接等价写法，不能硬转成 px，得用 em 或 rem 模拟缩放比例，比如 font-size: 1.5em。
老项目里如果 JS 还在用 document.getElementsByTagName('font')，替换标签后这段脚本会返回空数组，必须同步改掉，否则功能断裂。
为什么用 <section> 替 <div> 反而出问题
语义标签不是字符串替换游戏。<section> 表示文档中一个主题明确、可独立编号的区块；<article> 更严格，要求内容能单独分发（比如 RSS 抓取）。把一个纯样式容器换成 <section>，反而会让屏幕阅读器多读出“section”这个结构词，干扰用户。
真正该换的，是那些 class 名本身就暴露语义的 div，比如 <div class="header"> → <header>，<div class="nav"> → <nav>。而 <div class="wrapper"> 这种纯布局容器，留着 <div> 更诚实。
重构前先问一句：这个容器是不是承载了独立信息单元？如果不是，就别强行套语义标签。
批量替换时工具链怎么选才不踩坑
正则替换仅适用于简单 HTML 片段（比如单个 <title> 标签内容替换），遇到嵌套、脚本、注释就不可靠。真实项目推荐用 tidy-html5 --fix --doctype html5，它基于真实解析器，能处理上下文，比正则安全得多。
CI/CD 中加 html-validate，配 rule "html-validate/no-self-closing": "error"，能提前拦截 <img></img> 这类非法闭合写法——它不会报错，但会破坏 DOM 结构。
所有替换完成后，重点验证三处：表格边框是否变细（<table width="100%"> 在标准模式下失效）、height: 100% 是否还生效、jQuery 的 .offset() 返回值是否偏移——这些八成是旧代码依赖了怪异模式。
