HTML

HTML 超链接

2020-12-24  本文已影响0人  LXEP

超链接非常重要 ——它们使互联网成为一个互联的网络。这节课我们将介绍创建链接所需的语法，并且讨论一些链接的最佳实现方法。

什么是超链接

它们从一开始就一直是互联网的一个特性，使互联网成为互联的网络。

超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以连接到文档的指定部分，我们可以在一个简单的网址上提供应用程序。

几乎任何网络内容都可以转换成链接，点击超链接将使网络浏览器转到另一个网址（URL）。

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

例如，bilibili主页包含大量的链接，有些链接指向多个up主上传的视频，有些链接指向网站的不同区域（导航功能），还有些链接指向登录/注册页面（用户工具）等等。

链接的解析

通过将文本（或其他内容）转换为<a>元素内的链接来创建基本链接，给它一个href属性（也称为目标），它将包含你希望指向的网址。

<p>我创建了一个指向
  <a href="https://huxiu.com">虎嗅网 主页</a>
</p>
超链接

使用title属性添加支持信息

你可能要添加到你的链接的另一个属性是标题；这旨在包含关于链接的补充有用信息，例如页面包含什么样的信息或需要注意的事情。例如：

<p>我创建了一个指向
  <a href="https://huxiu.com"
     title="虎嗅是一个聚焦科技与创新的资讯平台">虎嗅网 主页</a>
</p>

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


超链接的title

试一试

创建你自己的示例链接

块级链接

如上所述，你可以将一些内容转换为链接，甚至是块级元素。例如你想要将一个图像转换为链接，你只需要把图像元素放到<a>与</a>标签中间。

<a href="https://huxiu.com">
  <img src="huxiu.com" alt="链接到虎嗅主页的标志" />
</a>

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

要全面地了解链接目标，你需要了解统一资源定位符和文件路径。

统一资源定位符（Uniform Resource Locator，URL）是一个定义了在网络上位置的文本字符串。例如虎嗅网的主页定位在https://huxiu.com。

URL使用路径查找文件。路径指定文件系统中您感兴趣的文件所在的位置。

文档片段

超链接除了可以链接到文档外，也可以链接到HTML文档的特定部分（被称为文档片段）。要做到这一点，你必须首先给链接到的元素分配一个id属性。例如，如果你想要链接到一个特定的标题，可以这样做：

<h2 id="email_address">邮箱地址</h2>

然后链接到那个特定的id，你可以在URL的结尾使用一个井号指向它，例如：

<p>想要反馈信息，请将信件邮寄到<a href="contacts.html#email_address"></a></p>

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

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

绝对URL和相对URL

你可能会在网上遇到过两个术语，绝对URL和相对URL（或者称为，绝对链接和相对链接）：

链接的最佳实践

接下来，我们来看一些在编写链接元素时可以遵循的最佳实践。

使用清晰的链接措辞

把链接放在你的页面上很容易。这还不够，我们需要让所有的读者都可以使用链接，不管他们当前的环境和工具。例如：

推荐的链接文本：

<p>
  <a href="https://firefox.com/">
    下载Firefox
  </a>
</p>

不推荐的链接文本:

<p>
  <a href="https://firefox.com/">
    点击这里
  </a>
  下载Firefox
</p>

其他提示：

尽可能使用相对链接

从上面的讲述中，你会觉得使用绝对定位是一个好主意；毕竟，当页面像相对链接那样移动时，它们不会中断。但是，当链接到同一个网站的其他位置时，你应该使用相对链接：

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

当链接到一个需要下载的资源（如PDF或Word文档）或流媒体（如视频或音频）或有另一个潜在的意想不到的效果（打开一个弹出窗口，或加载Flash电影），你应该添加明确的措辞，以减少任何混乱。如下的例子会让人反感：

你应该这样写：

<p><a href="http://www.example.com/large-report.pdf">
  下载销售报告（PDF, 10MB）
</a></p>

<p><a href="http://www.example.com/video-stream/">
  观看视频（将在新标签页中播放, HD画质）
</a></p>

<p><a href="http://www.example.com/car-game">
  进入汽车游戏（需要Flash插件）
</a></p>

在下载链接时使用download属性

当你链接到要下载的资源而不是在浏览器中打开时，你可以使用download属性来提供一个默认的保存文件名（此属性仅适用于同源URL。）下面是一个下载链接到Firefox的Windows最新版本的示例：

<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>

案例练习

创建一个导航菜单

把一些页面和导航菜单连接起来，创建一个多页面网站。这是创建多页面网站的一种常见方式——每一页都使用相同的页面结构，包括相同的导航菜单，所以当链接被点击时，它给人的印象是你停留在同一个地方，不同的内容正在被提出来。

你需要将以下四页的本地副本放在同一个目录中。

按照如下步骤：

  1. 在一个页面上的指定位置添加一个无序列表，其中包含要链接到的页面的名称。导航菜单通常只是一个链接列表，因此这在语义上是确定的。

  2. 将每个页面名称转换成该页的链接。

  3. 将导航菜单复制到每个页面。

  4. 在每个页面上，只删除同一页的链接——一个页面包含自己的链接是令人困惑和毫无意义的，而缺少链接会对你当前的页面起到很好的视觉提示作用。

  5. 最终的例子应该是这样的：


    案例

电子邮件链接

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

其最基本和做常用的使用形式为mailto:link（链接），链接简要说明收件人的电子邮件地址。例如：

<a href="mailto:this@126.com">向this发邮件</a>

这会创建一个链接，像这样的：

电子邮件链接
其实，邮件地址是可选的。如果你忘记了（也就是说，你的href仅仅只是简单的mailto:），一个新的发送电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以发送给他们选择的地址邮件。

具体细节

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

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

<a href="mailto:this@126.com?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查询标记方法。

这里列出一些其他的示例：

上一篇下一篇

猜你喜欢

热点阅读