为什么一些 HTML 元素被弃用？

互联网已经存在很长时间了，随着时间的推移，我们改变了对网页设计的思考方式。许多旧技术和做事方法随着更新、更好的替代方案的出现而逐渐淘汰，我们说它们已经被弃用了。

弃用。这是一个我们经常使用和看到的词。但是您是否停下来思考它在实践中的含义？一些弃用的网页元素的例子是什么，为什么我们不再使用它们了？

什么是弃用？

在日常英语中，“弃用”某事就是表示对其不赞成。例如，您可能会倾向于弃用您不喜欢的一条新闻。

然而，当我们在技术意义上讲话时，弃用是指不鼓励使用旧功能。通常，为了向后兼容性（以便旧项目不会中断），旧功能仍然可以正常使用。从本质上讲，这意味着您仍然可以在技术上以旧方式做事。它可能仍然有效，但也许使用新方法更好。

另一种常见情况是，技术元素被弃用作为未来移除的先兆（我们有时将其称为“日落”功能）。这给了每个人时间从旧的工作方式过渡到新系统，然后再进行过渡。如果您关注 WordPress，他们最近对他们全新的Gutenberg 编辑器做了这样的事情。他们发布了它，但保留了恢复到“经典”编辑器的选项，以便用户有时间过渡。有一天，“经典”编辑器可能会被删除，只剩下 Gutenberg 作为编辑帖子的唯一选项。换句话说，WordPress 正在淘汰“经典”编辑器。

这只是一个例子。我们还可以看看曾经是基本要素但后来在某个时间点被弃用的 HTML 功能。

为什么 HTML 元素会被弃用？

多年来，我们对 HTML 的思考方式已经发生了变化。最初，它是一种用于在线显示和设置内容的通用标记语言。

随着时间的推移，随着外部样式表越来越流行，开始更有意义地以不同的方式思考 Web 开发——将关注点分离，其中 HTML 定义页面的内容，而 CSS 处理页面的表示。

这种样式和内容的分离带来了许多好处

• 避免重复：当您可以在一个 CSS 类中一次处理所有这些时，在页面上重复红色文本的每个实例的代码既笨拙又效率低下。
• 易于管理：使用集中式样式表控制所有表示形式，您可以轻松地进行全站更改。
• 可读性：在查看网站的源代码时，理解已被整齐地抽象到内容和样式的单独文件中的代码要容易得多。
• 缓存：绝大多数网站在所有页面上都具有一致的样式，那么为什么还要让浏览器一遍又一遍地下载这些样式定义呢？将表示代码放在专用的样式表中，可以进行缓存和重复使用以节省带宽。
• 开发人员专业化：大型网站项目可能有多个设计师和开发人员在上面工作，每个人都有自己的专业领域。让 CSS 专家在他们自己的单独文件中处理项目的一部分，这对所有参与者来说都可能更容易。
• 用户选项：将样式与内容分离，开发人员可以轻松地为最终用户提供显示选项（越来越流行的“夜间模式”就是一个很好的例子），或者提供不同的显示模式以实现可访问性。
• 响应性和设备独立性：将内容和视觉表示的代码分离，可以更容易地构建在不同屏幕分辨率下以非常不同的方式显示的网站。

但是，在 HTML 的早期，有相当一部分标记旨在控制页面的外观，与内容并排。您可能会看到这样的代码：

<center><font face="verdana" color="#2400D3">Hello world!</font></center>

…所有这些现在都已弃用，因为上述关注点分离。

哪些 HTML 元素现在已弃用？

从 HTML5 发布开始，不鼓励使用以下元素

• <acronym>（使用<abbr>代替）
• <applet>（使用<object>）
• <basefont>（使用 CSS 字体属性，如font-size、font-family等）
• <big>（使用 CSS font-size）
• <center>（使用 CSS text-align）
• <dir>（使用<ul>）
• <font>（使用 CSS 字体属性）
• <frame>（使用<iframe>）
• <frameset>（不再需要）
• <isindex>（不再需要）
• <noframes>（不再需要）
• <s>（在 CSS 中使用text-decoration: line-through）
• <strike>（在 CSS 中使用text-decoration: line-through）
• <tt>（使用<code>）

还有一个很长的弃用属性列表，包括许多仍然有效的元素（例如align属性，许多元素都使用它）。W3C 有完整的弃用属性列表。

为什么我们不再使用表格进行布局？

在 CSS 普及之前，网站布局通常使用<table>元素构建。虽然<table>元素没有被弃用，但强烈建议不要使用它们进行布局。事实上，几乎所有用于布局的 HTML 表格属性都被弃用了，例如cellpadding、bgcolor和width。

有一段时间，表格似乎是网页布局的不错方法。我们可以根据需要制作任意大小的行和列，这意味着我们可以把所有东西都放在里面。标题、导航、页脚……应有尽有！

这将创建许多看起来像这样的网站代码

