HTML链接

HTML 链接或超链接将网络上的一个资源连接到另一个资源。该资源可以是图像、网页、程序、视频剪辑、音频剪辑、网页中的元素等，或任何可以在互联网上托管的内容。

我们使用 HTML <a> 标签创建超链接。<a> 标签的语法是

<a href="URL"> Text </a>

这里，

• URL - 链接的目标地址
• 文本 - 将显示为链接的部分

点击文本将导航到 URL 中的资源。例如，

<a href="https://programiz.com.cn/swift-programming/continue-statement"> Swift Continue Statement </a>

浏览器输出

在这里，点击 Swift Continue Statement 将带您到

https://programiz.com.cn/swift-programming/continue-statement.

默认链接样式

默认情况下，浏览器会根据链接是活动链接、已访问链接还是未访问链接来以不同的方式设置链接样式。

注意：您可以使用 CSS 自由更改此样式。

图像链接

您可以在 <a> 标签中插入几乎任何内容，使其成为链接。因此，我们也可以使用图像作为链接。

<a href="https://programiz.com.cn">
	<img src="programiz-logo.png" alt="Programiz Logo">
</a>

浏览器输出

target 属性

默认情况下，任何点击的链接都会在同一个浏览器窗口中打开。这可能会导致糟糕的用户体验。这就是 target 属性变得有用的地方。例如，

<a href="https://programiz.com.cn" target="_blank">Programiz</a>

在这里，target= "_blank" 在新的浏览器标签页中打开链接。

我们使用 target 属性来指定链接的打开位置。target 属性有 4 个值。

您可以在我们的文章《HTML iFrames》中了解更多关于 iframe、父框架和最顶层父级的信息。

download 属性

链接到网络资源时，我们可以使用 download 属性指定要下载该资源。例如，

<a href="/files/logo.png" download> Download Image </a>

浏览器输出

点击链接时，将下载 /files/logo.png 中的文件。

我们还可以为 download 属性提供一个可选值。该值将设置为下载资源的文件名。例如，

<a href="/files/logo.png" download="Programiz">Download Image</a>

这里，链接与上一个示例相同，但是，下载时，文件将命名为 Programiz.png，而不是之前的原始名称 logo.png。

链接到 HTML 元素

如前所述，除了链接到网络资源之外，<a> 标签还可以链接到网页内的特定元素。我们通过在 URL 后添加 #，然后是特定元素的 id 来实现。例如，

链接到同一网页中的元素

<a href="#title">Go to Title</a>

在这里，点击此链接将使网页滚动到 id 为 title 的元素。

链接到另一个网页中的元素

<a href="programiz.com/html/head#title-tag"> Link </a>

在这里，点击此链接将带我们到 URL programiz.com/html/head，然后滚动到 id 为 title-tag 的元素。

电子邮件和电话链接

我们还可以使用 HTML 链接作为电子邮件链接和电话链接，以帮助用户使用其电子邮件客户端或通话应用联系我们或其他人。

电子邮件链接

电子邮件链接打开用户的默认邮件客户端，以便用户更轻松地向特定地址发送邮件。例如，

<a href="mailto:[email protected]" > Send Mail </a>

浏览器输出

在这里，点击此链接将打开用户的邮件客户端，并将“收件人”字段填充为 [email protected]。

我们还可以向链接添加电子邮件的其他属性，如主题、正文等，以方便用户。电子邮件链接中可用的选项有

• 抄送
• 密送
• 主题
• 正文

让我们看一个使用所有可用选项的链接

<a href="mailto:[email protected][email protected]&[email protected]&subject=Test &body=Demo email" >click to send mail </a>

电话链接

类似于电子邮件链接，我们可以创建电话链接，以电话号码触发用户的通话应用。例如，

<a href="tel:+9778841999999"> Call Us </a>

浏览器输出

在这里，点击此链接将打开通话应用，并已填写号码，因此用户无需手动输入电话号码。

这主要在响应式网站中非常有用，用户通过手机浏览网页。