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

网站由位于网站本身不同部分和不同页面上的各种信息组成。

你还可以在不同网站的页面上找到与该网站相关的信息。

所有这些章节和页面都在 HTML 中使用 href 属性链接在一起。

在本文中,我们将研究术语超链接。然后我们将了解创建超链接的不同方式、href 的作用以及如何适当地使用 href 属性来链接部分和页面。

什么是超链接

在 HTML 中,有多种形式的链接。在图像中,有 src 属性来“链接”图像的来源。

对于样式表,有一个带有 href 属性的 link 标签来“链接”样式表的来源。

对于锚标签,有 href 属性可以“链接”引用的章节或页面。锚链接也被称为超链接。

当用户点击超链接时,他们正在导航到该页面。超链接是引用另一个文档的元素,当用户单击该元素时,它们会被定向到新文档。

什么时候使用超链接

如上所述,你可能希望链接各种页面(在你的网站内或外部)或你网站上的章节。

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

好的,现在让我们看看这三种不同的方式。

当你想链接到页面的各个部分时

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

在这种情况下,你可能不希望你的读者必须向下滚动到最后一部分。如果他们可以在目录中单击它并且浏览器会直接将他们带到那里,那就太好了。

这种类型的链接出现在同一个文档中,将读者带到不同的部分。当我们了解 href 属性时,我们将学习如何为此用例创建超链接。

当你想链接到网站内的另一个页面时

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

当你想链接到外部页面时

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

为此,你将创建一个将用户导航到其他网站的外部超链接。

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

如何使用 href 属性

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

href 属性用于锚标签(a)以在网站中创建超链接。该属性的值包含超链接指向的 URL。你可以像这样使用它:

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

但是,根据你指向的内容,URL 值可能会有所不同。对于我们之前看到的三种方式,让我们看看如何使用 href

如何使用 href 链接文档中的章节

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

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

单击 “Go to second section” 超链接时,浏览器会向下滚动到具有关联 id 的部分。浏览器 URL 栏中的 URL 也会发生变化。

例如,如果之前的 URL 是 mywebsite.com,那么新的 URL 将是 mywebsite.com#second-option

如何使用 href 链接网站内的页面

要以这种方式使用 href,你需要了解相对 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

如何使用 href 链接到另一个网站的页面

由于它在不同的网站上,我们无法使用相对 URL。为此,我们需要指定我们引用的文档的绝对来源。

例如,假设我们在 mywebsite.com 上,并且我们想引用 google.com,应该这样使用 href

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

如果我们只写了 google.com,浏览器会将其视为网站中的一个页面,从而将其附加到 mywebsite.com

总结

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