HTML（构建 Web）之创建超链接

超链接真的很重要——正是它们让网络成为了网络。本文展示了创建链接所需的语法，并讨论了链接最佳实践。

先决条件： 基本的 HTML 熟悉度，如 HTML 入门 中所述。HTML 文本格式，如 HTML 文本基础知识 所述。
客观的： 学习如何有效地实现超链接，并将多个文件链接在一起。

超链接是 Web 必须提供的最激动人心的创新之一。它们从一开始就是 Web 的一个功能，并且是使 Web成为 Web 的原因。 超链接允许我们将文档链接到其他文档或资源，链接到文档的特定部分，或在网址上提供应用程序。几乎任何 Web 内容都可以转换为链接，以便在单击或以其他方式激活 Web 浏览器时转到另一个 Web 地址 ( URL )。

❗️注意： URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件或 Web 上的任何其他内容。如果网络浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（在这种情况下，打开或处理文件的职责将传递给设备上合适的本机应用程序）或下载文件（在这种情况下，您可以稍后尝试处理它）。

例如，BBC 主页包含许多链接，这些链接不仅指向多个新闻故事，还指向站点的不同区域（导航功能）、登录/注册页面（用户工具）等等。

基本链接是通过将文本或其他内容包装起来创建的，请参阅块级链接，在<a>元素内并使用包含网址的href属性，也称为超文本引用或目标。

<p>
  I'm creating a link to
  <a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>

这给了我们以下结果：

我正在创建指向Mozilla 主页的链接。

使用 title 属性添加支持信息

您可能希望添加到链接的另一个属性是title。标题包含有关链接的附加信息，例如页面包含哪种信息，或在网站上需要注意的事项。

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepage</a>.
</p>

这给了我们以下结果，将鼠标悬停在链接上会显示标题作为工具提示：

我正在创建指向Mozilla 主页的链接。

❗️注意：链接标题仅在鼠标悬停时显示，这意味着依赖键盘控制或触摸屏浏览网页的人将难以访问标题信息。如果标题信息对于页面的可用性确实很重要，那么您应该以所有用户都可以访问的方式呈现它，例如将其放在常规文本中。

如前所述，几乎任何内容都可以做成链接，甚至是块级元素。如果您有要制作链接的图像，请使用该<a>元素并使用该元素引用图像文件<img>。

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
</a>

❗️注意：您将在以后的文章中找到有关在 Web 上使用图像的更多信息。

URL 和路径快速入门

要完全理解链接目标，您需要理解 URL 和文件路径。本节为您提供实现此目的所需的信息。

URL 或统一资源定位器是一串文本，用于定义 Web 上某物的位置。例如，Mozilla 的英文主页位于https://www.mozilla.org/en-US/.

URL 使用路径来查找文件。路径指定您感兴趣的文件在文件系统中的位置。让我们看一个目录结构的例子，见creating-hyperlinks目录。

此目录结构的根creating-hyperlinks称为. 在本地使用网站时，您将拥有一个包含整个网站的目录。在根目录中，我们有一个index.html文件和一个contacts.html. 在一个真实的网站中，index.html将是我们的主页或登录页面（作为网站或网站特定部分的入口点的网页。）。

我们的根目录中还有两个目录——pdfs和projects. 它们每个内部都有一个文件——分别是一个 PDF ( project-brief.pdf) 和一个index.html文件。请注意，一个项目中可以有两个index.html文件，只要它们位于不同的文件系统位置即可。第二个index.html可能是项目相关信息的主要登陆页面。

  • 同一目录：如果您想在内部index.html（顶级index.html）包含一个指向的超链接contacts.html，您可以指定要链接到的文件名，因为它与当前文件位于同一目录中。您将使用的 URL 是contacts.html：
     
    <p>
  Want to contact a specific staff member? Find details on our
  <a href="contacts.html">contacts page</a>.
