1. 什么是超链接

  超链接是互联网提供的最令人兴奋的创新之一，它们从一开始就一直是互联网的一个特性，使互联网称为互联的网络。超链接使我们能够将我们的文档链接到任何其他文档，也可以链接到文档的指定部分，我们可以在一个简单的网址上提供应用程序。几乎任何网络内容都可以转换为链接，点击超链接将使网络浏览器转到另一个网址URL。

2. 链接的解析

  通过将文本或其他内容包裹在<a>元素内，并给它一个包含网址的href属性(超文本引用或目标)来创建一个基本的链接。

<p>
	我创建了一个指向
	<a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>的链接。
</p>

2.1 块级链接

  块级元素都可以作为链接出现。如果想让标题元素变为链接，就把它包裹在锚点元素<a>中：

<a href="https://developer.mozilla.org/zh-CN/">
	<h1>MDN Web 文档</h1>
</a>
<p>自从2005年起，就开始记载包括CSS、HTML、JavaScript等网络技术。</p>

2.2 图片链接

  如果有需要作为链接的图片，使用<a>元素来包裹引用图片的<img>元素。

<a href="https://developer.mozilla.org/zh-CN/">
	<img src="test.png" alt="测试图片">
</a>

2.3 使用title属性添加支持信息

  title旨在补充关于链接的信息。

<p>
	我创建了一个指向
	<a
		href="https://www.mozilla.org/zh-CN/"
		title="了解Mozilla使命以及如何参与贡献的最佳站点。">
		Mozilla 主页</a>的超链接
<p>

3. 统一资源定位符URL与路径path快速入门

  统一资源定位符Uniform Resource Locator，URL是一个定位了在网络上的位置的一个文本字符串。
  URL使用路径查找文件。路径指定文件系统中你感兴趣的文件所在的位置。
  在根目录中，有index.html和contracts.html文件。在真实的网站中，index.html将会成为我们的主页或着陆页。
  根目录中还有两个目录——pdfs和projects，它们分别包含一个PDF文件和一个index.html文件。请注意你可以在同一个项目中有两个index.html文件，前提是他们在不同的文件系统目录下。第二个index.html或许是项目相关信息的着陆页。
  指向当前目录：如果你想在index.html(顶层index.html)中包含一个指向contacts.html的超链接，你只需要指定想要链接到的文件名。因为它与当前文件是在同一个目录的，所以你应该使用的URL是contracts.html：

<p>
	要联系某位工作人员，请访问我们的<a href="contracts.html">联系人页面</a>。
</p>

  指向子目录：如果想在index.html(顶层index.html)中包含一个指向projects/index.html的超链接，你需要先进入projects项目目录，然后通过指定目录的名称，然后是正斜杠，然后是文件的名称指明要链接的文件index.html。因此你要使用的URL是projects/index.html。

<p>请访问我的<a href="projects/index.html">项目主页</a>。</p>

  指向上级目录：如果你想在projects/index.html中包含一个指向pdfs/project-brief.pdf的超链接，你必须先返回上级目录，然后再回到pdfs目录。因此你应该使用的URL是…/pdfs/project-brief.pdf。

<p>点击打开<a href="../pdfs/project-brief.pdf">项目简介</a>。</p>

3.1 文档片段

  超链接除了可以链接到文档外，也可以链接到HTML文档的特定部分。要做到这一点，你必须首先给要链接到的元素分配一个id属性。通常情况下，链接到一个特定的标题是有意义的。

<h2 id="Mailing_address">邮寄地址</h2>

  为了链接到那个特定的id，要将它放在URL的末尾，并在前面包含#号。

<p>
	要提供意见和建议，请将信件寄送至<a href="contracts.html#Mailing_address">我们的地址</a>
</p>

  甚至可以在同一份文档下，通过链接文档片段，来链接到当前文档的另一部分。

<p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。</p>

