HTML 链接
- HTML链接的作用:HTML链接或超链接用于连接网络上的资源,包括图片、网页、程序、视频、音频等。
<a>
标签的使用:使用<a>
标签创建超链接,其中href
属性指定目的地URL,链接文本作为可见部分。- 链接的特殊类型:链接可以用于打开新窗口(
target="_blank"
)、下载文件(download
属性)、链接到页面内特定元素、创建邮件和电话链接。
HTML 链接或超链接将网络上的一个资源连接到另一个资源。这些资源可以是图片、网页、程序、视频剪辑、音频剪辑、网页内的元素等,或任何可以托管在互联网上的内容。
我们使用 HTML <a>
标签来创建超链接。<a>
标签的语法是
<a href="URL"> 文本 </a>
在这里,
URL
- 链接的目的地文本
- 将作为链接可见的部分
点击文本将导航至 URL
中的资源。例如,
<a
href="[https://www.mashangxue123.com/tutorials/swift/continue-statement](/tutorials/swift/continue-statement)"
>
Swift 继续语句
</a>
浏览器输出
在这里,点击 Swift 继续语句
将带你前往 tutorials/swift/continue-statement
默认链接样式
默认情况下,浏览器会根据链接是活动的、已访问的还是未访问的来以不同方式样式化链接。
注意:您可以使用 CSS 自由更改这种样式。
图片链接
您可以在 <a>
标签内插入几乎任何内容来使其成为链接。因此,我们也可以使用图片作为链接。
<a href="[https://www.mashangxue123.com">
<img src="mashangxue123-logo.png" alt="mashangxue123 Logo" />
</a>
浏览器输出
target 属性
默认情况下,任何点击的链接都将在同一个浏览器窗口中打开。这可能会导致糟糕的用户体验。这就是 target
属性变得有用的地方。例如,
<a href="https://www.mashangxue123.com" target="_blank">mashangxue123</a>
在这里,target="_blank"
会在新的浏览器标签页中打开链接。
我们使用 target
属性来指定链接的打开位置。target
属性有 4 个值。
Target | 描述 |
---|---|
_self | (默认) 在同一个浏览器标签页中打开链接。 |
_blank | 在新的浏览器标签页中打开链接。 |
_parent | 在父框架中打开链接。 |
_top | 在当前标签窗口(最上层的父框架)中打开链接。 |
我们可以在我们的文章 HTML iFrames 中了解更多关于 iframes、父框架和最上层父框架的信息。
download 属性
当链接到网络资源时,我们可以使用 download
属性指定该资源应被下载。例如,
<a href="/files/logo.png" download> 下载图片 </a>
浏览器输出
点击链接时,将从 /files/logo.png
下载文件。
我们还可以为 download
属性提供一个可选值。这个值将被设置为下载资源的文件名。例如,
<a href="/files/logo.png" download="mashangxue123">下载图片</a>
在这里,链接与前一个示例相同,然而,在下载时,文件将以 mashangxue123.png
而不是原先的 logo.png
作为文件名。
链接到 HTML 元素
如前所述,除了链接到网络资源,<a>
标签还可以链接到网页内的特定元素。我们通过在 URL 后面添加 #
,然后跟上特定元素的 id
来实现。例如,
链接到同一网页中的元素:
<a href="#title">前往标题</a>
在这里,点击这个链接将滚动网页至带有 id
title
的元素。