应使用grep命令批量识别废弃标签：grep -i -o"<(font|center|u|strike|marquee|frame|frameset|noframes)>"*.html，配合W3C Validator和Lighthouse验证语义与可访问性。
怎么识别页面里藏着哪些废弃标签
浏览器不报错，不代表它们没问题。<font></font>、<center></center>、<u></u>、<strike></strike>、<marquee></marquee>这些标签在 HTML5 中已明确废弃，W3C Validator 会直接标出 Element font is obsolete 这类提示，连行号都给你标好。
本地批量筛查更快：运行这条命令：
grep -i -o "<\(font\|center\|u\|strike\|marquee\|frame\|frameset\|noframes\)>" *.html
注意：-i 忽略大小写（防 <FONT> 漏扫），-o 只输出匹配片段；别加 -r 往 node_modules 或构建目录里递归，容易误伤。
为什么不能只删标签，还得重写语义结构
删掉 <font color="red"></font> 不等于解决了问题——它原本表达的是“强调”或“错误提示”，直接删掉只剩裸文本，读屏器和搜索引擎就收不到任何信号。
立即学习“前端免费学习笔记（深入）”；
-
<b></b>和<i></i>虽未废弃，但只是视觉样式；该用<strong></strong>表重要性、<em></em>表强调 -
<center></center>必须换成 CSS：块内文本居中用text-align: center，块级元素居中用margin: 0 auto或display: flex -
<marquee></marquee>不仅废弃，还无标准行为、无键盘焦点、无读屏支持，必须重写为@keyframes动画或 JS 控制的滚动容器
打包时怎么安全批量清理废弃标签和冗余属性
别靠肉眼翻，也别用“一键清空所有标签”的脚本——那会把 <strong></strong>、<time></time> 这类语义标签也干掉。
推荐分两步走：
- 用正则先筛出目标标签：比如 VS Code 中启用正则替换，搜
<(font|center|u|strike|marquee)[^>]*>([\s\S]*?)</\1>，替换为$2（保留内容） - 同步删掉配套冗余属性：
align、valign、border、cellpadding、cellspacing、language、type="text/javascript" - 特别注意：
class和id不能盲目删——哪怕当前没对应 CSS，JS 可能还在用它们做 DOM 查询
清理后怎么验证可访问性没被破坏
删完跑一遍 Lighthouse 的 Accessibility 审计，重点看这几项：
- 颜色对比度是否跌破 4.5:1（旧
<font color="gray"></font>删了但没补 CSS，文字可能变不可读） - 所有交互元素是否有可见焦点状态（
<button></button>被旧框架 reset 掉 outline 后，键盘用户会迷路） - 表单控件是否仍有
label[for]关联（删了<div class="form-group"> 却没补 <code>for/id，读屏器就找不到输入框含义）真正难的不是找到废弃标签，而是判断它当时承担的语义角色——那个
<u></u>是下划线链接？还是强调？还是纯装饰？没搞清这点，删得越快，可访问性缺口越大。
