Web 创建超链接

由 yzh277804528 创建,youj 最后一次修改 2017-05-15

超链接真的很重要 - 它们使Web成为一个Web。本文介绍了创建链接所需的语法,并讨论了链接最佳做法。


前提: 熟悉基本HTML,详情参阅 HTML入门。了解HTML 文本格式,详情参阅 HTML文本基础
目标: 学习如何实现一个有效的把多个文件链接在一起的超文本链接。

什么是超链接?

超链接是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>

以上代码结果如下:

I'm creating a link to
 the Mozilla homepage.

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

以上代码结果如下(当悬停在链接上时,标题将作为提示文本出现):

I'm creating a link to
 the Mozilla homepage.

主动学习:创建你自己的示例链接

主动学习时间:我们希望你使用本地代码编辑器创建一个HTML文档(我们的 getting started template就做的很好)。

  • 在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>
注意:你将在以后的文章中了解到更多有关在网络上使用图片的内容。

URLs与路径(path)快速入门

要快速地了解链接目标,你需要了解URLs和文件路径。在这一部分为你提供了你所需的信息。

一个URL,或统一资源定位器只是定义在网络上的位置的一个文本字符串。例如Mozilla的英文主页定位在https://www.mozilla.org/en-US/

URLs使用路径查找文件。路径指定文件系统中你感兴趣的文件所在的位置。看一下一个简单的目录结构的例子(参见 creating-hyperlinks 目录)。

此目录结构的根目录称为creation-hyperlinks。当在网站上工作时,你会有一个包含整个网站的目录。在根目录,我们有一个index.html和一个contacts.html文件。在真实的网站上,index.html将会成为我们的主页或登录页面。

我们的根目录还有两个目录:pdfsprojects。它们分别包含单个文件 — 一个 PDF (project-brief.pdf) 和一个index.html文件。请注意你可以有两个index.html文件在一个项目下的不同的系统文件位置。许多网站就是如此。第二个index.html或许是项目相关信息的主登录界面。

  • 相同目录:如果index.html(顶层的index.html)想要包含一个超链接(hyperlink)指向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的超链接,你需要进入project目录,然后指明要链接到的文件。通过指定目录的名称,然后是正斜杠,然后是文件的名称来完成。因此你要使用的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

文档碎片

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

你在网络上遇到的两个术语是绝对URT相对URL

绝对URL:指向由其在Web上的绝对位置定义的位置,包括协议域名。像下面的例子,如果将index.html页面上传到projects这一个目录,project位于web服务器的根目录,web站点的域名为http://www.example.com,那么这个页面可以通过http://www.example.com/projects/index.html访问(或者仅仅通过http://www.example.com/projects/来访问,因为大多数web服务器是通过查找像index.html这样的页面来加载,如果没有特定的URL的话)。

绝对URL总是指向相同的位置,不管它在哪里使用。

相对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目录移出来并进入Web站点的根目录(最高层级,而不是任何目录中),pdfs/project-brief.pdf的相对URL将会指向http://www.example.com/pdfs/project-brief.pdf,而不是http://www.example.com/projects/pdfs/project-brief.pdf

