<font>、<center>、<u>、<strike>等标签会破坏可访问性：它们无语义，导致屏幕阅读器丢失重要上下文；应改用语义化标签（如<ins>、<del>、<mark>）和ARIA属性（如role="alert"）配合CSS实现样式与功能分离。
<font>、<center>、<u>、<strike>这类格式化标签不是“过时而已”，它们会直接让屏幕阅读器丢失语义上下文，导致读屏用户无法理解文本重要性、结构关系甚至内容类型。
为什么<font>会让错误提示变成静音
写<font color="red">密码错误</font>，屏幕阅读器只读“密码错误”，完全不提“错误”这个语义。它不解析颜色，也不猜意图——红色对人是警告，对AT只是普通文本流中的一段字。
- 正确做法：用
<span class="error">+ CSScolor，再加role="alert"或aria-live="polite"显式声明状态 - 更优解：直接用
<strong class="error">，既保留强调语义，又避免引入废弃标签 - 千万别删完
<font>只剩纯文本——丢掉的不只是样式，是可访问性信号
<u>和<strike>不是“下划线/删除线”的快捷写法
屏幕阅读器遇到<u>已过期</u>，读出来就是“已过期”，不会说“已过期（删除）”；同理，<strike>也不会触发“已删除”播报。这些标签没有机器可识别的语义，只影响渲染。
- 表示内容插入：用
<ins>，读屏器会读“插入：xxx” - 表示内容删除：用
<del>，读屏器会读“删除：xxx” - 表示高亮/强调：用
<mark>，部分AT支持语调变化 - 纯视觉下划线（如链接伪类）应通过CSS实现，而非
<u>
构建流程里不拦住<center>，上线后就等于放弃居中区域的可访问性
<center><h2>标题</h2></center>被浏览器解析时，<center>会被静默降级为<div>，但它的包裹行为破坏了标题的嵌套层级——原本该是<body> > <h2>，现在变成<body> > <div> > <h2>。这会导致：
立即学习“前端免费学习笔记（深入）”；
- 标题大纲断裂，屏幕阅读器无法建立章节树
- 某些AT把
<div>当无意义容器，跳过其内部标题 - CSS移除后，源码顺序与逻辑流错位，禁用样式验证失效
真正难处理的，是那些被JS当作定位锚点的<font>或<center>——比如document.querySelector("font[size='4']")还在运行，你一删，功能就断。删之前务必全局搜querySelector、getElementsByClassName和所有data-属性关联。
