超链接href属性_如何使用标签上的HREF属性制作HTML超链接

超链接href属性

A website is a collection of web pages. And these pages need to be linked or connected by something. And to do so, we need to use a tag provided by HTML: the a tag.

网站是网页的集合。 这些页面需要通过某种方式链接或连接。 为此，我们需要使用HTML提供的标签： a标签。

This tag defines a hyperlink, which is used to link from one page to another. And the most important attribute of the a element is the href attribute, which indicates the link's destination.

此标记定义超链接，用于将一个页面链接到另一页面。 a元素最重要的属性是href属性，它指示链接的目的地。

In this guide, I will show you how to make HTML hyperlinks using the href attribute on the a tag.

在本指南中，我将向您展示如何使用a标签上的href属性制作HTML超链接。

• What is a link?

  什么是链接？

• How to create internal links

  如何创建内部链接

• Browse to pages on the same level

  浏览到相同级别的页面

• Browse to pages located on another folder

  浏览到另一个文件夹上的页面

• Browse from a page located in a folder to the root

  从文件夹中的页面浏览到根目录

• How to create external links

  如何创建外部链接

• How to create anchor links

  如何创建锚链接

• Navigate on the same page

  在同一页面上导航

• Navigate on another page

  导航到另一页

• Conclusion

  结论

什么是链接？ (What is a link?)

A link is clickable text that allows you to browse from one page to another, or to a different part of the same page.

链接是可单击的文本，使您可以从一个页面浏览到另一页面或同一页面的不同部分。

In web development, there are several ways to create links, but the most common is by using the a tag and the href attribute. This last is where we specify the destination address of the link.

在Web开发中，有几种创建链接的方法，但是最常见的方法是使用a标签和href属性。 最后一点是我们指定链接的目标地址的位置。

The a tag helps us create three main kinds of links: an internal link, an external link, and an anchor link. That said, we can now dive into how to create an internal link in the next section.

在a标签将帮助我们建立三种主要类型的链接：内部链接，外部链接，锚链接。 也就是说，我们现在可以在下一部分中深入探讨如何创建内部链接。

如何创建内部链接 (How to create internal links)

When it comes to building a website, it makes sense to have a connection between pages. And as long as these links allow us to navigate from page A to page B, it's called an internal link (since it's always in the same domain name or on the same website). So, an internal link is a link that allows navigating to another page on a website.

建立网站时，在页面之间建立联系是有意义的。 只要这些链接允许我们从A页导航到B页，它就称为内部链接(因为它始终位于相同的域名或相同的网站中)。 因此，内部链接是允许导航到网站上另一个页面的链接。

Now, considering our folder is structured as follows:

现在，考虑我们的文件夹结构如下：

├── folder1
|  └── page2.html
├── page1.html
├── index.html

Here we have three use cases, and for each, we will create an example.

这里有三个用例，每个用例都将创建一个示例。

浏览到相同级别的页面 (Browse to pages on the same level)

• index.html

  index.html

<a href="page1.html">Browse to Page 1</a>

As you can see, the page page1.html is on the same level, therefore the path of the href attribute is just the name of the page.

如您所见，页面page1.html处于同一级别，因此href属性的路径仅是页面的名称。

浏览到另一个文件夹中的页面 (Browse to pages located in another folder)

• page1.html

  page1.html

<a href="./folder1/page2.html">Browse to Page 2</a>

Here, we have a different use case since the page we want to visit is now not on the same level. And to be able to navigate to that page, we should specify the complete path of the file including the folder.

这里，我们有一个不同的用例，因为我们要访问的页面现在不在同一级别。 为了能够导航到该页面，我们应该指定文件的完整路径，包括文件夹。

Great! Let's now dive into the last use case.

大！ 现在让我们进入最后一个用例。

从文件夹中的页面浏览到根目录 (Browse from a page located in a folder to the root)

• page2.html

  page2.html

<a href="../index.html">Browse to the Home Page</a>

Now, here to navigate to the index.html page, we should first go one level up before being able to browse to that page.

现在，在这里导航到index.html页面，我们应该先上一层然后才能浏览到该页面。

We have now covered internal links, so let's move on and introduce how to navigate to external links.

现在我们已经介绍了内部链接，因此让我们继续并介绍如何导航到外部链接。

如何创建外部链接 (How to create external links)

It's always useful to have the ability to navigate to external websites as well.

能够导航到外部网站总是很有用的。

<a href="https://www.google.com/">Browse to Google</a>

As you can see here, to navigate to Google, we have to specify its URL to the href attribute.

如您所见，要导航到Google，我们必须将其URL指定给href属性。

External and internal links are used to navigate from page A to page B. However, sometimes we want to stay on the same page and navigate to a specific part. And to do so, we have to use something called anchor link, let's dive into it in the next section.

外部和内部链接用于从页面A导航到页面B。但是，有时我们希望停留在同一页面上并导航到特定部分。 为此，我们必须使用一种称为锚链接的工具，让我们在下一部分中进行深入研究。

如何创建锚链接 (How to create anchor links)

An anchor link is a bit more specific: it allows us to navigate from point A to point B while remaining on the same page. It can also be used to go to a part on another page.

锚点链接更具体：它使我们可以从A点导航到B点，同时保持在同一页面上。 它也可以用于转到另一页上的零件。

在同一页面上导航 (Navigate on the same page)

<a href="#about">Go to the anchor</a>
<h1 id="about"></h1>

Compared to the others, this one is a bit different. Indeed it is, but it still works the same way.

与其他相比，这有点不同。 确实如此，但是它仍然以相同的方式工作。

Here, instead of a page link, we have a reference to an element. When we click on the link, it will look for an element with the same name without the hashtag (about). If it finds that id, it browses to that part.

在这里，我们有一个元素的引用，而不是页面链接。 当我们单击链接时，它将查找没有井号( about )的同名元素。 如果找到该ID，则会浏览到该部分。

导航到另一页 (Navigate on another page)

<a href="page1.html#about">Go to the anchor</a>

This is pretty the same as the previous example, except that we have to define the page in which we want to browse and add the anchor to it.

除了必须定义要浏览的页面并向其添加锚点之外，这与前面的示例几乎相同。

结论 (Conclusion)

The href is the most important attribute of the a tag. It allows us to navigate between pages or just a specific part of a page. Hopefully, this guide will help you build a website with plenty of links.

href是a标签最重要的属性。 它使我们可以在页面之间或页面的特定部分之间导航。 希望本指南将帮助您建立一个包含大量链接的网站。

Thanks for reading.

谢谢阅读。

Feel free to reach out to me!

欢迎与我联系！

TWITTER   BLOG  NEWSLETTER  GITHUB  LINKEDIN  CODEPEN  DEV

TWITTER BLOG 消息 GitHub的 LinkedIn CODEPEN DEV

Photo by JJ Ying on Unsplash

图片由JJ Ying在Unsplash上拍摄

翻译自: https://www.freecodecamp.org/news/how-to-make-html-hyperlinks-using-the-href-attribute-on-tags/

超链接href属性