HTML5 移除的元素

问题

HTML5 移除了哪些元素？

解答

HTML5 移除了一批过时的元素，主要分为三类：

1. 纯表现元素

这些元素只用于控制样式，应该用 CSS 替代：

移除的元素	作用	CSS 替代方案
<basefont>	默认字体	body { font-family: ... }
<big>	大号字体	font-size: larger
<center>	居中	text-align: center
<font>	字体样式	font-family, color, font-size
<strike>	删除线	text-decoration: line-through
<tt>	等宽字体	font-family: monospace

<!-- 旧写法 -->
<center><font color="red" size="5">标题</font></center>

<!-- HTML5 写法 -->
<h1 style="text-align: center; color: red; font-size: 2em;">标题</h1>

2. 框架元素

框架技术已被淘汰，用 <iframe> 或单页应用替代：

移除的元素	作用
<frame>	定义框架
<frameset>	框架集合
<noframes>	不支持框架时的内容

<!-- 旧写法（已废弃） -->
<frameset cols="25%,75%">
  <frame src="menu.html">
  <frame src="content.html">
</frameset>

<!-- 现代替代方案 -->
<iframe src="content.html"></iframe>

3. 其他废弃元素

移除的元素	作用	替代方案
<acronym>	首字母缩写	<abbr>
<applet>	Java 小程序	<object>
<dir>	目录列表	<ul>
<isindex>	搜索输入	<input>
<bgsound>	背景音乐	<audio>
<marquee>	滚动文字	CSS 动画

<!-- acronym -> abbr -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- bgsound -> audio -->
<audio src="music.mp3" autoplay loop></audio>

<!-- marquee -> CSS 动画 -->
<style>
.scroll {
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
</style>
<div class="scroll">滚动文字</div>

关键点

• 纯表现元素（<font>、<center>、<big> 等）用 CSS 替代
• 框架元素（<frame>、<frameset>）用 <iframe> 或 SPA 替代
• <acronym> 用 <abbr> 替代
• <applet> 用 <object> 替代
• HTML5 强调结构与样式分离，表现层交给 CSS 处理