在编写链接时,有一些最佳做法。让我们来看看这些。

    用清晰的链接措辞

    在你的网页上放置链接很容易。但这还不够,我们需要让所有读者都可以访问我们的链接,无论他们当前所处的上下文以及他们喜欢用哪种工具。例如:

    • 屏幕阅读器用户喜欢在页面上从链接跳转到链接,并从上下文中读取链接。
    • 搜索引擎使用链接文本来索引目标文件,因此最好在链接文本中包含关键词,以有效地描述与之相关的信息。
    • 视觉读者浏览页面,而不是阅读每一个字,他们的眼睛会被页面突出的特征所吸引,比如链接。他们会发现描述性的链接文本很有用。

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

    链接文字: 下载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看起来很丑,当屏幕阅读器逐字读出时,声音甚至更难听。
    • 不要在链接文本中说“link”或“links to”——它只是噪音。屏幕阅读器告诉人们有一个链接。视觉用户也会知道有一个链接,因为链接通常是用不同的颜色设计的,并带有下划线(这个惯例一般不应该被打破,因为用户已经习惯了它。)
    • 保持你的链接标签尽可能短——长链接会特别烦扰屏幕阅读器用户,他们必须听到整件事读出来。
    • 最小化同一文本的多个副本链接到不同位置的实例。这可能会导致屏幕阅读器用户遇到问题,他们经常会脱离上下文提出链接列表——那些所有标记为“点击这里”,“点击这里”,“点击这里”的链接会令人产生困惑。

    尽可能使用相对链接

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

    • 首先,扫描代码要容易得多——相对URL通常比绝对URL短得多,这使得阅读代码更容易。
    • 其次,尽可能使用相对URL更有效。当使用绝对URL时,浏览器首先在域名服务器(使用“DNS”,查看网络是怎么工作的了解更多)上查找服务器的真实位置,然后再转到该服务器并查找所请求的文件。另一方面,使用相对URL,浏览器只在同一服务器上查找被请求的文件。因此,如果你使用绝对URL替代相对URL,则会不断地让你的浏览器做额外的工作,这意味着它的效率会降低。

    链接到非HTML资源 - 留下明确的路标

    当链接到一个要下载的资源(如PDF或Word文档)或流式传输(如视频或音频)或有另一种潜在的意外效果(打开一个弹出窗口或加载Flash电影)的资源时,你应该添加清晰的措辞减少任何混乱。下面就是一些很恼人的例子:

    • 如果你处在低带宽连接,点击一个链接,然后突然启动了多兆字节的下载。
    • 如果你没有安装Flash播放器,点击一个链接,然后突然被带到一个需要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/">
      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>

    链接到下载时使用download属性

    当链接到要下载的资源而不是在浏览器中打开时,可以使用 download 属性来提供一个默认的保存文件名。下面是一个下载链接到Firefox 39 Windows版本的示例:

    <a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
       download="firefox-39-installer.exe">
      Download Firefox 39 for Windows
    </a>

    主动学习:创建一个导航菜单

    对于此练习,我们希望你把一些页面和导航菜单链接起来,创建一个多页面的网站。这是创建网站的一种常见方式——在每个页面上使用相同的网页结构,包括相同的导航菜单,因此当点击链接时,它给人的印象是你停留在同一个地方,而不同的内容正在被提出来

    你需要在同一目录中创建以下四个页面的本地副本(请参阅navigation-menu-start目录获取完整的文件列表):

    你应该:

    1. 在一个页面上的指定位置添加一个无序列表,其中包含要链接到的页面的名称。导航菜单通常只是一个链接列表,因此这在语义上是可以的。
    2. 将每个页面名称转换为该页面的链接
    3. 将导航菜单复制到每个页面。
    4. 在每个页面上,只删除同一页面的链接——页面包含一个链接到自己的链接是令人困惑和毫无意义的,而缺少这个链接会对你当前的页面起到很好的视觉提示作用。

    最终的例子应该是这样的:

    注意:如果你卡住了,或者不确定自己是否正确,可以查看navigation-menu-marked-up目录,查看正确答案。

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

    在其最基本和最常用的形式中, mailto:link仅表示预期收件人的电子邮件地址。 例如:

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

    这会创建一个链接,看起来像这样:Send email to nowhere

    实际上,电子邮件地址甚至是可选的。如果你把它遗漏了(也就是说,你的 href只是简单的“mailto:”),一个新的发送电子邮件的窗口也会被用户的邮件客户端打开,只是没有收件人的地址信息这通常用作“共享”链接,用户可以单击该链接将电子邮件发送到他们选择的地址。

    指定详细信息

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

    下面是一个包含cc,bcc,主题和正文的示例:

    <a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
      Send mail with cc, bcc, subject and body
    </a>
    注意:每个字段的值必须是URL编码的,也就是使用非打印字符(不可见字符,如标签、回车符合分页符)和空格百分号编码。还要注意使用问号(?)将主URL与字段值分开,并用&符号来分隔mailto:URL中的每个字段。这是标准的URL查询符号。阅读The GET method了解什么URL查询符号是更常用的。

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

    总结

    就目前来说,以上是关于链接的介绍!当你在后面的课程中开始学习设置样式时,你将会需要回顾链接这一章节。接下来的HTML,我们将返回到文本语义,并看看一些你会觉得有用的更高级/不寻常的功能——你的下一站是“高级文本格式”。

    以上内容是否对您有帮助:
    二维码
    建议反馈
    二维码