如何在HTML [+示例]中使用HREF

没有链接的网络将是什么？好吧，根本没有太多的网络。Mozilla定义了万维网作为：

“可以通过Internet访问的公共网页互连系统。”

这些页面如何连接？超链接，或从一个文档到另一个文档的链接，通常以超文本的形式出现。实际上，http/https中的“ h”是“超文本”。简而言之，没有链接没有网络。

We all know hyperlinks when we see them, whether we’re perusing an online store or going down a Wikipedia rabbit hole. In essence, browsing the web is just clicking link after link.

So, in this guide, we’ll be peeking under the hood to see what these links look like in HTML. To write links into your web pages, you’ll need theelement, paired with theHREF属性 - 让我们学习如何使用两者。

您已经遇到了一个实例HREF在上面的介绍中，当我链接到万维网的定义时。该超链接的HTML看起来像这样：

Mozilla defines the World Wide Web

这re are several things to note here, all important for the link to work:

• 这link text is wrapped in an opening标签和关闭标签。这些标签之间的所有文本都是可选的，并接收链接样式。
• 这HREF属性及其随附的属性被放置在开口内bob全站app标签。
• 这attribute value ofHREF(inside the quotation marks) is a URL that tells the browser where to go when the link is selected.
• Note the additional attributestarget=“_blank”andrel =“ nooopener”— these tell the browser to open the web page in a new tab. UnlikeHREF, these attributes are not necessary.

To be more precise, the link above uses anabsolute URL在其他网站上指定目的地。然而，HREFcan take on other values too, as we’ll see next.

a href Values

You’ll most often see theHREF用于链接到同一域或其他域上另一个网页的属性。HREFcan also be used for other things, like linking to a different part of the same page, or serving a different web protocol than HTTPS. Let’s review each of these possible values with examples.

Absolute URL

As discussed above, an absolute URL points to a file on another website. In other words, it’s a URL that contains a different domain name from the current page’s URL (e.g. hubspot.com to mozilla.org).

这是另一个例子：Go to Google search。

该超链接还包含一个绝对URL：

Here’s another example: Go to Google search.

It doesn’t matter where this link is used — it always points to the same place, the Google homepage. That’s why it’s called an “absolute” URL.

奖励提示：注意链接文本如何描述链接的作用。这个makes your site more accessible to those using assistive technologies。

Relative URL

A relative URL references a file on the same website. For example, here’s a link to ourUltimate Guide to HTML。

这就是代码的外观：

相对URL引用同一网站上的文件。例如，这是我们的 html最终指南。
的链接

看看如何HREF价值看起来不同吗？它不包括协议https或域名。当排除URL的这一部分时，浏览器假设指定的文件位于与当前页面同一域上（在这种情况下为HubSpot.com）。

We call these URLs “relative” because the destination of the link is specified相对的到当前网页。如果我们在另一个网站上的页面上粘贴了上面的HTML，那将行不通。

Why use relative URLs in lieu of absolute URLs? The answer is that relative URLs come in handy if the file path of the linked file changes, such as in the case of a website restructuring or a domain change. If this happens, the relative URL will still work, since it only contains the name of the linked resource and not the entire file path.

URI碎片

使用URI片段链接到同一网页的不同部分。URI片段以哈希（＃）符号开头，然后是所需页面元素的ID。

For example,此链接将您引导到该链接上方的H3。

例如，此链接将您引向上方的H3 。

您也可以使用该值＃最佳将访问者送回页面顶部。

您也可以使用值 #top  将访问者发送回页面顶部。

URI fragments are useful for chapter links, or any instance in which users can jump to an earlier/later section of a page.

Additional Protocols

到目前为止，我们已经看到的绝对URL和相对URL使用了HTTP/HTTPS协议，该协议在万维网上提供页面。但是，我们可以将其他协议与HREFtoo, like mailto: and file:.

For example, click this link to send an email to示例@gmail.com（尽管我们不能保证您会回来）。

For example, click this link to send an email to example@gmail.com (though we can’t guarantee you’ll hear back).

A Script

Lastly, you can create a link to trigger JavaScript code.

Click here for a nice greeting.

HREF：在网络上创建链接

如果您像我一样，您会整天单击各种链接以绕过网络。如果您只是学习HTML，元素及其随附的bob全站appHREF属性是了解如何将网页绑在一起的核心。通过学习这些概念以及如何编写它们，您可以更接近自己建立网站。