HTML link 标签

简介

HTML link 标签定义了文档与外部资源之间的关系。它最常用于创建超链接，但也可以用于其他目的，比如预加载、声明样式表等。

基本语法

<a href="url">link text</a>

• href：指定链接目标的 URL。URL（Uniform Resource Locator）是用于定位互联网上资源的字符串。
• link text：显示在页面上的文本，可以是任何合法的 HTML 内容。

属性

href

该属性指定链接目标的 URL。URL（Uniform Resource Locator）是用于定位互联网上资源的字符串。例如：

<a href="https://www.example.com">Example</a>

target

该属性指定在何处打开链接文档。其值可以是下列之一：

• _blank：在新窗口或标签页中打开链接文档。
• _self：默认，在当前框架中打开链接文档（与不使用 target 属性的效果相同）。
• _parent：在父框架集中打开链接文档。
• _top：在整个窗口中打开链接文档。

例如：

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

title

该属性提供关于链接的额外信息，当用户将鼠标悬停在链接上时，会显示为工具提示。例如：

<a href="https://www.example.com" title="Visit Example">Example</a>

rel

该属性指定当前文档与目标对象的关系，它包含一个或多个用空格分隔的关键字。例如：

• noopener：防止新页面中的脚本访问当前页面的窗口对象。
• noreferrer：防止链接目标网站从 HTTP 引用头（Referer header）中获取来源信息。

例如：

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

实践

1. 创建基本链接

   <p>Visit <a href="https://www.example.com">Example</a> for more information.</p>
   

   这将在段落中创建一个指向 "https://www.example.com" 的链接，链接文本为 "Example"。

2. 在新窗口打开链接

   <p>Learn more at <a href="https://www.example.com" target="_blank">Example</a>.</p>
   

   这将创建一个指向 "https://www.example.com" 的链接，当用户点击时，它会在新窗口或标签页中打开。

3. 添加工具提示

   <p>Find out more about our services at <a href="https://www.example.com" title="Learn about our services">Example</a>.</p>
   

   这将创建一个指向 "https://www.example.com" 的链接，当用户将鼠标悬停在链接上时，它会显示工具提示 "Learn about our services"。