HTML 链接

链接或超链接是从一个 Web 资源到另一个 Web 资源的连接。

HTML 链接(超链接或 Web 链接)

链接允许用户在世界任何地方的任何服务器上无缝地从一个页面移动到另一个页面。链接有两个端点,称为锚点和方向。链接在源锚点处开始并指向目标锚点,目标锚点可以是任何 web 资源(例如,图像,音频或视频剪辑,HTML 文档或文档本身内的元素等)。

默认情况下,大多数浏览器中的链接将如下所示:

  • 一个未访问链接的下划线以蓝色表示。
  • 一个访问过的链接是下划线以紫色表示。
  • 一个活动链接的下划线以红色表示。

但是,你可以使用 CSS 覆盖它。详细了解样式链接

HTML 链接语法

使用 <a> 标记在 HTML 中指定链接。

链接或超链接可以是单词,单词组或图像。

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

源锚中的 href 属性指定目标锚的地址。

<a href="http://www.tastones.com/">Tutorial Republic</a>
<a href="kites.jpg"><img src="kites-thumb.jpg" alt="kites"></a>
<a href="https://www.google.com/">Google Search</a>

链接的目标属性

目标属性告诉浏览器打开链接文档的位置。有四个定义的目标。每个目标开始用下划线(_): _blank_parent_self_top

<a href="http://www.tastones.com/" target="_top">Tutorial Republic</a>
<a href="sky.jpg" target="_self"><img src="sky-thumb.jpg" alt="Cloudy Sky"></a>
<a href="https://www.google.com/" target="_blank">Google</a>

创建书签锚点

id 属性用于以下列方式在网页内创建书签。

<a href="#balloons"><img src="balloons-thumb.jpg" alt="Balloons"></a>
<img src="balloons.jpg" alt="Hot Air Balloons" id="balloons">

name 属性也可以通过以下方式实现相同的效果。

<a href="#ballons"><img src="balloons-thumb.jpg" alt="Balloons"></a>
<img src="balloons.jpg" alt="Hot Air Balloons" name="balloons">

注意: HTML5 标准建议使用 id 属性而不是 name 属性来指定锚点的名称。

创建下载链接

放置可供下载的文件的方式与放置文本链接完全相同,只需将目标 URL 指向你想要下载的文件即可。

在这种情况下,它是一个名为 test.zip 的 Zip 文件。

<a href="downloads/test.zip">Download Zip file</a>
<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>

注意: 单击指向 PDF 文件或图像文件的链接不会导致它直接下载到你的硬盘驱动器。它只会在你的 Web 浏览器中打开该文件。此外,你可以将其保存到你的硬盘驱动器。