应使用 grep 命令批量扫描残留的 <font>、<center> 等废弃标签，并优先用语义化标签和 CSS 类替代，避免内联样式，按内容类型选择合适的居中方案，同时清理相关废弃属性及 JS 中动态拼接的废弃标签。
如何快速定位页面里残留的 <font> 和 <center> 标签
浏览器不报错，但它们已从 HTML5 规范中彻底删除，W3C Validator 会明确标出 Element font is obsolete 或 Element center is obsolete。本地批量扫描最省事的是这条命令：grep -i -o "<\(font\|center\|u\|strike\|marquee\)>" *.html。注意别漏掉内联写法，比如 <center align="center"> 或 <font face="Arial" size="3"> —— 这些 align、size、face 属性全被忽略，连带触发控制台警告。
<font> 替换时为什么不能只加 style 属性
直接把 <font color="#f44">错误</font> 换成 <span style="color: #f44">错误</span> 虽能“跑起来”，但埋了三个隐患：① 内联样式无法响应暗色模式；② 屏幕阅读器读不出语义，“红色”不等于“错误”；③ 后续想统一改错字颜色，得全局搜 style="color:，而不是改一个 class。
更稳妥的做法是：优先用语义化标签承载含义，再配 CSS：
-
<font color="#d32f2f">错误</font>→<span class="error-text">错误</span>，配合.error-text { color: #d32f2f; } -
<font size="4">标题</font>→ 改用<h3>标题</h3>或<strong class="heading">标题</strong>，字号由 CSS 控制 -
<font face="SimSun">中文</font>→ 移到 CSS 的font-family声明里，必须提供 fallback 字体链，如"Microsoft YaHei", "PingFang SC", sans-serif
<center> 删除后内容突然左对齐，该怎么修
这不是 bug，是你误以为 text-align: center 能替代整个 <center> 的行为。实际上，<center> 隐式把子元素当行内内容处理，而 text-align 只影响行内级内容（文字、<img>、<span>），对 <div>、<section> 这类块级元素无效。
立即学习“前端免费学习笔记（深入）”；
修复前先判断你要居中的对象类型：
- 纯文本或
<img>→ 给父容器加text-align: center - 定宽块（如登录框）→ 子元素设
margin: 0 auto，但必须满足：display 是block、有明确width（不能是100%）、没用float或position: absolute - 不定宽内容或需要垂直居中 → 父容器用
display: flex; justify-content: center; align-items: center，注意子元素若用了float会退出 flex 流 - 弹窗类绝对定位元素 → 父容器设
position: relative，子元素用position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
老项目批量重构时最容易忽略的耦合点
单独删掉 <font> 和 <center> 往往不够。它们常和这些废弃属性一起出现，一并清理才能真正稳定：
-
<table align="center">→ 改为<table class="table-centered">+.table-centered { margin: 0 auto; } -
<p align="right">或<div valign="middle">→ 全部移除，改用 CSS 类控制对齐 - 嵌套多层
<center><center><font>→ 先解构结构层级，再按语义重写，别硬套一层div包着另一层div - JS 动态拼接的 HTML 字符串里藏着
<center>→ 搜索innerHTML = "或模板字符串中的`<center>`，这类地方最易漏检
真正耗时的不是替换标签，而是确认每个居中/变色操作背后的意图：是强调语义（如错误提示）、还是纯视觉装饰（如节日 banner 文字）？前者必须绑定语义类名，后者才考虑 utility class 或内联样式。
