废弃的HTML元素（以及使用什么来代替）。在我们生活的各个方面，变化是不断的。当然，技术世界也不例外。新的语言、框架、最

在我们生活的各个方面，变化是不断的。当然，技术世界也不例外。新的语言、框架、最佳实践和其他标准会定期推出。虽然这些变化并不总是惊天动地的，但我们仍然需要跟上它们，以避免遇到不必要的问题。

在本指南中，我们将概述HTML5引入的变化，并提出一些替代方法来实现同等效果。我们还将提供一些提示，以帮助你避免在你的应用程序中使用已废弃的HTML元素。(提示：这通常涉及使用CSS来代替）。

我们将讨论以下从HTML5开始被废弃的元素（以及推荐的CSS对应物）。

[<marquee>](#marquee)(使用CSS动画代替)
[<acronym>](#acronym)(使用 [<abbr>](#abbr)代替）。
[basefont](#basefont)(使用 [font family](#font-family-font-size-color), [font size](#font-family-font-size-color), 和 [color](#font-family-font-size-color)代替）。
[<blink>](#blink)(用 [opacity](#opacity)代替）。
[<dir>](#dir)(使用 [<ol>](#ol-and-ul)和 [<ul>](#ol-and-ul)代替)
[<frame>](#frame)(用 [<iFrame>](#iframe)代替)
[<strike>](#strike)(用 [text-decoration](#text-decoration)代替)
[<center>](#center)(用 [text-align: center](#text-align-centre)代替)

为什么你不应该使用被废弃的HTML元素？

想象一下，你正在运行一个你几个月前建立的应用程序，但你注意到页面是空白的，或者不断返回错误。有什么可能出错呢？

你看了看你的控制台，发现你使用的一个库已经改变了导入某些东西的程序，或者一些代码行不再以正确的语法编写。如果是一个生产型网站，你已经知道这种事件的负面影响了。

显然，你不可能监控所有的事情，但你应该睁大眼睛和耳朵，留意你每天使用的一些基本技术的变化。

HTML存在于我们很多的代码库中。无论使用何种框架或库，底层标记语言都是HTML。这意味着，无论你写的是React、Vue.js、Svelte，还是其他许多语言，你仍然需要HTML来使你的网站或应用程序正常运行。自然，这就需要紧跟HTML世界的变化。

HTML中的一些元素在HTML5中被废弃了。废弃的元素意味着对它们的支持可能会在任何时候停止，所以最好是在安全的一面，使用更多最新的技术。

一些被废弃的元素今天仍在广泛使用，并能很好地发挥其作用。这些元素被废弃并不是因为它们不好或不实用，而是因为有更新的替代品可以代替。这些替代品可以是新的HTML标签或CSS样式的形式。

让我们回顾一下一些已经被淘汰的主要HTML元素，并强调一些建议的替代方案。

`<marquee>`

<marquee> 元素创造了滚动的内容。这可以是文本、图像、链接或其他元素。为了使项目在你的页面上移动或滚动，你可以用<marquee> 标签来包装它们。

<marquee> 在一个标签中包含了很多功能。听起来很酷，对吗？嗯，是，也不是。

虽然marquee标签使创建动画内容变得很容易，但它也是呈现性的，这不是一个HTML元素所要求的。该元素没有明确定义其内容是什么。它也给使用辅助技术的人带来了问题。

除了在某些情况下令人赏心悦目之外，使用marquee在页面上移动元素也造成了糟糕的用户体验。很难阅读文字或看到侯选区中的项目，也很难点击它们。有些人创建的侯选区有嵌套的链接，这显然使访问这些链接变得困难。

这是否意味着我们不能再创建移动内容？当然不是。创建移动的对象可以很有趣，所以我们仍然可以在不使用被废弃的元素的情况下实现marquee效果。

使用CSS动画而不是`<marquee>`

CSS动画使你能够创建marquee效果，并通过使用prefers-reduced-motion media query来为那些不想要的人停止所有的动画，使其对用户友好。你还可以根据用户的动作使动画暂停。

让我们使用CSSanimation-play-state: paused on hover属性，使动画在用户悬停时暂停。

 <!-- Using the marquee element -->
    <marquee>This uses the marquee element</marquee>
 
    <!-- Using CSS to create it -->
    <p class="moving-text">This is made with CSS</p>
 
    <!-- The styles -->
    <style>
 
        /* Makes the animation pause on hover */
        .moving-text:hover{
            animation-play-state: paused;
        }
 
        /* The animation */
        @keyframes marquee{
            0%{transform: translateX(100%);}
            100%{transform: translateX(-100%);}
        }
 
        /* media query to enable animation for only those who want it */
        @media (prefers-reduced-motion: no-preference) {
            .moving-text{
                animation: marquee 15s linear infinite;
            }
        }
    </style>

在上面的片段中，你会注意到，使用<marquee> 元素只需要一行代码就可以实现滚动效果，而用CSS做同样的事情则需要几行代码。不过，今天推荐的最佳做法是使用CSS创建样式和展示效果。

`<acronym>`

有时，写一个词的首字母或缩写比写其全文更容易。例如，当你可以简单地使用 "HTML "时，你不希望连续写 "超文本标记语言"。但你也希望你的读者知道缩短后的文本是什么意思。

这就是<acronym> 标签的作用。这个标签使你能够显示缩略语，也能在悬停时显示缩略语的完整含义。在它提供的标题属性的帮助下，在显示短文的同时，标题属性中输入的内容会在悬停时显示。

使用`<abbr>` ，而不是`<acronym>`

尽管<acronym> 是一个非常有用的功能，但它现在已经被废弃了，所以你不应该使用它。相反，你应该使用一个新的替代品，它能做完全相同的事情：<abbr> 标签。

<abbr> 标签显示了单词的缩略语。当你把鼠标悬停在它上面时，会显示全文或扩展。

为了使全文显示出来，你的<abbr> 标签的标题属性中应该有一个适当的标题。

<acronym title="World Wide Web">WWW (This uses the acronym tag)</acronym>
    
<abbr title="World Wide Web">WWW (This uses the abbr tag)</abbr>

上面的代码片段显示了如何使用这两个元素。每一个都有相同的输出。

`basefont`

当你需要将默认样式应用于网页上的所有元素时，basefont 曾经是一个很好的选择。

basefont 设置一个HTML文档中所有文本上下文的默认字体家族、字体大小和颜色。它被应用于文档的所有内容。你的页面的所有内容都会按照basefont 元素中指定的方式显示，除非另一种样式被特别应用于它们。

如前所述，HTML文档不是用来控制页面的表现形式的；那是CSS的作用。用CSS来实现basefont 元素的作用是非常容易的。

使用`font family`,`font size`, 和`color instead`

你可以通过给页面的body元素定型，并使用CSS中的font family 、font size 、color 等属性，来复制basefont 的效果。

<body>
    <!-- how the basefont is used -->
    <basefont face = "cursive,serif" color = "green" size = "4"/>
    
    <p>Using the HTML base font</p>
    
    <p>Using CSS</p>
 
    <!-- the CSS alternative -->
    <style>
        body{
            font-family: cursive;
            color: green;
            font-size: 1rem;
        }
    </style>
 
 
</body>

`<blink>`

<blink> 标签的功能是为它所包含的文本创造一个闪烁的效果。被blink标签包裹的元素会不断闪烁，从而在页面上创造出一种闪烁的效果。

这个元素通常用于吸引访问者的注意力或用于装饰。由于各种原因，它已经被废弃了。

其中一个原因是，它为访问页面的人创造了不好的用户体验。对于有癫痫和其他残疾的人来说，暴露在一个他们无法控制的闪烁颜色的屏幕上，也会造成不良影响。

使用CSS`opacity` 道具来代替`<blink>`

闪烁效果在本质上是呈现性的，这意味着它应该用CSS而不是HTML来创建。

如果你仍然想为页面上的某个元素创建一个闪烁效果，你可以使用CSS动画，使用opacity 属性来实现。请确保使用prefers-reduced-motion 媒体查询，为那些不希望屏幕上出现动画的用户禁用动画。

<style>
  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }
@media(preferes-reduced-motion: no-preference){
  .blink {
    animation: blinker 0.6s linear infinite;
  }
}
</style>
 
<body>
  <p class="blink">Blinking text with CSS</p>
  
 
  <blink>Created with blink element</blink>
</body>

`<dir>`

<dir> 元素用于在目录中列出或包装内容。它基本上被用来包含目录的标题。被包裹在<dir> 中的项目通常是<li> 元素。

使用`<ol>` 和`<ul>` ，而不是`<dir>`

<dir> 标签已经被弃用，取而代之的是几个替代品，它们具有相同的目的，甚至更多的功能。

包含在<dir> 标签中的<li> 元素有一个默认的子弹列表样式类型。替代品，如<ol> 和<ul> 元素，根据其使用情况默认显示不同的列表样式。如果使用有序列表<ol> 元素，列表显示为数字，如果使用无序列表<ul> ，默认的列表样式为子弹。

<ul> 和<ol> 元素的语义有足够的描述性。如果使用了<ul> 标签，你就知道要期待一个无序的列表，如果使用了<ol> 标签，你就知道列表是有序的。

<!-- using the dir element -->
    <dir>
        <li>I am one</li>
        <li>I am two</li>
    </dir>
 
    <!-- An alternative using the ul element -->
    <ul>
        <li>I am one</li>
        <li>I am two</li>
    </ul>

虽然这两个元素需要相同的代码行，但让我们确保使用当前网络标准的ul。

`<frame>`

<frame> 元素描述了页面上一个特定的地方或框架，在那里可以加载和显示另一个网页。它使你能够在一个单一的网页中显示其他网站。页面上可以显示一个以上的框架。

要使用<frame> 元素，我们可以将其包裹在<frameset> 元素中，该元素用于指定布局，包括它将容纳的列数或行数以及每个框架的大小。<frameset> 将框架组包裹起来，并将其作为网页上的一个单元进行设计。

使用`<iFrame>` ，而不是`<frame>`

<frame> 元素现在已经过时了，这意味着它已经被完全删除，不应该在你的代码库中使用。由于性能问题和对使用屏幕阅读器的人缺乏无障碍性，对<frame> 元素的支持已经停止。

尽管你不能再使用<frame> 元素来嵌入页面和其他媒体项目，但我们可以使用<iFrame> 元素来实现同样的功能。<iFrame> 的功能与<frame> 元素相同，不需要嵌套在<frameset> 标签中。

<iFrame> 标签用于在一个页面上显示网页和媒体。

    <!-- Using the frame element -->
    <frameset cols="50%, 50%">
        <frame src="https://google.com"/>
        <frame src="https://logrocket.com"/>
    </frameset>
 
    <!-- using iframe -->
    <iframe 
        title="iframe demo"
        src="https://logrocket.com"
    ></iframe>

`<strike>`

<strike> 元素渲染文本，中间有一条横线穿过。该元素用于描述已被删除或不再相关的内容。

使用`text-decoration` ，而不是`<strike>`

<strike> 从HTML5开始就已经过时了，浏览器对它的支持也很有限。

为了在文本上实现同样的删除线效果，你可以使用<del> 元素，或者更好的是，使用CSStext-decoration 属性对其进行样式设计。如果你想描绘已经被删除的文本内容，使用<del> 元素是合适的，因为它具有语义，描述了标签中包裹的文本的状态。

如果删除线效果的目的是纯粹的视觉效果，使用CSStext-decoration 属性是你最好的选择。

<!-- Using the strike element -->
<strike>Using the strike element</strike>
  
<!--Using CSS to get same effect-->
<p>Creating same effect with CSS</p>
 
<style>
  p{
    text-decoration: line-through;
  }
</style>

`<center>`

顾名思义，<center> 元素在水平方向上将内容排列在中间。<center> 元素使文本居中变得非常简单；你所要做的就是把文本放在中心标签中，然后你就有一个水平居中的文本块了。

那么，为什么<center> 会被弃用呢？它被废弃的原因是它的展示性质。<center> 元素定义了其中文本的外观，而不是描述内容是什么。例如，它没有说它的内容是一个段落、一个章节，还是漂浮在文档中的一个图像。

虽然<center> 元素很好地达到了居中的目的，但它并没有完成定义其内容的语义作用。还有一个问题是，屏幕阅读器不能很好地使用它，等等。

使用`text-align: center` 代替

使用<center> 标签并不是在你的页面上获得居中内容的唯一方法。你可以使用CSS中的text-align: center 属性达到同样的效果。你还可以使用margin 和flexbox 属性。

    <!-- Using the center element -->
    <center>Hi</center>
 
    <!-- Centering text using CSS -->
    <p>Hi</p>
 
    <style>
        p{
            text-align: center;
        }
    </style>

结论

在你的代码中使用废弃或过时的元素会在你的代码库中产生深远的、长期的问题。对于每一行不包含废弃或过时元素的代码，你都主动地修复了一个即将发生的问题。

与其在你的代码库中出现问题后才更新HTML元素，不如在编写代码和为网络建设时跟上变化，遵循当前的网络标准。

请记住，防止问题出现要比不断修复问题要好。毕竟，没有人愿意成为那个留下满是废弃元素和错误的代码库让别人来修复的同事或前雇员。

The postDeprecated HTML elements (and what to use instead)appeared first onLogRocket Blog.

废弃的HTML元素（以及使用什么来代替）。

为什么你不应该使用被废弃的HTML元素？

<marquee>

使用CSS动画而不是<marquee>

<acronym>

使用<abbr> ，而不是<acronym>

basefont

使用font family,font size, 和color instead

<blink>

使用CSSopacity 道具来代替<blink>

<dir>

使用<ol> 和<ul> ，而不是<dir>

<frame>

使用<iFrame> ，而不是<frame>

<strike>

使用text-decoration ，而不是<strike>

<center>

使用text-align: center 代替

结论