3.2 绝对URL和相对URL

  绝对URL：指向由其在Web上的绝对位置定义的位置，包括协议和域名。如果index.html页面上传到了projects这一个目录。并且projects目录位于web服务站点的根目录，web站点的域名为https://www.example.com，那么这个页面就可以通过https://www.example.com/projects/index.html访问或通过https://www.example.com/projects来访问，因为在没有指定特定的URL情况下，大多数web服务器会默认访问加载index.html这类页面。不管绝对URL在哪里使用，它总是指向确定的相同位置。
  相对URL：指向与你链接的文件相关的位置。如果我们想从示例文件链接https://www.example.com/projects/index.html转到相同目录下的一个PDF文件，URL就是文件名project-brief.pdf。如果PDF文件能够在projects的子目录pdfs中访问到，相对路径就是pdfs/project-brief.pdf，对应的绝对URL是https://www.example.com/projects/pdfs/project-brief.pdf。一个相对URL将指向不同的位置，这取决于引用的文件的实际位置。

4. 链接最佳实践

4.1 使用清晰的链接措辞

  将链接放在你的页面上很容易。这还不够。我们需要让所有的读者都可以使用链接，无论他们当前的环境和用于访问的工具。
  使用屏幕阅读器的用户喜欢从页面上的一个链接跳到另一个链接，并且脱离上下文来阅读链接。
  搜索引擎使用链接文本来索引目标文件，所以在链接文本中包含关键词是一个很好的注意，以有效地描述与之相关的信息。
  读者往往会浏览页面而不是阅读每一个字，他们的眼睛会被页面的特征所吸引，比如链接。他们会找到描述性的链接。
  好的链接文本：

<p><a href="https://www.mozilla.org/zh-CN/firefox/">下载 Firefox</a></p>

  不好的链接文本：

<p>
	<a href="https://www.mozilla.org/zh-CN/firefox/">点击这里 </a>下载 Firefox
</p>

  不要重复URL作为链接文本的一部分。
  不要在链接文本说链接或链接到。
  保持你的链接标签尽可能短。
  尽量减少相同文本的多个副本链接到不同地方的情况。

4.2 链接到非HTML资源——留下清晰的指示

  当链接到一个需要下载的资源或流媒体或有另一个潜在的意想不到的效果，你应该添加明确的措辞，以减少混乱。

<p>
	<a href="https://www.example.com/large-report.pdf">
		下载销售报告（PDF，大小为10 MB）
	</a>
</p>
<p>
	<a href="https://www.example.com/video-stream/" target="_blank">
		观看视频（将在新标签页中播放，HD画质）
	</a>
</p>

4.3 下载链接时使用download属性

  当你链接到要下载的资源而不是在浏览器中打开时，你可以使用download属性来提供一个默认的保存文件名。

<a
	href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
	download="firefox-latest-64bit-installer.exe">
	下载最新的 Firefox 中文版 - Windows（64位）
</a>

5. 电子邮件链接

  当点击一个链接或按钮时，可能会开启新的邮件的发送而不是连接到一个资源或页面。这种情况可以使用<a>元素和mailto: URL协议实现。
  其最基本和最常用的使用形式为一个指明收件人电子邮件地址的mailto:链接。

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>

  实际上，电子邮件地址是可选的。如果你省略了它，发送新的电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在分享链接时很有用的，用户可以给他们选择的地址发送邮件。

5.1 指定详细信息

  除了提供电子邮件地址，你还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到你提供的mailto URL中。其中最常见的是主题subject，抄送cc和主体body(这不是一个真正的标头字段，但允许你为新邮件指定一个简短的内容消息)。每个字段及其值被指定为查询项。

<a
	href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
	发送含有cc、bcc、主题和主体的邮件
</a>

  每个字段的值必须使用URL编码，即使用百分号转义的非打印字符和空格。同时注意使用?来分隔主URL与参数值，以及使用&符来分隔mailto: URL中的各个参数。这是标准的URL查询标记方法。

参考

1、创建超链接