Creating hyperlinks

 

Hyperlinks are really important — they are what makes the Web 上网. This article shows the syntax required to make a link, and discusses link best practices.

Prerequisites: 基本的HTML熟悉程度,如HTML入门中所述 . HTML文本格式,如HTML文本基础知识所述 .
Objective: 学习如何有效地实现超链接,以及将多个文件链接在一起.

超链接是网络必须提供的最令人兴奋的创新之一. 好吧,它们从一开始就一直是Web的功能,但是它们正是使Web 成为Web的原因 -它们允许我们将文档链接到我们想要的任何其他文档(或其他资源),我们也可以链接到文档的特定部分,我们可以在一个简单的网址上提供应用程序(将此与必须安装的原生应用程序以及所有业务进行对比.)几乎所有的Web内容都可以转换为链接,以便在点击(或以其他方式激活),它将使网络浏览器转到另一个网址( URL ).

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

例如,BBC主页包含大量链接,这些链接不仅指向多个新闻报道,而且指向站点的不同区域(导航功能),登录/注册页面(用户工具)等等.

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

通过将要转换为<a>元素内的链接的文本(或其他内容,请参见块级链接 )包装并为其赋予href属性(也称为超文本引用target )来创建基本链接.包含您要链接指向的网址.

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

这给我们以下结果:

我正在创建Mozilla主页的链接.

Adding supporting information with the title attribute

您可能要添加到链接中的另一个属性是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主页的链接.

注意 :链接标题仅在鼠标悬停时显示,这意味着依靠键盘控件导航网页的人员将难以访问标题信息. 如果标题的信息对于页面的可用性确实很重要,那么您应该以所有用户都可以访问的方式显示标题,例如,将其放在常规文本中.

积极的学习时间:我们希望您使用本地代码编辑器创建HTML文档(我们的入门模板就可以了.)

  • 在HTML正文中,尝试添加一个或多个段落或您已经知道的其他类型的内容.
  • 将某些内容转换为链接.
  • 包括标题属性.

如前所述,您几乎可以将任何内容转换为链接,甚至可以将块级元素转换为链接. 如果您有要转换为链接的图像,则可以将图像放在<a></a>标记之间.

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>

注意 :在以后的文章中,您将找到有关在Web上使用图像的更多信息.

A quick primer on URLs and paths

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

URL或统一资源定位符只是一个字符串,用于定义某些内容在Web上的位置. 例如,Mozilla的英语主页位于https://www.mozilla.org/en-US/ .

URL使用路径查找文件. 路径指定您感兴趣的文件在文件系统中的位置. 让我们看一个目录结构的简单示例(请参阅creation-hyperlinks目录.)

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

此目录结构的称为creating-hyperlinks . 在本地使用网站时,您将拥有一个目录,整个网站都可以进入该目录. 在根内部,我们有一个index.html文件和一个contacts.html . 在真实的网站中, index.html是我们的主页或登录页面(充当网站或网站特定部分的入口点的网页).

我们的根目录下还有两个目录pdfsprojects . 它们每个内部都有一个文件-分别为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的超链接,则必须上一级目录,然后下一级进入pdf目录. "进入目录"用两个点- .. ,因此您要使用的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 .

Document fragments

可以链接到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>

Absolute versus relative URLs

您将在网上遇到两个术语 绝对URL相对URL:

绝对网址 :指向由其在网络上的绝对位置定义的位置,包括协议域名 . 因此,例如,如果将index.html页面上载到位于Web服务器根目录内的名为projects的目录,并且该网站的域为http://www.example.com ,则该页面将位于http://www.example.com/projects/index.html (甚至只是http://www.example.com/projects/ ,因为大多数Web服务器只是在寻找诸如index.html类的登录页面才能加载网址中未指定.)

不管使用在哪里,绝对URL都将始终指向相同的位置.

relative URL :指向对于您要链接的文件的位置,更像我们在上一节中所看到的. 例如,如果我们要从http://www.example.com/projects/index.html的示例文件链接到同一目录中的PDF文件,则URL只是文件名,例如project-brief.pdf无需其他信息. 如果PDF位于projects pdfs内的子目录中,则相对链接将为pdfs/project-brief.pdf (等效的绝对URL为http://www.example.com/projects/pdfs/project-brief.pdf .)

相对URL会根据您引用的文件的实际位置指向不同的位置-例如,如果我们将index.html文件移出了projects目录并移到了网站的根目录中(顶层,而不是任何目录),其中的pdfs/project-brief.pdf相对URL链接现在将指向位于http://www.example.com/pdfs/project-brief.pdf的文件,而不是位于http://www.example.com/projects/pdfs/project-brief.pdf的文件http://www.example.com/projects/pdfs/project-brief.pdf .

当然,因为您移动了index.html文件,所以project-brief.pdf文件和pdfs文件夹的位置不会突然改变-这将使您的链接指向错误的位置,因此如果单击该链接将不起作用. 你要小心点!

编写链接时,应遵循一些最佳做法. 让我们现在来看这些.

