HTML链接代码–如何使用HREF插入网站链接

2020年12月30日10:50:05 发表评论 34 次浏览

本文概述

一个网站由几部分不同部分和不同页面上存在的信息组成。

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

所有这些部分和页面都使用href属性。

在本文中, 我们将研究术语超连结。然后, 我们将学习创建超链接的不同方法, href以及如何正确使用href用于链接部分和页面的属性。

什么是超链接?

在HTML中, 有各种形式的链接。在图像中, 有src属性以"链接"图像的来源。

对于样式表, 有链接用href属性以"链接"样式表的来源。

对于锚标签, href属性以"链接"所引用的部分或页面。锚链接也称为超链接。

当用户跟随​​超链接时, 可以说他们正在导航。超链接是引用另一个文档的元素, 这样, 当用户单击该元素时, 它们将被定向到新文档。

创建超链接的不同方法

如上所述, 你可能想要链接页面(在网站中或在外部)或网站中的部分。

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

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

1.链接页面的各个部分

例如, 当你创建带有目录的页面时, 如下面的图片所示, 你可以使用此方法:

[...图片]

在这种情况下, 你可能不希望读者向下滚动到最后一节。如果他们可以在目录中单击它, 然后浏览器将其直接带到那里, 那就很好了。

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

2.链接到网站内的另一个页面

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

3.链接到外部页面

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

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

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

的href属性

的href是用于引用另一个文档的属性。可以在找到链接标签和锚标签。

的href属性用于锚标记(一种)在网站中创建超链接。该属性的值包含超链接指向的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也会更改。

例如, 如果以前的网址是mywebsite.com, 新网址将为mywebsite.com#second-option.

2.使用方法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.

如果没有斜线(<ahref='关于'>), 浏览器会将当前路径替换为/关于.

例如, 如果我们目前在mywebsite.com/projects/generator, 并且我们具有以下链接:

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

"大约1"将导航到mywebsite.com/projects/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属性允许我们创建不同类型的链接。这些不同的链接显示了可以在网站中引用文档/页面的不同方式。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: