HTML 链接

在本教程中，您将学习如何在 HTML 中创建指向其他页面的链接。

在 HTML 中创建链接

链接或超链接是从一个网络资源到另一个网络资源的连接。 链接允许用户在世界任何地方的任何服务器上从一个页面无缝移动到另一个页面。

链接有两端，称为锚点。 链接从源锚点开始并指向目标锚点，目标锚点可以是任何网络资源，例如图像、音频或视频剪辑、PDF 文件、HTML 文档或文档本身中的元素等等 开。

默认情况下，链接在大多数浏览器中显示如下：

• unvisited 未访问的链接带有下划线和蓝色。
• visited 访问过的链接带有下划线和紫色。
• active 活动链接带有下划线和红色。

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

HTML 链接语法

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

链接或超链接可以是一个词、词组或图像。

开始 <a> 标记和结束 </a> 标记之间的任何内容都成为用户在浏览器中看到和单击的链接的一部分。 以下是链接的一些示例:

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

href 属性指定链接的目标。 它的值可以是绝对或相对 URL。

绝对 URL 是包含 URL 格式的每个部分的 URL，例如协议、主机名和文档路径，例如 https://www.google.com/、https://www.example.com/form.asp 等。而相对 URL 是页面相对路径，例如 contact.html、images/smiley .png 等等。 相对 URL 从不包含 http:// 或 https:// 前缀。

设置链接目标

target 属性告诉浏览器在哪里打开链接的文档。 定义了四个目标，每个目标名称都以下划线(_) 字符开头：

• _blank — 在新窗口或标签中打开链接的文档。
• _parent — 在父窗口中打开链接的文档。
• _self — 在与源文档相同的窗口或选项卡中打开链接的文档。 这是默认值，因此无需显式指定此值。
• _top — 在完整的浏览器窗口中打开链接的文档。

试试下面的例子来了解链接的目标是如何工作的：

<a href="/about-us.asp" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
    <img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>

创建书签锚点

您还可以创建书签锚点以允许用户跳转到网页的特定部分。 如果您的网页很长，书签尤其有用。

创建书签是一个两步过程：首先在要跳转的元素上添加 id 属性，然后使用哈希符号 (#) 前面的那个 id 属性值作为 <a> 标签的 href 属性值，如 如下例所示：

<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

创建下载链接

您还可以使用与放置文本链接完全相同的方式创建文件下载链接。 只需将目标 URL 指向您希望可供下载的文件。

在以下示例中，我们为 ZIP、PDF 和 JPG 文件创建了下载链接。

<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>