HTML5已废弃<font>、<center>、<u>、<strike>、<marquee>等标签，应使用CSS或语义化标签替代；可用W3C Validator检测或grep命令快速筛查，避免语义缺失与无障碍问题。
怎么快速找出页面里还藏着哪些废弃标签
浏览器不会报错，但<font>、<center>、<u>、<strike>、<marquee>这些标签在 HTML5 中已明确废弃。继续用会破坏语义、干扰无障碍树，且部分功能早已被 CSS 完全覆盖。
最直接的办法是跑 W3C Validator —— 它会明确提示 Element font is obsolete 这类信息，不是警告，是规范级标记。
本地快速筛查可用这条命令：
grep -i -o "<\(font\|center\|u\|strike\|marquee\|frame\|frameset\|noframes\)>" index.html
-
<b>和<i>没被废弃，但语义弱于<strong>和<em>，需结合上下文判断是否该替换 -
<img>标签写成<img src="x"></img>是非法嵌套，会导致 DOM 解析中断，后续结构错乱，控制台却无报错 - 别忽略
valign属性——它和align一样，在<td>上已被彻底移除，必须统一换成vertical-align
<center> 为什么一用就失效
编辑器（如 VS Code）会标红警告 The element center is obsolete，构建工具（如 HTMLHint）报 W027。这不是兼容性问题，而是 HTML5 明确禁止使用：它不语义、不可访问、无法被屏幕阅读器解析，且与样式分离原则冲突。
立即学习“前端免费学习笔记（深入）”；
更麻烦的是，<center> 只对行内内容有效；包裹 <div> 或 <section> 时，内容根本不会居中。
- 文字或图片居中 → 给父容器加
text-align: center - 单个块级元素水平居中 → 设
margin: 0 auto+ 显式width或max-width - 全面居中（含垂直）→ 父容器用
display: flex; justify-content: center; align-items: center - 绝对定位居中（慎用）→ 需同时写
top: 50%、left: 50%和transform: translate(-50%, -50%)
<font> 和 body 的废弃属性怎么安全替换
<font color="red" size="4"> 这类写法不仅体积大，还会触发怪异模式解析，拖慢渲染。更重要的是，size="4" 在不同浏览器解释不一，没有固定像素映射；CSS 中应基于 em、rem 或 clamp() 控制字号。
body 的 background、text、link、alink、vlink、bgcolor 等属性，HTML5 已彻底删除。JS 读取 document.body.text 返回 undefined，赋值也无效。
-
<font color="red">→ 改用<span class="highlight">+ CSS：.highlight { color: #d32f2f; } -
body background="bg.jpg"→ 必须走 CSS：body { background-image: url(bg.jpg); background-size: cover; background-repeat: no-repeat; } -
text、link等颜色 → 分别对应body { color: #333; }、a:link { color: #0066cc; }、a:active { color: #ff3300; }、a:visited { color: #663399; } - 动态改背景时别碰
document.body.background—— 它是只读属性，赋值后读回来永远是空字符串
哪些废弃标签连“还能凑合用”都不成立
不是所有废弃标签都还被浏览器宽容支持。<frame>、<frameset>、<bgsound>、<marquee>、<blink> 这些标签已彻底失效：截至 2026 年 7 月，现代浏览器不再解析它们，部分甚至会直接忽略或触发怪异模式。
<frameset> 在 HTML5 中语法无效，浏览器直接跳过；<marquee> 不仅废弃，而且无无障碍支持、无标准行为，必须重写为 CSS 动画或 JS 实现。
真正容易被忽略的，是那些“看起来还在工作”的标签——比如 <u> 虽然仍能渲染下划线，但它语义上表示“非文本标注”，不是强调；想强调就该用 <strong>，要下划线就该用 text-decoration: underline。
