操作 href 空白

在 HTML 中，链接是通过使用标签来创建的。其中一个重要的属性是 href，它指定要链接到的网址。在某些情况下，我们希望链接打开的页面在新的标签页中，此时我们需要设置 target="_blank"。但是在设置了 target="_blank" 后，用户点击链接后在新标签页中打开的页面，没有导航栏和工具栏，这样用户就无法访问我们的网站了。

在这种情况下，我们就需要使用 rel="noopener noreferrer" 属性来解决这个问题。

示例代码

以下是一个示例代码片段，演示了如何正确地将链接打开在新的标签页中，并且保留导航栏和工具栏：

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Example Website</a>

解释：

• href 属性是链接的目标 URL，指向我们希望用户访问的网站。
• target 属性告诉浏览器在新标签页中打开链接。
• rel 属性用于关联当前文档与链接目标之间的关系。其中 noopener 表示页面打开时不允许通过 window.opener 访问来源页面，从而防止恶意代码。
• noreferrer 能够阻止一些恶意站点通过 URL 获取你的网站信息。

注意事项

• 在设置 target="_blank" 后，始终应该使用 rel="noopener noreferrer" 属性。
• 不要在 rel 中仅使用 noopener，而不是 noreferrer。Safari 和 FireFox 早期版本不支持 noopener 属性，因此会留下安全漏洞。
• noopener noreferrer 属性可与其他 rel 值一起使用，例如 rel="nofollow noopener noreferrer"。

总结

操作 href 空白是一种非常实用的技术，它可以确保链接新打开的标签页中保留导航栏和工具栏，并防止恶意站点进行攻击。在编写 HTML 代码时，请务必注意这些注意事项。