LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

告别旧标签：HTML5 废弃标签清单与现代替代方案
freeflydom
2025年6月5日 10:48 本文热度 146

为什么 HTML5 要废弃一些标签？

在深入了解具体标签之前，我们先思考一个问题：为什么要有“废弃”这个操作？主要原因有以下几点：

  1. 关注点分离：早期的 HTML 标签很多都带有样式属性，比如 <font> 用来定义字体和颜色。HTML5 强调结构与表现分离，样式应该交给 CSS 来处理。
  2. 提升语义化：HTML5 引入了更多语义化标签（如 <article>, <nav>, <aside> 等），使得网页结构更清晰，也更利于 SEO 和无障碍访问。一些旧的、语义模糊或不正确的标签自然就被淘汰了。
  3. 提升性能和安全性：某些旧标签（如 <applet>）可能存在安全隐患或性能问题。
  4. 避免冗余和混淆：一些功能重复或已不再推荐使用的标签被废弃，以简化 HTML 规范。

了解了这些原因，我们再来看具体的废弃标签就更容易理解了。

纯表现型标签：让 CSS 来接管样式

这类标签主要用于控制页面的外观，但在 HTML5 中，它们的职责已经完全交给了 CSS。

1. <font> 和 <basefont>

这两个标签曾经是控制文字大小、颜色和字体的主力。

旧代码示例 (不推荐)：

<font color="red" size="5" face="Arial">这是红色的Arial字体，5号大小。</font>

现代替代方案 (使用 CSS)：

<p class="custom-text">这是红色的Arial字体，5号大小。</p>

.custom-text {
  color: red;
  font-size: 20px; /* CSS中没有直接的size="5"对应，需要根据实际效果调整 */
  font-family: Arial, sans-serif; /* 提供备选字体 */
}

通过为 <p> 标签（或其他任何文本容器标签）添加一个类名 custom-text，然后在 CSS 中定义这个类的样式，我们可以实现同样甚至更丰富的效果，并且代码更清晰，易于维护。

2. <center>

顾名思义，这个标签用于将其中的内容居中显示。

旧代码示例 (不推荐)：

<center>
  <p>这段文字会居中显示。</p>
  <img src="your-image.jpg" alt="居中图片">
</center>

现代替代方案 (使用 CSS)：

对于块级元素居中：

<div class="center-container">
  <p>这段文字会居中显示。</p>
  <img src="your-image.jpg" alt="居中图片" style="display: block; margin: 0 auto;">
</div>

.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;。对于块级元素（如 <div>, <p>, <img> 设为 display:block 后），可以使用 margin: 0 auto; 来实现水平居中。更现代的布局方式如 Flexbox 和 Grid 也能非常方便地实现各种居中效果。

3. <b>, <i>, <u>, <strike>, <big>, <tt>

这些标签也主要用于改变文本的视觉样式：

  • <b>: 加粗 (Bold)
  • <i>: 斜体 (Italic)
  • <u>: 下划线 (Underline)
  • <strike> (或 <s>): 删除线 (Strikethrough)
  • <big>: 放大字号
  • <tt>: 打字机字体 (Teletype)

现代替代方案：

  • 强调语义时： <strong> 替代 <b> (表示重要性) <em> 替代 <i> (表示强调)

  • 纯样式时 (使用 CSS)： font-weight: bold; 替代 <b> font-style: italic; 替代 <i> text-decoration: underline; 替代 <u> text-decoration: line-through; 替代 <strike> 或 <s> (注意：<s> 仍是有效的 HTML5 标签，表示不再准确或相关的内容) font-size: larger; 或具体值替代 <big> font-family: monospace; 替代 <tt>

代码示例：

<p>
  <strong>这段文字很重要。</strong>
  <em>这段文字需要强调。</em>
  <span style="font-weight: bold;">这段文字只是视觉上加粗。</span>
  <span style="font-style: italic;">这段文字只是视觉上倾斜。</span>
  <span style="text-decoration: underline;">这段文字有下划线。</span>
  <span style="text-decoration: line-through;">这段文字有删除线。</span>
  <s>这段内容已不再准确。</s>
  <span style="font-size: larger;">这段文字稍大一些。</span>
  <span style="font-family: monospace;">这段文字是等宽字体。</span>
</p>

HTML5 鼓励我们使用具有语义的标签。如果仅仅是为了视觉效果，首选 CSS。如果文本本身具有特定的含义（如重要、强调），则使用 <strong> 和 <em>。<s> 标签在 HTML5 中被重新定义，用于表示那些不再正确或不再相关的内容，它是有语义的。

框架型标签：拥抱现代布局

<frame>, <frameset>, <noframes>

这三个标签用于创建框架集（framesets），将浏览器窗口分割成多个独立的 HTML 页面。

