哈喽，大家好，欢迎来到【哈希茶馆】！作为一名全栈开发者，我们每天都在和各种代码打交道。HTML 作为网页的骨架，也在不断进化。HTML5 的到来，不仅带来了许多令人兴奋的新特性，也悄悄地“劝退”了一些曾经熟悉的老标签。
那么，HTML5 到底废弃了哪些旧标签？我们又该用什么来替代它们呢？今天，我们就来一起梳理一下，帮助大家写出更规范、更现代的 HTML 代码。
为什么 HTML5 要废弃一些标签？
在深入了解具体标签之前，我们先思考一个问题：为什么要有“废弃”这个操作？主要原因有以下几点：
关注点分离：早期的 HTML 标签很多都带有样式属性，比如 用来定义字体和颜色。HTML5 强调结构与表现分离，样式应该交给 CSS 来处理。提升语义化：HTML5 引入了更多语义化标签（如
了解了这些原因，我们再来看具体的废弃标签就更容易理解了。
纯表现型标签：让 CSS 来接管样式
这类标签主要用于控制页面的外观，但在 HTML5 中，它们的职责已经完全交给了 CSS。
1. 和
这两个标签曾经是控制文字大小、颜色和字体的主力。
旧代码示例 (不推荐)：
这是红色的Arial字体，5号大小。
现代替代方案 (使用 CSS)：
这是红色的Arial字体，5号大小。
.custom-text {
color: red;
font-size: 20px; /* CSS中没有直接的size="5"对应，需要根据实际效果调整 */
font-family: Arial, sans-serif; /* 提供备选字体 */
}
通过为
标签（或其他任何文本容器标签）添加一个类名 custom-text，然后在 CSS 中定义这个类的样式，我们可以实现同样甚至更丰富的效果，并且代码更清晰，易于维护。
2.
顾名思义，这个标签用于将其中的内容居中显示。
旧代码示例 (不推荐)：
这段文字会居中显示。
现代替代方案 (使用 CSS)：
对于块级元素居中：
这段文字会居中显示。
.center-container p {
text-align: center; /* 文本居中 */
}
/* 如果父容器是flex或grid，也可以用它们来居中 */
.center-container-flex {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* 如果子元素是堆叠的 */
}
对于文本内容，可以使用 text-align: center;。对于块级元素（如
, 设为 display:block 后），可以使用 margin: 0 auto; 来实现水平居中。更现代的布局方式如 Flexbox 和 Grid 也能非常方便地实现各种居中效果。
3. , , , , ,
这些标签也主要用于改变文本的视觉样式：
: 加粗 (Bold): 斜体 (Italic): 下划线 (Underline) (或 ): 删除线 (Strikethrough): 放大字号: 打字机字体 (Teletype)
现代替代方案：
强调语义时：
替代 (表示重要性)
替代 (表示强调)
纯样式时 (使用 CSS)：
font-weight: bold; 替代
font-style: italic; 替代
text-decoration: underline; 替代
text-decoration: line-through; 替代 或 (注意： 仍是有效的 HTML5 标签，表示不再准确或相关的内容)
font-size: larger; 或具体值替代
font-family: monospace; 替代
代码示例：
这段文字很重要。
这段文字需要强调。
这段文字只是视觉上加粗。
这段文字只是视觉上倾斜。
这段文字有下划线。
这段文字有删除线。
这段内容已不再准确。
这段文字稍大一些。
这段文字是等宽字体。
HTML5 鼓励我们使用具有语义的标签。如果仅仅是为了视觉效果，首选 CSS。如果文本本身具有特定的含义（如重要、强调），则使用 和 。 标签在 HTML5 中被重新定义，用于表示那些不再正确或不再相关的内容，它是有语义的。
框架型标签：拥抱现代布局
,
现代替代方案：
Frameset 存在很多问题，比如破坏 URL、不利于 SEO、打印困难、可用性差等。现代 Web 开发更倾向于单页面体验或通过 CSS 和 JavaScript 构建灵活的布局。
其他被废弃或改变用途的标签
1.
用于表示首字母缩略词。
旧代码示例 (不推荐)：
WWW
现代替代方案 ():
WWW is the best.
HTML
讲解： HTML5 中， 标签统一用于表示缩写词，无论是首字母缩写还是其他类型的缩写。
2.
用于嵌入 Java 小程序。
旧代码示例 (不推荐)：
现代替代方案 (
Java applet failed to load.
Java Applet 技术由于安全性和插件依赖问题，已经基本被淘汰。现代 Web 应用更多依赖 JavaScript、WebAssembly 或其他嵌入技术。如果确实需要嵌入特定类型的插件内容，
3.
- 非常相似。
- 文件1
- 文件2
旧代码示例 (不推荐)：
现代替代方案 (
- ):
- 文件1
- 文件2
- 选项A
- 选项B
- (无序列表) 完全可以替代它们的功能，并且语义更清晰。注意：HTML5 中
- 或
- 。
4.
用于在文档中创建一个单行文本输入框，用于查询文档。
旧代码示例 (不推荐)：
现代替代方案 (HTML 表单):
拥抱语义化：新标签带来的好处
废弃旧标签的同时，HTML5 引入了许多新的语义化标签，如：
使用这些语义化标签，可以让我们的网页结构更清晰，不仅方便自己和团队维护，也更有利于搜索引擎理解页面内容，提升 SEO 效果，同时还能改善网页的可访问性。
总结
技术的浪潮滚滚向前，HTML 也在不断进化。了解并使用最新的 HTML 标准，摒弃那些被废弃的标签，不仅能让我们的代码更规范、更现代，也能让我们享受到新技术带来的便利和优势。希望今天的分享能帮助大家更好地理解 HTML5 的这些变化。
如果你觉得这篇文章对你有帮助，欢迎点赞、在看和分享给更多的小伙伴！我们下期再见！
🔥 关注我的公众号「哈希茶馆」一起交流更多开发技巧