创建超链接

超链接是非常重要的–正是它们造就了网络网。本文展示了创建链接所需的语法,并讨论了链接最佳实践。

先决条件:
基本的HTML熟悉性,如开始使用HTML。HTML文本格式,如HTML文本基础.
目标:
学习如何有效地实现超链接,并将多个文件链接在一起。
什么是超链接?
超链接是网络最令人兴奋的创新之一。它们从一开始就成为Web的一个特性,也是使Web成为Web的原因。一张网。超链接允许我们将文档链接到其他文档或资源,链接到文档的特定部分,或者使应用程序在一个Web地址上可用。几乎任何Web内容都可以转换为链接,因此当单击或以其他方式激活时,Web浏览器将转到另一个Web地址(URL).

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

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

一个环节的解剖
基本链接是通过包装文本或其他内容来创建的,请参见块级链接,在元素并使用href属性,也称为超文本引用,或目标,它包含网站地址。

我正在创建一个链接到<一个 href="Https://www.mozilla.org/en-US/">Mozilla主页

我正在创建一个链接到Mozilla主页.

使用title属性添加支持信息
您可能希望添加到链接中的另一个属性是标题。标题包含有关链接的其他信息,例如页面包含的信息类型,或网站上要注意的内容。

我正在创建一个链接到<一个 href="Https://www.mozilla.org/en-US/" 标题="找到更多关于Mozilla的使命和如何贡献的更多信息的最佳地方">Mozilla主页

我正在创建一个链接到Mozilla主页.

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

主动学习:创建自己的示例链接
使用本地代码编辑器和我们的入门模板.

在HTML正文中,添加一个或多个段落或您已经知道的其他类型的内容。
将一些内容转换为链接。
包括标题属性。
块级链接
如前所述,几乎任何内容都可以链接,甚至块级元素。如果有要生成链接的图像,请使用元素,并使用元素。

<一个 href=“Https://www.mozilla.org/en-US/”>
链接到Mozilla主页的Mozilla徽标
</一个>
注:您将在以后的文章中了解关于在Web上使用图像的更多信息。

关于URL和路径的快速入门
要完全理解链接目标,您需要了解URL和文件路径。本节为您提供了实现这一目标所需的信息。

URL或统一资源定位器(UniformResourceLocator)只是定义Web上某个位置的文本字符串。例如,Mozilla的英文主页位于Https://www.mozilla.org/en-US/.

URL使用路径查找文件。路径指定您感兴趣的文件位于文件系统中的位置。让我们看一个目录结构的示例,请参阅创建-超链接目录。

这个根部的目录结构称为创建-超链接。在本地使用网站时,您将有一个包含整个站点的目录。内部根部,我们有一个Index.html文件和Contacts.html。在真正的网站上,Index.html将是我们的主页或登陆页面(作为网站或网站的特定部分的入口点的网页)。

我们的根目录中也有两个目录-PDF和项目。这些文件中每个都有一个文件-一个PDF(Project-brief.pdf)和Index.html分别归档。请注意,您可以有两个Index.html一个项目中的文件,只要它们位于不同的文件系统位置。第二Index.html可能是项目相关信息的主要登陆页面。

同一目录*如果您想在其中包含一个超链接Index.html(最高层)Index.html)指向Contacts.html,您将指定要链接到的文件名,因为它与当前文件位于同一个目录中。您将使用的URL是Contacts.html:

想联系特定的工作人员吗?查找我们的详细信息<一个 href="Contacts.html">联系人页面

拜访我的<一个 href="项目/index.html">项目主页

链接到我的<一个 href="../pdfs/project-简要介绍">项目简介

文件片段
可以链接到HTML文档的特定部分,称为文档片段而不仅仅是文件的顶部。要做到这一点,您必须首先分配一个ID属性设置为要链接到的元素。链接到特定标题通常是有意义的,因此如下所示:

