让我们以一个简单的问题开始。你今天是怎么来到这篇文章和这个网站的？
嗯，从字面上看，是通过点击或点选一个链接，对吗？这就是这个元素的强大之处--只需点击一个链接，就能让你到达互联网的任何地方。
那么，什么是HTML中的链接和超链接？
什么是HTML中的链接和超链接？
链接是连接网站内部和其他网站页面的链条。没有链接，我们就不会有任何网站。
例如，让我们看一下这个网址，https://www.freecodecamp.org/ 。当你在地址栏中输入它，它将带你到freeCodeCamp的官方网站。
更简单地说，我们可以说链接只是网页的网址，它允许你连接到不同的服务器。
也许你想知道，那么，什么是超链接？好吧，它们是允许我们通过称为 "锚标"的参考文献将文件与其他文件或资源联系起来的东西。它们是万维网背后的一个基本概念，通过链接使网页之间的导航更加容易。
超链接可以以不同的形式呈现，如图像、图标、文本或任何类型的可见元素，当点击时，将你重定向到一个指定的网址。
例如，如果你点击这里，你就会进入我的个人资料，其中有我其他文章的列表。这就是一个超链接。
如何在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文件的方法。你可以把你想链接的东西放在标题或正文标签中：
<!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>
上面的例子将链接到网站的不同部分--"主页"、"服务"、"价格 "和 "关于"，按顺序排列。只写文件名就可以了，因为所有的工作都在同一个工作文件夹中共享。
如何链接到一个网站的特定部分
比方说，在你网站的某个地方，你提到了一个特定的主题或页面。而你希望你的读者或访客通过点击直接跳到那个部分。
首先，你必须将id 属性添加到页面的那个部分。也许它是一个段落--如果是这样，这就是它的样子：
<p id="detailed-info"> Read more on Upcoming Events </p>
在这之后在你的链接中添加id ，在href ：
<a href="#detailed-info"> Read more about upcoming events </a>
这段代码将把他们直接带到 "活动预告 "部分。
HTML中的其他类型的链接
如何链接到一个可下载的文件
当你想链接到一个用户需要下载而不是在浏览器中打开的资源时，你可以使用download 属性。这提供了一个默认的保存文件名。
下载属性对于PDF、图像文件、视频和音频剪辑以及其他你希望用户保存在他们的电脑或移动设备上的媒体内容来说是非常好的。
下面是一个带有下载链接的例子：
<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链接有各种属性，你可以用它们来提供更多的特殊信息。下面是一些最常用的属性：
-
href属性
href属性定义了一个HTML链接的目标URL地址。它使被标记的单词或短语可以被点击。href属性创建了一个指向另一个网页的超链接，如果没有它，HTML链接就不能按预期工作。 -
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，它只用于框架：
<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>
网络实际上只是一个超链接文档库，其中的锚点标签在相关文档之间起着桥梁作用。
我们已经看到了如何使用链接和如何创建它们，以及为什么它们在网络开发中很重要。
现在是时候去练习和完善你的新技能了。
享受编码 ❤
