初学前端必看：为什么某些HTML元素被弃用？

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

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

什么是弃用?

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

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

为什么HTML元素会被弃用?

多年来，我们对HTML的思考方式也在不断发展。最初，它是一种用于在线显示和样式化内容的通用标记语言。

随着时间的流逝，随着外部样式表变得越来越重要，人们开始以不同的方式考虑Web开发变得更加有意义——将关注点分离，其中HTML定义页面的内容，而CSS处理页面的表现。

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

• 避免重复：如果你可以让一个CSS类一次处理所有的红色文本，则在页面上为每个红色文本实例重复执行代码既麻烦又效率低下。
• 易于管理：有了中央样式表控制的所有表现形式，你可以不费吹灰之力就能对整个网站进行修改。
• 可读性：在查看一个网站的源码时，将内容和样式整齐地抽象成单独的文件，内容和样式的代码就容易理解了很多。
• 缓存：绝大多数网站的所有页面都具有一致的样式，那么为什么要让浏览器一次又一次下载这些样式定义?将样式文件代码放在专用的样式表中，可以进行缓存和重用以节省带宽。
• 开发人员专业化：大型网站项目可能需要多个设计师和开发人员来工作，每个项目都有各自的专业领域。让每个CSS专家都可以在自己的文件中处理项目，这对每个人都容易得多。
• 用户选项：将样式与内容分开可以使开发人员轻松地向最终用户提供显示选项(日益流行的“夜间模式”就是一个很好的例子)或其他可访问性的显示模式。
• 响应速度和设备独立性：将内容代码和视觉呈现代码分开，可以轻松构建以不同屏幕分辨率以不同方式显示的网站。

然而，在HTML的早期，有相当数量的标记设计用于控制页面的外观和内容。你可能会看到如下代码：

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

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

现在不建议使用哪些HTML元素?

初学前端必看，为什么某些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>）

延续了内容和表现形式分离的主题，CSS是一种更有效的方法，可以在不杂乱的主HTML文档代码的情况下，创建视觉布局。

那么，什么时候应该使用 ?当然，实际的表格数据!如果你需要显示棒球比分，统计数据或其他方面的列表，

是你的朋友。

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

你可能会说：“等一下。 为什么仍然认为粗体和斜体HTML标签还可以呢?那些样式的视觉样式不是应该用CSS处理的吗?”

这是一个很好的问题，当我们考虑弃用<center>和<s> 之类的其他标签时，似乎很难回答。这里发生了什么？

简短而简单的答案是，如果不是因为<b> 和<i> 如此广泛和有用，它们很可能会被淘汰。相比之下，CSS替代品似乎有些笨拙：

1.  <style> 
2.  .emphasis { font-weight:bold } 
3.  </style> 

5.  This is a <span class="emphasis">bold</span> word! 

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

9.  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元素可以为内容赋予样式，但主要用于为内容提供语义。

**不死的HTML属性**

今天，一些被淘汰的元素在网络上仍在广泛使用。毕竟，它们仍然有效——只是被淘汰了。

有的时候，你一直在用的东西还没有被传开，其实已经不是以前的方法了。

这样一个不死的HTML遗迹就是在其他有效标签中的 align 属性，尤其是图片。你可能会看到带有 border 属性的标记，尽管该属性早就被弃用了。当然，CSS是这种样式表示的首选和现代方法。

对于任何一个web开发者来说，跟上时代的发展是关键。确保你的代码遵循当前的建议，同时避免遗留元素，是一个基本的最佳实践。它不仅可以确保你的网站长期持续工作，而且还能很好地配合未来的网络。