在页面上抛出链接很容易. 这还不够. 我们需要使所有读者都可以访问我们的链接,无论他们当前的上下文以及他们喜欢哪种工具. 例如:

  • 屏幕阅读器用户喜欢在页面上的链接之间跳转,并从上下文中读取链接.
  • 搜索引擎使用链接文本为目标文件建立索引,因此在链接文本中包含关键字以有效描述要链接的内容是一个好主意.
  • 视觉阅读器浏览页面而不是阅读每个单词,他们的眼睛将被引人注意的页面特征(例如链接)吸引. 他们会发现描述性链接文本很有用.

让我们看一个具体的例子:

好的链接文字: Download Firefox

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

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

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

其他提示:

  • 不要在链接文本中重复显示URL — URL看起来很丑,当屏幕阅读器逐个字母地读出URL时,听起来甚至更丑.
  • 不要在链接文本中说"链接"或"链接到",这只是噪音. 屏幕阅读器告诉人们有一个链接. 可视用户也会知道有一个链接,因为链接通常使用不同的颜色设置样式并带有下划线(通常不应该破坏这种约定,因为用户已经习惯了.)
  • 保持链接标签尽可能短-长链接尤其会使烦恼必须阅读整个内容的屏幕阅读器用户.
  • 最小化将相同文本的多个副本链接到不同位置的实例. 这可能会给屏幕阅读器用户带来问题,他们经常会弹出上下文以外的链接列表-几个都标记为"单击此处","单击此处","单击此处"的链接会造成混乱.

从上面的描述中,您可能会认为始终使用绝对链接是一个好主意. 毕竟,像相对链接一样移动页面时它们不会中断. 但是,在链接到同一网站内的其他位置时,应尽可能使用相对链接(当链接到另一个网站时 ,您将需要使用绝对链接):

  • 首先,扫描代码要容易得多-相对URL通常比绝对URL短很多,这使读取代码容易得多.
  • 其次,尽可能使用相对URL更为有效. 当您使用绝对URL时,浏览器会首先在域名系统( DNS ;请参阅网络的工作方式以获取更多信息)上查找服务器的实际位置,然后转到该服务器并查找正在要求. 另一方面,使用相对URL,浏览器仅在同一服务器上查找正在请求的文件. 因此,如果您使用绝对URL,而相对URL会使用绝对URL,则您将不断使浏览器执行额外的工作,这意味着浏览器的效率会降低.

Linking to non-HTML resources — leave clear signposts

当链接到将要下载的资源(例如PDF或Word文档)或流式传输的资源(例如视频或音频)或具有另一种潜在的意外效果(打开弹出窗口或加载Flash电影)时,您应在减少任何混乱. 例如,这可能很烦人:

  • 如果您使用的是低带宽连接,请单击一个链接,然后意外启动多个兆字节的下载.
  • 如果尚未安装Flash Player,请单击一个链接,然后突然进入需要Flash的页面.

让我们看一些示例,看看这里可以使用哪种文本:

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

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

<p><a href="http://www.example.com/car-game">
  Play the car game (requires Flash)
</a></p>

Use the download attribute when linking to a download

当您链接到要下载而不是在浏览器中打开的资源时,可以使用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>

Active learning: creating a navigation menu

对于本练习,我们希望您将某些页面与导航菜单链接在一起,以创建一个多页面的网站. 这是创建网站的一种常见方式-每个页面都使用相同的页面结构,包括相同的导航菜单,因此,当单击链接时,它给人的印象是您停留在同一位置,并且内容不同长大.

您需要制作以下四个页面的本地副本,所有副本都位于同一目录中(有关完整的文件列表,另请参见navigation-menu-start目录):

你应该:

  1. 在页面上指示的位置添加无序列表,其中包含要链接到的页面的名称. 导航菜单通常只是链接列表,因此在语义上是可以的.
  2. 将每个页面名称变成指向该页面的链接.
  3. 将导航菜单复制到每个页面.
  4. 在每个页面上,仅删除指向同一页面的链接-页面包含指向其自身的链接会造成混乱且毫无意义,并且缺少链接可以很好地直观提醒您当前所处的页面.

完成的示例应该最终看起来像这样:

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

注意 :如果您卡住了,或者不确定是否正确,可以查看导航菜单标记的目录以查看正确的答案.

可以创建链接或按钮,这些链接或按钮在单击时会打开新的传出电子邮件,而不是链接到资源或页面. 这是使用<a>元素和mailto: URL方案完成的.

mailto:链接以其最基本和最常用的形式,仅表示目标收件人的电子邮件地址. 例如:

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

这将产生一个如下所示的链接: 无处发送电子邮件 .

实际上,电子邮件地址甚至是可选的. 如果您不进行设置(也就是说,您的href只是" mailto:"),则用户的邮件客户端(尚未指定目标地址)将打开一个新的外发电子邮件窗口. 这通常非常有用,因为用户可以单击"共享"链接以将电子邮件发送到他们选择的地址.

Specifying details

除了电子邮件地址,您还可以提供其他信息. 实际上,任何标准邮件标题字段都可以添加到您提供的mailto URL中. 其中最常用的是"主题"," cc"和"正文"(这不是真实的标题字段,但允许您为新电子邮件指定简短内容消息). 每个字段及其值都指定为查询项.

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

<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查询表示法.

以下是一些其他示例mailto URL:

Test your skills!

您已经到了本文的结尾,但是您还记得最重要的信息吗? 在继续之前,您可以找到一些进一步的测试来验证您是否保留了此信息—请参阅测试您的技能:链接 .

Summary

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

In this module