旧代码示例 (不推荐)：

<!-- frameset.html -->
<frameset cols="25%,75%">
  <frame src="menu.html">
  <frame src="content.html">
  <noframes>
    <body>您的浏览器不支持框架。</body>
  </noframes>
</frameset>

现代替代方案：

  1. <iframe>：如果确实需要在页面中嵌入另一个独立的 HTML 页面，<iframe> 仍然是可用的。但要注意其可能带来的 SEO 和可用性问题。
  2. CSS 布局 (Flexbox, Grid)：对于页面布局，现代 CSS 提供了强大的 Flexbox 和 Grid 模块，可以轻松实现复杂的页面结构，而无需使用框架。
  3. 服务器端包含 (SSI) 或 JavaScript 动态加载：对于公共部分（如导航栏、页脚），可以使用服务器端技术或 JavaScript (如 AJAX) 来加载和组合内容。

代码示例 (使用 <iframe>):

<div>
  <iframe src="menu.html" style="width: 25%; height: 500px; border: none;"></iframe>
  <iframe src="content.html" style="width: 74%; height: 500px; border: none;"></iframe>
</div>

Frameset 存在很多问题，比如破坏 URL、不利于 SEO、打印困难、可用性差等。现代 Web 开发更倾向于单页面体验或通过 CSS 和 JavaScript 构建灵活的布局。

其他被废弃或改变用途的标签

1. <acronym>

用于表示首字母缩略词。

旧代码示例 (不推荐)：

<acronym title="World Wide Web">WWW</acronym>

现代替代方案 (<abbr>):

<abbr title="World Wide Web">WWW</abbr> is the best.
<abbr title="HyperText Markup Language">HTML</abbr>

讲解： HTML5 中，<abbr> 标签统一用于表示缩写词，无论是首字母缩写还是其他类型的缩写。

2. <applet>

用于嵌入 Java 小程序。

旧代码示例 (不推荐)：

<applet code="MyApplet.class" width="300" height="200"></applet>

现代替代方案 (<object> 或 <embed>，但 Java Applet 本身已很少使用)：

<object type="application/x-java-applet" width="300" height="200">
  <param name="code" value="MyApplet.class">
  Java applet failed to load.
</object>

Java Applet 技术由于安全性和插件依赖问题，已经基本被淘汰。现代 Web 应用更多依赖 JavaScript、WebAssembly 或其他嵌入技术。如果确实需要嵌入特定类型的插件内容，<object> 或 <embed> 是更通用的选择。

3. <dir> 和 <menu> (用于列表)

<dir> 用于目录列表，<menu> 用于菜单列表。它们的功能与 <ul> 非常相似。

旧代码示例 (不推荐)：

<dir>
  <li>文件1</li>
  <li>文件2</li>
</dir>
<menu>
  <li>选项A</li>
  <li>选项B</li>
</menu>

现代替代方案 (<ul>):

<ul>
  <li>文件1</li>
  <li>文件2</li>
</ul>
<ul>
  <li>选项A</li>
  <li>选项B</li>
</ul>

<ul> (无序列表) 完全可以替代它们的功能，并且语义更清晰。注意：HTML5 中 <menu> 标签被重新定义为一个上下文菜单或者工具栏的容器，但其浏览器支持度和实际用法与旧版完全不同，通常与 JavaScript 配合使用。对于简单的列表，直接使用 <ul> 或 <ol>。

4. <isindex>

用于在文档中创建一个单行文本输入框，用于查询文档。

旧代码示例 (不推荐)：

<head>
  <isindex prompt="请输入搜索关键词：">
</head>

现代替代方案 (HTML 表单):

<form action="/search" method="get">
  <label for="search-input">搜索：</label>
  <input type="search" id="search-input" name="q">
  <button type="submit">提交</button>
</form>

<isindex> 的功能非常有限，并且早已被功能更强大的 HTML 表单元素所取代。

拥抱语义化：新标签带来的好处

废弃旧标签的同时，HTML5 引入了许多新的语义化标签，如：

  • <article>: 定义独立的内容块，如博客文章、新闻报道。
  • <section>: 定义文档中的一个区域或节。
  • <nav>: 定义导航链接。
  • <aside>: 定义侧边栏内容或与主要内容相关性较低的内容。
  • <header>: 定义文档或节的页眉。
  • <footer>: 定义文档或节的页脚。
  • <main>: 定义文档的主要内容。

使用这些语义化标签，可以让我们的网页结构更清晰，不仅方便自己和团队维护，也更有利于搜索引擎理解页面内容，提升 SEO 效果，同时还能改善网页的可访问性。

转自https://juejin.cn/post/7511945299860111397


该文章在 2025/6/5 10:49:38 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2025 ClickSun All Rights Reserved