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

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

所有这些部分和页面在 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