<table border="0" cellpadding="0" cellspacing="0" width="720">
  <tr>
    <td colspan="10"><img name="logobar" src="logobar.jpg" width="720" height="69" border="0" alt="Logo"></td>
  </tr>
  <tr>
    <td rowspan="2" colspan="5"><img name="something" src="something.jpg" width="495" height="19" border="0" alt="A picture of something"></td>
    <td>Blah blah blah!</td>
    <td colspan="3"> 
  <tr>
  <!--  and so on -->
</table>

这种方法有很多问题

• 复杂的布局经常会导致表格嵌套在其他表格中，这会造成令人头疼的代码混乱。看看任何电子邮件通讯的源代码就行了。
• 可访问性存在问题，因为屏幕阅读器往往会被过度使用表格弄糊涂。
• 表格渲染速度很慢，因为浏览器会等待整个表格下载完毕，然后再将其显示在屏幕上。
• 使用基于表格的布局很难创建响应式和移动友好的布局。我们还没有找到响应式表格的万能药（尽管存在许多巧妙的想法）。

继续将内容与表示分离的主题，CSS 是创建视觉布局而不使主要 HTML 文档代码混乱的更有效方法。

那么，我们什么时候应该使用<table>？当然是实际的表格数据！如果您需要显示棒球比分、统计数据或任何其他类似的内容，<table> 就是您的朋友。

为什么我们仍然使用<b>和<i>标签？

“等等，”你可能会说。“为什么粗体和斜体 HTML 标签仍然被认为是 OK？那些不应该是用 CSS 处理的视觉样式吗？”

这是一个好问题，当我们考虑到像<center>和<s>这样的其他标签被弃用时，这个问题似乎很难回答。这是怎么回事？

简短的答案是，<b>和<i>可能已经被弃用了，如果不是它们如此广泛和有用的话。相比之下，CSS 替代方案似乎有点笨拙

<style>
  .emphasis { font-weight:bold }
</style>
    
This is a <span class="emphasis">bold</span> word!

This is a <span style="font-weight:bold">bold</span> word!

This is a <b>bold</b> word!

长答案是，这些标签现在已被赋予了一些语义含义，使其价值超越纯粹的视觉表现，并允许设计师使用它们来传达有关它们所包含文本的更多信息。

这一点很重要，因为它可以帮助屏幕阅读器和搜索爬虫更好地理解包装在这些标签中的内容的目的。我们可能会出于多种原因将一个词用斜体表示，例如强调、引用创意作品的标题、引用科学名称等等。屏幕阅读器如何知道是否要在单词上放置语音强调？

<b>和<i>有伴侣，包括<strong>、<em>和<cite>。这些标签一起使文本的含义上下文更加清晰

• <b> 用于吸引用户注意文本，但不会赋予文本任何额外的重要性。当我们希望引起注意但又不想改变文本在屏幕阅读器中的语调或为搜索引擎添加额外权重或意义时，就会使用它。
• <strong> 与 <b> 很像，但它会突出显示内容的重要性。就像我们在强调某个词语时改变语调一样。
• <i> 会使文本倾斜，但不会赋予任何额外的意义或强调。它非常适合用来写出通常需要倾斜的文本，例如动物的学名。
• <em> 与 <i> 类似，它也会使文本倾斜，但它还会提供额外的强调（因此标签名称），而不会在上下文中增加更多重要性。（“我 *肯定* 没忘记给猫喂食”）。
• <cite> 用于引用创意作品的标题，例如像《沉默的羔羊》这样的电影。这样，文本的样式会改变，但不会影响句子被朗读的方式。

一般来说，规则是 <b> 和 <i> 只能在找不到更合适的元素时作为最后手段使用。这种语义意义允许 <b> 和 <i> 在我们现代的 HTML 元素中继续存在，并避免其他类似样式标签的废弃命运。

相关的是，<u>（下划线标签）曾一度被废弃，但后来在 HTML5 中恢复了，因为它有一些语义用途（例如标注拼写错误）。

还有许多其他 HTML 元素可能会对内容进行样式化，但主要目的是为内容提供语义意义。Mandy Michael 有一篇优秀的文章介绍了这些元素以及它们如何使用（甚至可以组合！）来实现最语义化的标记。

不死 HTML 属性

一些被废弃的元素仍然在当今的网络中被广泛使用。毕竟，它们仍然 *起作用*，只是不再被鼓励使用。

有时是因为人们不知道自己一直使用的这些东西实际上已经过时了。而其他时候，则是由于一些人没有看到从当前有效的方法中改变的理由。例如，CSS-Tricks 仍然使用电传打字元素，原因就是如此。

其中一个不死 HTML 遗留物是 align 属性，它存在于其他有效的标签中，尤其是在图像中。你可能会看到带有 border 属性的 <img> 标签，尽管该属性早已被废弃。当然，CSS 是这种样式呈现的首选方法，也是现代方法。

---

对于任何 Web 开发人员来说，紧跟废弃信息至关重要。确保代码遵循当前的建议，避免使用遗留元素是必不可少的最佳实践。这不仅可以确保网站在长期内能够继续运行，还可以确保它与未来的网络良好兼容。

有疑问？请在评论区留言！你也可以在我在 Angle Studios 工作的地方找到我。