CSS:target="blank"的介绍及应用

222 阅读1分钟

这是否让你的眼睛有点抽搐?比如......这是个错字。它应该是target="_blank" ,用下划线来开始数值。就像...

<a target="_blank" href="https://codepen.io">
  Open CodePen in a New Tab
</a>

好了,这就是正确的语法!

在没有下划线的target="blank" 的情况下,blank 部分只是一个名称。它可以是任何东西。它可以是target="foo" ,或者,也许为了预示这里的目的:target="open-new-links-in-this-space"

不同的是:

  • target="_blank" 是一个特殊的关键词,每次都会在一个新的标签页中打开链接。
  • target="blank" 将在新标签页中打开第一次点击的链接,但今后任何共享 的链接将在target="blank" 同一个新打开的标签页中打开。

我从来不知道这个!我归功于这条微博的解释

我创建了一个非常基本的演示页面来展示这个功能(代码)。当我点击第一个链接时,看着一个新标签打开。然后,从任何一个也是打开的标签页的后续点击,在那个新的第二个标签页中打开该链接。

为什么?

我认为这里的用例很少,也很不容易。见鬼,我甚至都不太喜欢target="_blank"但这里有一个我可以想象的:文档。

假设你有一个网络应用,人们在那里积极开展工作。在一个新的标签页中打开该应用中的文档链接可能是有意义的,这样他们就不会从正在进行的工作中转移开。但是,也许你认为他们不需要为每个文档链接建立一个新的标签。你可以像这样做...

<a target="codepen-documentation" 
  href="https://blog.codepen.io/documentation/">
  View CodePen Documentation
</a> 

<!-- elsewhere -->

<a target="codepen-documentation" 
  href="https://blog.codepen.io/documentation/">
  About Asset Hosting
</a>