<氢 ID=“邮寄地址”>邮寄地址</氢>
然后链接到特定的ID,在URL末尾加上散列/磅符号(#),例如:

想给我们写封信吗?用我们的<一个 href="Contacts.html#邮件地址">邮寄地址

这个<一个 href="#邮寄地址">公司邮寄地址

绝对URL*指向由其在网络上的绝对位置定义的位置,包括协议和域名。例如,如果Index.html页被上载到一个名为项目位于根部,而网站的域是Https://www.example.com,该页可在Https://www.example.com/projects/index.html(甚至只是Https://www.example.com/projects/,因为大多数web服务器只需要查找一个登陆页面,例如Index.html如果它没有在URL中指定,则加载。)

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

相对URL*指向一个相对链接到您要链接的文件,更像我们在上一节中看到的内容。例如,如果我们希望从示例文件链接到Https://www.example.com/projects/index.html对于同一个目录中的PDF文件,URL只是文件名-Project-brief.pdf-不需要额外的资料。如果PDF在内部的子目录中可用项目叫PDF,相对的联系应该是PDF/项目-简要介绍(等效的绝对URL为Https://www.example.com/projects/pdfs/project-brief.pdf.)

相对URL将指向不同的位置,这取决于您所引用的文件的实际位置–例如,如果我们将Index.html从项目目录并进入根部在网站(顶级,而不是在任何目录中)中,PDF/项目-简要介绍它内部的相对URL链接现在指向位于Https://www.example.com/pdfs/project-brief.pdf,而不是位于Https://www.example.com/projects/pdfs/project-brief.pdf.

当然,Project-brief.pdf档案和PDF文件夹不会突然更改,因为您移动了Index.html文件-这将使您的链接指向错误的地方,所以它不会工作,如果点击。你得小心点!

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

使用明确的链接措辞
在您的页面上很容易抛出链接。这不够。我们需要建立联系可接近对于所有的读者来说,不管他们当前的上下文和他们喜欢的工具。例如:

屏幕阅读器用户喜欢在页面上从一个链接跳到另一个链接,然后从上下文中读取链接。
搜索引擎使用链接文本索引目标文件,因此在链接文本中包含关键字是一个好主意,以便有效地描述链接到的内容。
视觉阅读器浏览页面而不是阅读每一个单词,他们的眼睛会被吸引到突出的页面特征,如链接。他们会发现描述性链接文本很有用。
让我们看一个具体的例子:

好的链接文本: 下载Firefox

<一个 href="Https://firefox.com/">下载Firefox

<一个 href="Https://firefox.com/">点击这里

不要将URL作为链接文本的一部分重复–URL看起来很难看,当屏幕阅读器逐个读出来时,听起来甚至更丑。
不要在链接文本中说“链接”或“链接到”–这只是噪音。屏幕阅读器告诉人们有一个链接。视觉用户也会知道有链接,因为链接的样式通常是不同的颜色和下划线(这个约定一般不应该打破,因为用户已经习惯了)。
保持你的链接标签尽可能短-这是有帮助的,因为屏幕阅读器需要解释整个链接文本。
尽量减少同一文本的多个副本链接到不同位置的实例。这可能会给屏幕读取器用户带来问题,如果上下文之外的链接列表被标记为“单击此处”、“单击此处”、“单击此处”。
尽可能使用相对链接
从上面的描述中,您可能会认为一直使用绝对链接是个好主意,因为当页面像相对链接一样移动时,它们不会中断。但是,在链接到同一网站。当你链接到另一个网站时,你需要使用一个绝对链接。

首先,扫描代码更容易–相对URL通常比绝对URL短,这使得读取代码更加容易。
第二,在可能的情况下使用相对URL更有效。使用绝对URL时,浏览器首先查找域名系统上服务器的真实位置(dns),见网络是如何工作的以获取更多信息)。然后,它将转到该服务器,并找到所请求的文件。使用相对URL,浏览器只查找在同一服务器上请求的文件。如果您使用相对URL所能做到的绝对URL,您就会不断地让您的浏览器做额外的工作,这意味着它的执行效率会更低。
链接到非HTML资源-留下清晰的路标
当链接到将下载的资源(如PDF或Word文档)、流(如视频或音频)或具有另一种潜在的意外效果(打开弹出窗口或加载Flash电影)时,您应该添加明确的措辞以减少任何混淆。

