HTML中“blank”和“_blank”目标属性的区别


有时,我们可能会注意到网页上的链接会引导我们到不同的网页。在某些网站上,如果我们点击某些链接,它们会在新的浏览器标签页或新窗口中打开,而有些网站会为后续点击链接重复使用同一个新的浏览器标签页。此外,有些网站对链接使用相同的原始页面。这些行为是通过使用HTML target属性实现的。

在本文中,我们将探讨如何使用target="blank"和target="_blank"属性在新标签页中打开超链接。

Target属性

target是锚标签的一个可选属性。如果我们使用target=“blank”作为此属性的值,则单击链接时会在新的浏览器标签页中打开该链接。对于具有相同属性(target=“blank”)的所有链接,将重复使用相同的标签页。

通过使用此属性,用户可以获得无障碍的体验,因为无论何时用户点击网页中的链接,它都将在单独的标签页中打开,而不是在同一标签页中。它还可以避免在浏览器中使用过多的标签页,这可能会影响浏览器的性能并导致卡顿。

示例

在下面的示例中,我们对超链接使用带“blank”值的target属性。

<!DOCTYPE html>
<html>
<head>
   <title>Using target = "blank"</title>
   <style>
      div {
         text-align: center;
      }
   </style>
</head>
<body>
   <div>
      <h3>Here we are using the target attribute with "blank" value</h3>
      <a href="https://tutorialspoint.com/index.htm" target="blank">Click here for tutorialspoint</a>
   </div>
</body>
</html>

正如我们在上面的代码中看到的,我们在超链接中使用了target="blank"属性,它在新浏览器标签页中打开链接。具有相同属性的后续链接也将在这个相同的标签页中打开。

Target = "_blank"

如果我们将值作为target="_blank"传递给锚标签中的target属性,则链接将在新的浏览器标签页中打开。每次我们点击链接时,它都会打开一个新的浏览器标签页。此属性不会重复使用单个新标签页。

通过使用此属性,用户可以无缝地浏览不同的网页,同时保持原始页面易于访问。但是,这也可能会影响浏览器的整体性能以及系统性能。

示例

在下面的示例中,我们对超链接使用带“_blank”值的target属性。

<!DOCTYPE html>
<html>
<head>
   <title>Using target = "_blank"</title>
   <style>
      div {
         text-align: center;
      }
   </style>
</head>
<body>
   <div>
      <h3>Here we are using the target attribute with "_blank" value</h3>
      <a href="https://tutorialspoint.com/index.htm" target="_blank">Click here for tutorialspoint</a>
   </div>
</body>
</html>

在这里,我们在超链接中使用了target="_blank"属性,每次点击该链接时,它都会在新浏览器标签页中打开链接。

示例

在下面的示例中,我们没有对超链接使用任何target属性。

<!DOCTYPE html>
<html>
<head>
   <title>Without target attribute</title>
   <style>
      div {
         text-align: center;
      }
   </style>
</head>
<body>
   <div>
      <h3>Here we are not using the target attribute with any value</h3>
      <a href="https://tutorialspoint.com/index.htm">Click here for tutorialspoint</a>
   </div>
</body>
</html>

正如我们在下面的输出中看到的,每当我们点击链接时,它都将在同一网页中打开。

Target = "blank"和Target = "_blank"的区别

  • target="blank"属性将在新的浏览器标签页中打开链接,并对任何具有相同属性(target="blank")的未来链接使用相同的标签页。

  • target="_blank"属性每次都会在新标签页中打开链接。

更新于: 2023年8月29日

429 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告