这是我参与「第四届青训营 」笔记创作活动的的第8天

创建超链接

什么是超链接？

超链接是互联网的一种特性，使互联网真正成为“互联”的网络。超链接使得我们能够将我们自己的文档与任何其他资料相链接，也可以链接到文档的指定部分。这即是说，互联网为任何资料提供了读取它的唯一路径——链接，点击（激活）超链接可使得网络浏览器跳转到另一个网址（URL）。

注意：URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。如果浏览器不知道如何显示或处理文件，它会询问你是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。

 

链接的解析

通过将文本包裹在<a>元素内，然后为它赋上一个href属性，即创建了一个基本链接（也称为超文本引用，它将包含一个可跳转的网址）。

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

结果如下：

我创建了一个指向Mozilla 主页的超链接。

使用title属性添加支持信息

当你添加到你的链接的另一个属性是title（标题），这包含了关于链接的一些补充信息。

 

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

结果如下（当鼠标悬停在链接上时，标题将作为提示信息出现）:

我创建了一个指向Mozilla 主页的超链接。

块级链接

你可以将一些内容转换为链接，甚至是块级元素。例如：如果你想要将一个图像转换为链接，你只需要把引用了图像文件的<img>元素放到<a>标签内。

<a href="https://lenovo.ilive.cn/?f=stee"<img src="icon.jpeg" alt="链接至 lenovo 主页"></a>

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

统一资源定位符(Uniform Resource Locator，简写：URL)是一个定义了在网络上的位置的一个文本字符串。例如联想浏览器主页定位在：lenovo.ilive.cn/?f=stee。

URL使用路径查找文件。

让我们来看一个简单的目录：

此目录结构的根目录称为study。当在网站上工作时，我们会获得一个包含整个网站的目录。在根目录，我们有1.html文件和contact.html文件。在网站上，它将作为我们的主页。

在根目录下还有一个目录jpeg，它包含一个jpeg文件。

• 指向当前目录：如果1.html想要包含一个超链接指向contact.html文件，你只需要指定想要链接的文件名，因为它与当前文件是在同一目录下的。所以你应该使用的URL是contact.html：

  <p>请联系我们：<a href="contact.html">联系人页面</a>。</p>
  

• 指向子目录：如果1.html想要包含一个超链接指向jpeg/icon.jpeg文件，你需要先进入jpeg项目目录，然后指明要链接的文件icon.jpeg。因此你要使用的URL是jpeg/icon.jpeg：

  <p>这里有一张<a href="ipeg/icon.jpeg">图片</a>。</p>
  

• 指向上级目录：如果你想在 1.html 中包含一个指向上级目录文件的超链接，你必须先返回上级目录，然后再回到相应目录。“返回上一个目录级”使用两个英文点号表示（..），所以你应该使用的 URL 是 ../test-size：

  <p>返回上级<a href="../test-size/1.png">目录</a>。</p>
  

文档片段

超链接除了可以链接到文档之外，也可以链接到HTML文档的特定部分（即文档片段）。例如：如果你想链接到一个标题：

1. 为要链接的元素分配一个id属性。

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

2. 在URL的结尾使用一个#指向它，实现链接

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

3. 你甚至可以在同一份文档下，通过链接文档片段，来链接到同一份文档的另一部分：

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

绝对URL和相对URL

绝对URL：指向由其在Web上的绝对位置定义的位置，包括协议和域名。例如：如果1.html页面上传到了一个叫做projects的目录，而这一目录位于web服务站点的根目录，web站点的域名为www.example.com，那么这个页面就可以通过www.example.com/projects/in…访问（或者直接通过www.example.com/projects/来访问，在没有指定特定URL的情况下，大多数web服务器会默认访问加载html这类页面）

相对URL：指向与你链接的文件相关的位置，即参考要链接的文件与当前文件的位置关系，是相等的、位于子目录或者位于上一级。

链接最佳实践

1. 使用清晰的链接措辞

2. 链接到非HTML资源时，留下清晰的指示

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>

电子邮件链接

当点击一个链接或者按钮时，打开一个新的电子邮件发送信息，而不是链接到一个资源或页面，这种情况我们该怎么做呢：使用<a>元素和<mailto:URL>的方案。

最基本和最常用的使用形式为一个mailto:链接，链接指明收件人的电子邮件地址。例如：

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

这看起来像是这样：

向nowhere发邮件  

实际上，你也可以选择在href后仅仅只是简单的mailto，此时一个新的发送电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，用户可以给他们选择的地址发送邮件。

指定详细信息

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

下面是一个包含 cc、bcc、主题和主体的示例：

<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">
  Send mail with cc, bcc, subject and body
</a>

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

参考资料

创建超链接