HTML如何使用A标签创建指向其他页面的链接

234次阅读

没有评论

共计 1941 个字符，预计需要花费 5 分钟才能阅读完成。

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。在本教程中，您将学习如何在 HTML 中创建指向其他页面的链接。

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

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

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

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

但是，您可以使用 CSS 覆盖它。你可以在本网站了解有关样式链接的更多信息。

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

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

<a href ="url"> 链接文本 </a>

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

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

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

绝对 URL 是包含每个部分的 URL，例如协议、主机名和文档的路径，例如

https://www.google.com/
https://www.example.com/form.php

而相对 URL 是页面相对路径，例如

contact.html
images/smiley.png

相对 URL 从不包含 http:// 或https:// 前缀。

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

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

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

<a href="/about-us.php" 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>

提示：如果您的网页放置在 iframe 中，您可以使用 target="_top" 打破 iframe 链接并在完整的浏览器窗口中显示目标页面。

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

创建书签的过程分为两步：首先在要跳转的元素上添加 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>

提示：您甚至可以通过在 href 属性中指定该页面的 URL 以及锚点（即）来跳转到另一个网页的某个部分，例如

<a href="mypage.html#topicA">Go to TopicA</a>.

您还可以和创建文本链接完全相同的方式创建文件下载链接。只需将目标 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>

注意：当您单击指向 PDF 或图像文件的链接时，该文件不会直接下载到您的硬盘驱动器。它只会在您的网络浏览器中打开该文件。此外，您可以将其永久保存或下载到您的硬盘上。

正文完