原文: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 属性如何允许我们创建不同类型的链接。这些不同的链接显示了可以在网站内引用文档/页面的不同方式。