105. 废弃标签与替代方案

为什么要了解废弃标签

老教程、老项目里可能还藏着一些废弃标签。知道了哪些不能用，你就不会被误导，也能在 code review 时指出问题。

布局相关废弃标签

这些标签曾经用来做布局，现在都用 CSS：

废弃标签	曾经的用途	现代替代
<center>	居中	text-align: center 或 margin: auto
<font>	字体样式	CSS font-family、font-size
<basefont>	默认字体	CSS body { font-family: ... }
<big>	大字号	CSS font-size
<strike>	删除线	<del> 或 CSS text-decoration: line-through
<tt>	等宽字体	<code> 或 CSS font-family: monospace
<u>	下划线	CSS text-decoration: underline
<plaintext>	纯文本	<pre> 或 <code>
<xmp>	示例文本	<pre><code>
<listing>	代码列表	<pre><code>
<menu> (旧)	菜单列表	<ul>（HTML5 重新定义了 <menu> 但用法不同）

框架相关废弃标签

iframe 还在，但这些彻底不要用了：

废弃标签	替代方案
<frameset>	CSS Flexbox/Grid 或 <iframe>
<frame>	CSS Flexbox/Grid 或 <iframe>
<noframes>	不需要了

视觉样式相关标签

这些标签在 HTML5 中被重新定义了语义，不再是单纯的视觉样式标签。如果你只是想改视觉效果，推荐用 CSS：

标签	HTML5 语义	替代方案
<b>	带来关注但不重要（关键词、产品名）	纯视觉效果用 CSS font-weight
<i>	另一种语气、技术术语、外文短语	纯视觉效果用 CSS font-style

功能相关废弃标签

废弃标签	曾经的用途	现代替代
<applet>	Java 小程序	<object>
<marquee>	跑马灯	CSS 动画或 JS
<blink>	闪烁文字	CSS 动画
<spacer>	空白占位	CSS margin、padding
<dir>	目录列表	<ul>
<multicol>	多列布局	CSS columns 或 Flexbox/Grid
<nobr>	不换行	CSS white-space: nowrap
<noembed>	不支持 embed 时显示	不需要了
<wbr>	可断行位置	仍可用，HTML5 标准

完全废弃的 HTML 属性

除了标签，一些属性也废弃了：

废弃属性	曾经用于	替代
align	对齐	CSS text-align、margin
bgcolor	背景色	CSS background-color
border (table)	表格边框	CSS border
cellpadding	表格内边距	CSS padding
cellspacing	表格间距	CSS border-spacing
valign	垂直对齐	CSS vertical-align
width / height (table)	表格尺寸	CSS width、height
hspace / vspace	图片边距	CSS margin
link / vlink / alink (body)	链接颜色	CSS 伪类选择器
background (body)	背景图	CSS background-image

对比示例

废弃写法

<center>
  <font size="5" color="red">标题</font>
</center>
<table border="1" cellpadding="5" bgcolor="#eee">
  <tr><td align="center" valign="middle">内容</td></tr>
</table>
<marquee>滚动文字</marquee>

现代写法

<h1 class="title">标题</h1>
<table>
  <tr><td>内容</td></tr>
</table>
<div class="marquee">滚动文字</div>

.title {
  text-align: center;
  font-size: 2em;
  color: red;
}
table {
  border: 1px solid #ccc;
  background-color: #eee;
}
td {
  text-align: center;
  vertical-align: middle;
  padding: 5px;
}
.marquee {
  animation: scroll 10s linear infinite;
}

现在依然可用的”老标签”

这些标签虽然在 HTML5 之前就有，但仍然有效且推荐使用：

标签	用途
<iframe>	嵌入其他页面
<embed>	嵌入多媒体（配合 <video>/<audio>）
<object>	嵌入外部资源
<small>	辅助信息、版权声明
<s>	不再准确的内容（删除线，但有语义）
<q>	短引用
<abbr>	缩写
<cite>	引用作品标题
<sub> / <sup>	下标 / 上标
<wbr>	可选换行位置

检查工具

不确定某个标签是否废弃？

• HTML Validator：在线检查 HTML 规范
• MDN 文档：每个标签页面都会标注是否废弃