HTML

HTML 知识量:9 - 26 - 70

7.1 超链接简介><

a标签- 7.1.1 -

在HTML中,<a> 标签用于创建超链接,它可以让用户点击链接后跳转到另一个网页或资源的URL。以下是一个基本的 <a> 标签的示例:

<a href="https://www.example.com">这是一个链接</a>

在这个例子中,<a> 标签的 href 属性指定了链接的目标地址,即当用户点击这个链接时,浏览器会打开 https://www.example.com 这个网页。链接的文本(在这个例子中是 "这是一个链接")被放在 <a> 和 </a> 之间。

a标签的target属性- 7.1.2 -

target 属性在 HTML 的 <a> 标签中用于指定链接的打开方式。它决定了当用户点击链接时,链接的 URL 是在当前窗口或标签页中打开,还是在新的窗口或标签页中打开。target 属性有多个可能的值,以下是一些常用的值:

  • _self:默认值。在当前窗口或标签页中打开链接。

  • _blank:在新窗口或新标签页中打开链接。

  • _parent:在父框架中打开链接。如果当前页面没有嵌套在任何框架中,则该值的行为与 _self 相同。

  • _top:在整个浏览器窗口中打开链接,取消所有框架。如果当前页面没有嵌套在任何框架中,则该值的行为与 _self 相同。

示例:

<!-- 在当前窗口或标签页中打开链接 -->  
<a href="https://www.example.com" target="_self">在当前窗口打开</a>  
  
<!-- 在新窗口或新标签页中打开链接 -->  
<a href="https://www.example.com" target="_blank">在新窗口打开</a>  
  
<!-- 在父框架中打开链接(如果当前页面嵌套在框架中) -->  
<a href="https://www.example.com" target="_parent">在父框架中打开</a>  
  
<!-- 在整个浏览器窗口中打开链接,取消所有框架(如果当前页面嵌套在框架中) -->  
<a href="https://www.example.com" target="_top">在整个窗口中打开</a>

除了上述常用的值,target 属性还可以接受一个框架的名称,作为目标框架的标识符。例如,如果页面上有一个名为 "myFrame" 的框架,可以这样指定链接:

<a href="https://www.example.com" target="myFrame">在名为 myFrame 的框架中打开</a>

在设计网站时,应谨慎使用 target="_blank",并确保新打开的页面有适当的标题和导航,以便用户可以轻松地返回到原始页面。

对于新打开的外部链接,添加 rel="noopener noreferrer" 属性也是一个好的做法,以增加安全性并避免潜在的问题。

  • noopener 关键字告诉浏览器新打开的页面不应该通过 window.opener 属性访问打开它的页面。这有助于防止潜在的安全风险,比如新页面上的恶意脚本通过 window.opener 访问原始页面的 DOM 或执行其他恶意操作。

  • noreferrer 关键字则告诉浏览器在发送 HTTP 请求时不要包含 Referer(或 Referrer)头部,这意味着新页面不会知道它是由哪个页面引用的。这有助于保护用户的隐私,同时也避免在某些情况下泄露用户的浏览习惯。

将这两个关键字组合使用,即 rel="noopener noreferrer",可以同时提供安全性和隐私保护。