让我们从一个简单的问题开始：你今天是如何登陆这篇文章和这个网站的？
嗯，从字面上看，通过单击或点击链接，对吗？这就是这个元素的强大之处——只需单击一个链接，它就可以让你访问 Internet 的任何部分。
那么，什么是 HTML 中的链接和超链接？
什么是 HTML 中的链接和超链接
链接是将网站内的页面和其他网站的页面连接起来的链。没有链接，我们就不会有任何网站。
例如，让我们看看这个 URL，https://www.freecodecamp.org/。当你在地址栏中输入它时，它会带你到官方的 freeCodeCamp 站点。
简单来说，我们可以说链接只是网页的网址，允许你连接不同的服务器。
也许你想知道超链接是什么？它们允许我们通过称为锚标记的引用将文档链接到其他文档或资源。它们是万维网背后的一个基本概念，它使通过链接在网页之间的导航变得更加容易。
超链接可以以不同的形式呈现，例如图像、图标、文本或任何类型的可见元素，单击这些元素后会将你重定向到指定的 url。
例如，如果你单击此处，你将进入我的个人资料，其中包含我的其他文章列表。那是一个超链接。
如何在 HTML 中创建链接
如何使用 <a> 链接
你可以通过将文本（或任何其他相关内容）包裹在 <a></a> 元素中，并使用包含地址的 href 属性来创建基本链接。
下面是示例：
<a href="https://www.freecodecamp.org">Visit: Freecode Camp!</a>
如何设计链接样式
通常在 .html 文件中插入链接，将链接到样式和功能文件。它们通常以 .css 和 .js 文件扩展名命名。
以下是链接到 CSS 文件的方法：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
这是链接到 JS 文件的方法。你可以将想要链接的内容放在 head 或 body 标签中。
<!DOCTYPE html>
<html>
<head>
<script src="myScript.js"></script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
如何在站点内链接
链接到站点内的不同页面
你可以使用这种类型的链接将用户定向到同一站点上的不同页面。
以你的网站有 5 个页面的情况为例，你会希望用户能够从一个点访问所有页面，例如导航栏。
首先，你必须创建所有页面，然后链接它们。在这种情况下，我们将这样做：
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
上面的示例将链接到网站的不同部分——“Home” 页面、“Services”、“Pricing” 和 “About”，按顺序排列。只写文件名就足够了，因为所有工作都在同一个工作文件夹中共享。
如何链接到网站的特定部分
假设在你网站的某个地方，你提到了一个特定的主题或页面，你希望读者或访问者通过单击直接跳转到该部分。
首先，你必须将 id 属性添加到页面的该部分，也许它是一个段落——如果是这样，它的外观是这样的：
<p id="detailed-info"> Read more on Upcoming Events </p>
在你的链接之后，在 href 中添加 id：
<a href="#detailed-info"> Read more about upcoming events </a>
HTML 中其他类型的链接
如何链接到可下载文件
当你想要链接到用户需要下载而不是在浏览器中打开的资源时，你可以使用 download 属性。这提供了默认的保存文件名。
download 属性非常适合你希望用户保存在其计算机或移动设备上的 PDF、图像文件、视频和音频剪辑以及其他媒体内容。
这是一个带有 download 链接的示例：
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>
如何添加电子邮件链接
电子邮件链接允许我们创建指向电子邮件地址的超链接。你可以使用 HTML <a></a> 标签创建这些链接——但在这种情况下，我们传递收件人的电子邮件地址而不是传递 URL。
你可以使用 mailto 属性在锚标记中指定电子邮件地址。
例如：
<a href="mailto:hillarynyk@gmail.com">Send email to Me</a>
除了电子邮件地址，你还可以提供其他信息。事实上，任何标准邮件头字段都可以添加到你提供的 mailto URL。最常用的是“主题”、“抄送”和“正文”。
这是一个包含抄送、密送、主题和正文的示例：
<a href="mailto:hillarynyk@gmail.com?cc=larymak4@gmail.com&bcc=larymak8@gmail.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>
HTML 链接属性
HTML 链接具有各种属性，你可以使用这些属性来提供更多特定信息。以下是一些最常用的。
1、href 属性
href 属性定义 HTML 链接的目标 URL 地址。它使标记的单词或短语可点击。href 属性创建到另一个网页的超链接，如果没有它，HTML 链接将无法按预期工作。
2、target 属性
target 属性定义了 HTML 链接的打开位置。曾经访问过一个网站，当你点击一个链接时，它会自动在一个新标签中打开吗？嗯，这就是这个属性的作用。
以下是你可以与 target 属性一起使用的所有可能选项：
- -blank => 在新选项卡中打开链接。主要用于避免失去网站的访问者。默认情况下，当用户单击链接时，它会在同一选项卡中打开——但这会改变这一点。
<a href= "https://www.freecodecamp.org/" target="_blank"> freeCodeCamp</a>
- _self => 在同一窗口或单击它的选项卡中加载 URL。这通常是默认值，不需要指定。
<a href="https://www.freecodecamp.org" target="_self">freeCodeCamp</a>
- _parent => 加载父级框架的 URL，它只能与 frame 一起使用。
<a href="https://www.freecodecamp.org" target="_parent">freeCodeCamp</a>
- _top => 在整个窗口中加载链接的文档。
<a href="https://www.freecodecamp.org" target="_top">freeCodeCamp</a>
title属性title属性概述有关链接目的的额外信息。如果用户将鼠标悬停在链接上，则会出现一个工具提示，描述链接的目标、标题或任何其他信息：
<a href="https://www.freecodecamp.org" title="Link to free learning Resources">Learn to code</a>
HTML 链接快速提示和回顾
在本文中，我们了解了 HTML 中的所有链接和超链接。下面是一些帮助你处理链接的提示。
首先，当你使用图像作为链接时，最好在文本中包含 alt 标签。这提供了在图片未加载的情况下显示的替代文本。
其次，你应该练习使用 hreflang 属性指定锚链接到的文档的语言。
<a href="https://www.freecodecamp.org" hreflang="en">Freecode Camp</a>
Web 实际上只是一个超链接文档库，其中锚标记充当相关文档之间的桥梁。
我们已经了解了如何使用链接，如何创建它们，以及为什么它们在 Web 开发中很重要。
是时候去练习和完善你的新技能了。
享受编码❤
原文：What is a Hyperlink? HTML Links Explained with Examples，作者：Hillary Nyakundi