答疑解惑：为什么某些HTML元素被弃用？

独立开发者张张

于 2020-05-20 00:18:31 发布

阅读量2.2k

点赞数 3

分类专栏：大前端技术文章标签： html5 前端

本文链接：https://blog.csdn.net/duninet/article/details/106226191

版权

大前端技术专栏收录该内容

193 篇文章 25 订阅

订阅专栏

在这里插入图片描述
互联网已经存在了很长时间，并且随着时间的流逝，我们已经改变了对网页设计的思考方式。随着新的更好的替代方法的产生，许多旧的技术和做事方法已被淘汰，我们说它们已被弃用。

不推荐使用（Deprecated）。这是一个我们经常使用和看到的词。但你有没有停下来想一想，它在实践中意味着什么？有哪些被废弃的网页元素的例子，为什么我们不再使用它们呢？

文章目录

什么是弃用？

通常情况下，为了向后兼容，旧的功能仍然可以使用（所以遗留项目不会被破坏）。从本质上说，这意味着你在技术上仍然可以用传统的方式做事。它可能仍然可以工作，但也许使用新的方式会更好。

另一种常见的情况是，当技术元素被废止时，作为其未来被删除的前奏（我们有时称之为 "日落西山 "功能）。这为每个人提供了从旧的工作方式过渡到新系统的时间。

为什么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>（使用 text-decoration: line-through）
<strike>（使用 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标签还可以呢？那些样式的视觉样式不是应该用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元素可以为内容赋予样式，但主要用于为内容提供语义。