网站由各种信息组成，这些信息分布在网站的不同部分和不同页面上。

你还可以在其他网站的页面上找到与该网站有关的信息。

所有这些部分和页面在 HTML 中以 href 属性链接在一起。

在本文中，我们将讨论术语“超链接”。然后，我们将学习创建超链接的不同方法、href 的作用以及如何正确使用 href 属性链接网站的各个部分和页面。

超链接是什么

在 HTML 中，有各种形式的链接。在图像中，有 src 属性可“链接”图像的源文件。

对于样式表，带有 href 属性的 link 标签可用于“链接”样式表的源文件。

对于锚标记，href 属性可“链接”所引用的部分或页面。锚链接也被称为“超链接”。

当用户点击超链接时，将显示链接到的页面。超链接是引用另一个文档的元素，这样，当用户单击该元素时，他们将被导航到新文档。

如何使用超链接

如上所述，你可能希望链接各种页面（在你的网站内部或外部）或网站上的部分。

在本文中，我将重点介绍创建超链接的三种方法。这些不同的方法很重要，因为它们决定 href 属性的值。

现在让我们看看这三种不同的方法。

1. 当你想要链接到页面的某些部分

例如，当你创建带有目录的页面时，可以使用此方法。

在这种情况下，你可能不希望读者不得不向下滚动到最后一部分。如果他们只需要在目录中单击某个部分，浏览器便会将其直接带到那里，那就太好了。

这种链接发生在同一文档中，只是将读者带到不同的部分。学习 href 属性时，我们将学习如何为此用例创建超链接。

2. 当你想要链接到网站内的某个页面时

在你的站点上，你可能有一个主页、关于页面、服务页面和其他类型的页面。此方法可帮助用户从一个页面导航到另一页面。

3. 当你想要链接到网站外部的页面时

有时，你的网站可能不包含某些信息，而另一个网站可能包含该信息。在这种情况下，你可能要引用其他网站的信息。

为此，你将创建一个外部超链接，该超链接将用户导航到另一个网站。

这是链接页面的三种主要方法。现在，让我们看看 href 属性如何帮助你实现它们。

如何使用 href 属性

href 是用于引用另一个文档的属性。你可以在 link 标签和 anchor 标签上使用它。

href 属性用在锚标签（a）上，在网站中创建超链接。该属性的值包含超链接指向的 URL。你可以像这样使用它：

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

但是，URL 值可以根据所指向的内容而不同。对于前面介绍的三种方式，让我们看看如何使用 href。

1. 如何使用 href 链接文档中的部分

在这种情况下，该值将是开始该部分的元素的 id，代码如下：

<a href="#second-section">Go to second section</a>
<!--
  Some stuffs here
 -->
<section id="second-section">
	<h2>Second section</h2>
</section>

单击“转到第二部分”超链接时，浏览器将向下滚动到具有关联 id 的部分。浏览器的 URL 栏中的 URL 也会更改。

例如，如果先前的 URL 是 mywebsite.com，则新的 URL 将是 mywebsite.com#second-option。

2. 如何使用 href 链接网站中的页面

要以这种方式使用 href，你需要理解什么是相对 URL 和绝对 URL。

相对 URL 是指向同一网站上文档的短 URL。这更像是，从你所在的位置如何到达同一网站上的另一个地方？

这与绝对 URL 相反。对于绝对 URL，你不必考虑当前的位置——你可以提供完整的详细信息，就像是从最开头的位置出发到达另一个地方。

要在网站上的页面之间进行导航，可以使用任一种 URL，但是通常使用相对 URL。

假设你在主页上，要引用“关于”页面，可以使用 href 属性执行此操作：

<a href='/about' >About page</a>

从主页出发（假设是 mywebsite.com），上面的链接将导航到 mywebsite.com/about。

链接前的斜杠（/）值得注意。/ 告诉浏览器将链接加到站点的根目录（即域名）。因此，根目录为 mywebsite.com，加了链接之后是 mywebsite.com/about。

如果没有斜杠（<a href='about'>），浏览器将用 /about 替换当前路径。

例如，如果我们当前在 mywebsite.com/projects/generator 上，则具有以下链接：

<a href='about'>About 1</a>
<a href='/about'>About 2</a>

“About 1” 将导航到 mywebsite.com/projects/about（替换当前路径 /generator），而 “About 2” 将导航到 mywebsite.com/about。

3. 如何使用 href 链接到其他网站的页面

由于是在其他网站上，因此我们无法使用相对 URL。为此，我们需要指定要引用的文档的绝对来源。

例如，假设我们在 mywebsite.com 上，要引用 google.com，就应该这样使用 href：

<a href='https://google.com'>Google<a>

如果我们只写了 google.com，则浏览器会将其视为网站中的页面，从而将其加到 mywebsite.com 后面。

小结

在本文中，我们看到了如何使用 href 属性创建不同类型的链接。这些不同的链接显示了可以在网站中引用文档/页面的不同方式。

原文：HTML Link Code – How to Insert a Link to a Website with HREF，作者：Dillion Megida