超鏈接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屬性