超链接

张访

超链接非常重要-它们使Web成为Web。本文介绍了建立链接所需的语法，并讨论了链接最佳实践。

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

什么是超链接？

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

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

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

链接剖析

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

这给我们以下结果：

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

添加带有标题属性的支持信息

您可能要添加到链接中的另一个属性是title。标题包含有关链接的其他信息，例如页面包含的信息类型或网站上应注意的事项。

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

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

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

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

使用本地代码编辑器和我们的入门模板创建HTML文档。

• 在HTML正文中，添加一个或多个段落或您已经知道的其他类型的内容。
• 将某些内容更改为链接。
• 包括标题属性。
  

块级链接

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

URL和路径快速入门

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

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

URL使用路径查找文件。路径指定您感兴趣的文件在文件系统中的位置。让我们来看一个目录结构的示例，请参见creation-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：
• 您将在网上遇到两个术语：绝对URL和相对URL：
  绝对URL：指向由其在网络上的绝对位置定义的位置，包括协议和域名。例如，如果某个index.html页面被上载到projects位于Web服务器根目录内的目录，并且该网站的域为https://www.example.com，则该页面将位于https://www.example.com/projects/index.html（甚至只是https://www.example.com/projects/，因为大多数Web服务器只是在寻找登录页面）例如index.html如果未在网址中指定则进行加载。）
  无论使用在哪里，绝对URL都始终指向相同的位置。
  relative 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。
  相对网址会根据您引用的文件的实际位置指向不同的位置-例如，如果我们将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文件而突然改变-这会使您的链接指向错误的位置，因此如果单击该链接将无法使用。你要小心点！
  
  

本帖寻求最佳方案

，目前已有 0 个回复 我要奖励