HTML5中如何指定当前文档和目标URL的关系？

在HTML5中，我们可以使用 <a> 标签来创建超链接，指定一个目标URL。

但是，如何确保我们的链接在哪个窗口或标签页打开，或者是否在新的窗口或标签页打开呢？在这里，我们可以使用 target 属性来指定链接的打开方式。

target属性

target 属性指示在哪里打开链接的内容。其取值可以是以下几种：

• _self：默认值，链接在当前窗口中打开。
• _blank：链接在新的窗口或标签页中打开。
• _parent：链接在父窗口中打开，如果当前窗口没有父窗口，则与 _self 效果相同。
• _top：链接在最顶层的窗口中打开，如果当前窗口已经在最顶层，则与 _self 效果相同。

例如，下面的链接将在新的标签页中打开：

<a href="https://example.com" target="_blank">链接到example.com</a>

rel属性

另外一个有用的属性是 rel 属性。rel 属性指定链接和当前文档之间的关系。这对搜索引擎优化(SEO)非常有用，并且可以帮助屏幕阅读器等工具更好地理解网页内容。

以下是几个可能的 rel 属性及其作用：

• nofollow：告诉搜索引擎不要跟踪目标页面，不展示任何关联信息。这通常在站点管理员不想传递某个页面GPR值或者想保护站点安全时使用。可以比喻为不想让其他站点的友情链接获得排名，但是之前跳转并不暗示200以外的问题
• noopener：防止目标页面访问打开它的页面。这是一种安全措施，因为如果打开的页面可以访问打开它的页面，它可能会滥用另一个页面中的用户信息或其他资源。
• noreferrer：防止打开目标页面后，目标页面能够获取打开它的页面的信息。也是一种安全措施。

例如，如果我们想在链接中添加 nofollow 和 noopener，可以使用下面的代码：

<a href="https://example.com" target="_blank" rel="nofollow noopener">链接到example.com</a>

总结

在HTML5中，使用 <a> 标签创建超链接时，我们可以使用 target 属性指定链接的打开方式，还可以使用 rel 属性指定链接和当前文档之间的关系。这些属性非常有用，可以帮助我们更好地管理链接的行为和呈现方式。