例如:

如果您使用的是低带宽连接,请单击一个链接,然后意外地启动多兆字节的下载。
如果您没有安装FlashPlayer,单击一个链接,然后突然被带到一个需要Flash的页面。
让我们看一些例子,看看这里可以使用什么样的文本:

<一个 href="Https://www.example.com/large-report.pdf">下载销售报告(PDF,10 MB)

<一个 href="Https://www.example.com/video-stream/" 目标="空白">观看视频(视频流在单独的选项卡中打开,高清质量)

<一个 href="Https://www.example.com/car-game">玩汽车游戏(需要Flash)

<一个 href=“Https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US”
下载=“Firefox-latest-64bit-installer.exe”>下载最新的Windows火狐(64位)(英语,美国)</一个>
主动学习:创建导航菜单
对于这个练习,我们希望您将一些页面与导航菜单链接在一起,创建一个多页网站。这是创建网站的一种常见方式–在每个页面上使用相同的页面结构,包括相同的导航菜单,因此当单击链接时,会给人一种印象,即您停留在同一个位置,并且正在提出不同的内容。

您需要在相同的目录中创建以下四页的本地副本。有关完整的文件列表,请参见导航-菜单-开始目录:

Index.html
Projects.html
Pictures.html
Social.html
你应该:

在一个页面的指定位置添加一个无序列表,其中包含要链接到的页面的名称。导航菜单通常只是链接列表,所以这在语义上是可以的。
将每个页面名称更改为指向该页的链接。
将导航菜单复制到每个页面。
在每一页上,只删除指向同一页的链接–页面包含到自身的链接是令人困惑和不必要的。而且,缺少链接可以很好地直观地提醒您当前所在的页面。
完成的示例应该类似于下面的页面:

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

电子邮件链接
可以创建链接或按钮,当单击这些链接或按钮时,可以打开新的发送电子邮件消息,而不是链接到资源或页面。这是使用元素和邮件:URL方案

以其最基本和最常用的形式,邮件:链接仅指示预定收件人的电子邮件地址。例如:

<一个 href=“电子邮件:Anywhere@mozilla.org”>发电子邮件到任何地方</一个>
这将产生一个如下所示的链接:发电子邮件到任何地方.

事实上,电子邮件地址是可选的。如果你忽略了它和你的href简单地说是“mailto:”,一个新的发送电子邮件窗口将由用户的电子邮件客户端打开,没有目的地地址。这通常是有用的“共享”链接,用户可以点击发送电子邮件到他们选择的地址。

指定细节
除了电子邮件地址,您还可以提供其他信息。实际上,任何标准邮件头字段都可以添加到梅尔托你提供的URL。其中最常用的是“Subject”、“cc”和“body”(它不是真正的标题字段,但允许您为新邮件指定短内容消息)。每个字段及其值都指定为查询项。

下面是一个包含cc、bcc、Subject和body的示例:

<一个 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”>发送邮件与cc,密件,主题和身体</一个>
注:每个字段的值必须是URL编码的,即使用非打印字符(如制表符、回车和分页等不可见字符)和空格。%-逃脱。此外,注意问号的使用(?)将主URL从字段值中分离出来,并将符号(&)分隔为邮件:url.这是标准的URL查询符号。朗读GET方法若要了解更常用的URL查询表示法,请执行以下操作。

这里有一些其他的例子梅尔托网址:

邮件:
电子邮件:Anywhere@mozilla.org
Mailto:where@mozilla.org,任何人@mozilla.org
Mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
Mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject
测试你的技能!
您已经完成了本文的结尾,但是您还记得最重要的信息吗?在继续之前,您可以找到一些进一步的测试来验证是否保留了这些信息-测试你的技能:链接.

摘要
这是为链接,至少现在!当您开始查看链接样式时,您将返回到本课程后面的链接。接下来,我们将返回到文本语义,并查看一些您会发现有用的更高级/不寻常的特性–高级文本格式是您的下一站。

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页