</p>
  • 向下移动到子目录：如果您想在内部index.html（顶级index.html）包含指向的超链接projects/index.html，则需要projects在指示要链接到的文件之前向下移动到目录。这是通过指定目录名，然后是正斜杠，然后是文件名来完成的。您将使用的 URL 是projects/index.html：
     
    <p>Visit my <a href="projects/index.html">project homepage</a>.</p>
  • 向上移动到父目录：如果您想在内部包含一个projects/index.html指向的超链接pdfs/project-brief.pdf，您必须向上移动一个目录级别，然后向下返回到该pdfs目录。要上一个目录，请使用两个点 — ..— 因此您将使用的 URL 是../pdfs/project-brief.pdf：
     
    <p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

❗️注意：如果需要，您可以将这些功能的多个实例组合成复杂的 URL，例如：../../../complex/path/to/my/file.html.

文档片段

可以链接到 HTML 文档的特定部分（称为文档片段），而不仅仅是文档的顶部。为此，您首先必须为id要链接的元素分配一个属性。链接到一个特定的标题通常是有意义的，所以它看起来像下面这样：

<h2 id="Mailing_address">Mailing address</h2>

然后要链接到那个特定id的 ，您可以将其包含在 URL 的末尾，前面是井号/井号 ( #)，例如：

<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing address</a>.
</p>

您甚至可以单独使用文档片段引用来链接到当前文档的另一部分：

<p>
  The <a href="#Mailing_address">company mailing address</a> can be found at the
  bottom of this page.
</p>

绝对 URL 与相对 URL

您会在 Web 上遇到的两个术语是绝对 URL和相对 URL：

  • absolute URL：指向由其在网络上的绝对位置定义的位置，包括协议和域名。

    例如，如果一个index.html页面被上传到一个目录，该目录projects位于网络服务器的根目录中，并且该网站的域名为https://www.example.com 
    如果未在 URL 中指定，则加载     https://www.example.com/projects/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 将指向不同的位置，具体取决于您引用的文件的实际位置——例如，如果我们将index.html文件移出projects目录并移至网站的根目录（顶级，不在任何目录中），则pdfs/project-brief.pdf它内部的相对 URL 链接现在将指向位于 的文件https://www.example.com/pdfs/project-brief.pdf，而不是位于 的文件https://www.example.com/projects/pdfs/project-brief.pdf。

当然，project-brief.pdf文件和pdfs文件夹的位置不会因为你移动了index.html文件而突然改变——这会使你的链接指向错误的地方，所以点击它就不起作用了。你需要小心！

编写链接时需要遵循一些最佳实践。现在让我们看看这些。

在您的页面上添加链接很容易。这还不够。我们需要让所有读者都可以访问我们的链接，无论他们当前的上下文和他们喜欢哪种工具。例如：

  • 屏幕阅读器用户喜欢在页面上从一个链接跳到另一个链接，以及脱离上下文阅读链接。
  • 搜索引擎使用链接文本来索引目标文件，因此最好在链接文本中包含关键字以有效描述所链接的内容。
  • 视觉读者浏览页面而不是阅读每个单词，他们的眼睛将被吸引到突出的页面功能，如链接。他们会发现描述性链接文本很有用。

我们来看一个具体的例子：

好的链接文本：下载 Firefox

<p><a href="https://www.mozilla.org/firefox/">
  Download Firefox
</a></p>

错误的链接文本：单击此处下载 Firefox

<p><a href="https://www.mozilla.org/firefox/">
  Click here
</a>
to download Firefox</p>

其他提示：

  • 不要将 URL 重复作为链接文本的一部分——URL 看起来很难看，当屏幕阅读器逐字逐句地读出它们时，听起来更难看。
  • 不要在链接文本中说“链接”或“链接到”——这只是噪音。屏幕阅读器告诉人们有一个链接。视觉用户也会知道有一个链接，因为链接通常采用不同的颜色和下划线（通常不应该打破这种约定，因为用户已经习惯了）。
  • 使链接文本尽可能短——这很有用，因为屏幕阅读器需要解释整个链接文本。
  • 尽量减少将同一文本的多个副本链接到不同位置的情况。这可能会给屏幕阅读器用户带来问题，如果有一个脱离上下文的链接列表被标记为“单击此处”、“单击此处”、“单击此处”。

链接到非 HTML 资源——留下清晰的路标

当链接到将被下载（如 PDF 或 Word 文档）、流式传输（如视频或音频）或具有其他潜在意外效果（打开弹出窗口或加载 Flash 电影）的资源时，您应该添加清晰的措辞以减少任何混乱。

例如：

  • 如果您使用的是低带宽连接，请单击一个链接，然后会意外开始数兆字节的下载。
  • 如果您没有安装 Flash 播放器，单击一个链接，然后突然进入需要 Flash 的页面。

让我们看一些例子，看看这里可以使用什么样的文本：

<!--段落1-->
<p>
    <a href="https://www.example.com/large-report.pdf">
        Download the sales report (PDF, 10MB)
    </a>
</p>

<!--段落2-->
<p>
    <a href="https://www.example.com/video-stream/" target="_blank">
        Watch the video (stream opens in separate tab, HD quality)
    </a>
</p>

<!--段落3-->
<p>
    <a href="https://www.example.com/car-game">
        Play the car game (requires Flash)
    </a>
</p>

链接到下载时使用下载属性

当您链接到要下载而不是在浏览器中打开的资源时，您可以使用该download属性来提供默认的保存文件名。下面是一个带有最新 Windows 版 Firefox 的下载链接的示例：

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

主动学习：创建导航菜单

在本练习中，我们希望您将一些页面与导航菜单链接在一起，以创建一个多页面网站。这是创建网站的一种常见方式——每个页面都使用相同的页面结构，包括相同的导航菜单，所以当点击链接时，给人的印象是你停留在同一个地方，并且显示不同的内容。被抚养长大。

您需要在同一目录中制作以下四个页面的本地副本。有关完整的文件列表，请参阅navigation-menu-start目录：

你应该：

  1. 在一页的指定位置添加一个无序列表，其中包含要链接到的页面的名称。导航菜单通常只是一个链接列表，所以这在语义上是可以的。
  2. 将每个页面名称更改为指向该页面的链接。
  3. 将导航菜单复制到每个页面。
  4. 在每个页面上，只删除指向同一页面的链接——页面包含指向自身的链接会造成混淆并且没有必要。而且，缺少链接可以很好地提醒您当前所在的页面。

完成的示例应类似于以下页面：

❗️ 注意：如果您遇到困难，或者不确定自己是否做对了，您可以检查导航菜单标记目录以查看正确答案。

可以创建链接或按钮，单击它们会打开新的外发电子邮件消息，而不是链接到资源或页面。这是使用<a>元素和mailto:URL 方案完成的。

在其最基本和最常用的形式中，mailto:链接指示预期收件人的电子邮件地址。例如：

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

这会生成一个如下所示的链接：Send email to nowhere。

事实上，电子邮件地址是可选的。如果您省略它并且您的href是“mailto:”，则用户的电子邮件客户端将打开一个没有目标地址的新外发电子邮件窗口。这通常作为“共享”链接很有用，用户可以单击该链接将电子邮件发送到他们选择的地址。

指定细节

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

这是一个包含抄送、密件抄送、主题和正文的示例：

<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 查询符号。阅读GET 方法以了解更常用的 URL 查询符号。

以下是一些其他示例mailtoURL：

测试你的技能！

您已读完本文，但您还记得最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证您是否保留了这些信息 — 请参阅测试您的技能：链接。

概括

这就是链接，无论如何现在！当您开始查看它们的样式时，您将在课程的后面返回到链接。接下来是 HTML，我们将回到文本语义并研究一些您会发现有用的更高级/不寻常的功能 —高级文本格式是您的下一站。

posted on 2022-12-15 01:51  梁飞宇  阅读(350)  评论(0)    收藏  举报