链接最佳实践编辑Section
编写链接时需要遵循一些最佳实践。我们现在来看看这些。
使用明确的链接措辞Section
在您的页面上放置链接很容易。这还不够。我们需要让所有读者都可以访问我们的链接,无论他们当前的背景和他们喜欢哪些工具。例如:
- 屏幕阅读器用户喜欢从页面上的链接跳转到链接,以及读取脱离上下文的链接。
- 搜索引擎使用链接文本来索引目标文件,因此最好在链接文本中包含关键字以有效地描述链接的内容。
- 视觉读者浏览页面而不是阅读每个单词,他们的眼睛将被吸引到突出的页面特征,如链接。他们会发现描述性链接文本很有用。
我们来看一个具体的例子:
好的链接文字: 下载Firefox
<p><a href="https://firefox.com/"> Download Firefox </a></p>
坏链接文本: 点击这里下载火狐
<p><a href="https://firefox.com/"> Click here </a> to download Firefox</p>
其他提示:
- 不要重复URL作为链接文本的一部分 - URL看起来很丑,并且当屏幕阅读器逐字逐句地读出它们时听起来更加丑陋。
- 不要在链接文本中说“链接”或“链接到” - 这只是噪音。屏幕阅读器告诉人们有一个链接。视觉用户也会知道有一个链接,因为链接通常用不同的颜色设计并加下划线(这种约定通常不应该被破坏,因为用户习惯了它。)
- 保持您的链接标签尽可能短 - 长链接尤其烦恼屏幕阅读器用户,他们必须听到整个事情的读出。
- 最小化将同一文本的多个副本链接到不同位置的实例。这可能会给屏幕阅读器用户带来问题,他们经常会在上下文中显示链接列表 - 所有标记为“单击此处”,“单击此处”,“单击此处”的链接会令人困惑。
尽可能使用相对链接Section
从上面的描述中,您可能会认为一直使用绝对链接是个好主意; 毕竟,当页面像相对链接一样移动时,它们不会中断。但是,当链接到同一网站内的其他位置时,您应该尽可能使用相对链接(当链接到另一个网站时,您将需要使用绝对链接):
- 首先,扫描代码要容易得多 - 相对URL通常比绝对URL短很多,这使得阅读代码变得更加容易。
- 其次,尽可能使用相对URL更有效。当您使用绝对URL时,浏览器首先在域名系统上查找服务器的实际位置(DNS ;请参阅Web如何工作以获取更多信息),然后它转到该服务器并找到正在进行的文件请求。另一方面,使用相对URL,浏览器只在同一服务器上查找正在请求的文件。因此,如果您使用相对URL可以执行的绝对URL,则会不断地使您的浏览器执行额外的工作,这意味着它的执行效率会降低。
链接到非HTML资源 - 留下明确的路标Section
链接到将要下载的资源(如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/" 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>
链接到下载时使用download属性Section
当您链接到要下载而不是在浏览器中打开的资源时,可以使用该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>
主动学习:创建导航菜单编辑Section
在本练习中,我们希望您将一些页面与导航菜单链接在一起,以创建一个多页面网站。这是创建网站的一种常见方式 - 在每个页面上使用相同的页面结构,包括相同的导航菜单,因此当点击链接时,它会给人留下您留在同一个地方的印象,并且不同的内容是被抚养长大
您需要在同一目录中制作以下四个页面的本地副本(另请参阅navigation-menu-start目录以获取完整文件列表):
你应该:
- 在一个页面上的指定位置添加无序列表,其中包含要链接到的页面的名称。导航菜单通常只是一个链接列表,所以这在语义上是可以的。
- 将每个页面名称转换为该页面的链接。
- 将导航菜单复制到每个页面。
- 在每个页面上,只删除指向同一页面的链接 - 页面包含自身链接会让人感到困惑和毫无意义,缺少链接会对您当前所在的页面提供良好的视觉提醒。
完成的示例最终应该看起来像这样:
注意:如果您遇到困难,或者不确定您是否正确,可以查看导航菜单标记目录以查看正确答案。
电子邮件链接编辑Section
可以创建链接或按钮,单击这些链接或按钮可打开新的外发电子邮件消息,而不是链接到资源或页面。这是使用<a>
元素和mailto:
URL方案完成的。
在其最基本和最常用的形式中,mailto:
链接仅指示预期收件人的电子邮件地址。例如:
<a href="mailto:[email protected]">Send email to nowhere</a>
这会产生如下链接:向无处发送电子邮件。
实际上,电子邮件地址甚至是可选的。如果您将其遗漏(即,您href
只是“mailto:”),则用户的邮件客户端将打开一个新的外发电子邮件窗口,该客户端尚未指定目标地址。这通常用作“共享”链接,用户可以单击该链接将电子邮件发送到他们选择的地址。
指定详细信息Section
除了电子邮件地址,您还可以提供其他信息。实际上,任何标准邮件头字段都可以添加到mailto
您提供的URL中。最常用的是“subject”,“cc”和“body”(这不是真正的标题字段,但允许您为新电子邮件指定短内容消息)。每个字段及其值都指定为查询字词。
这是一个包含cc,bcc,主题和正文的示例:
<a href="mailto:[email protected]?cc[email protected]&bcc[email protected]&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
网址:
- 邮寄地址:
- 邮寄地址:[email protected]
- 邮寄地址:无处@ mozilla.org,没有人@ mozilla.org
- 邮寄地址:[email protected] [email protected]
- 邮寄地址:[email protected] [email protected]&subject=This%20is%20the%20subject
摘要编辑Section
无论如何,这就是链接!当您开始查看样式时,您将在稍后返回链接。接下来是HTML,我们将返回文本语义,并查看一些您会发现有用的更高级/不寻常的功能 - 高级文本格式是您的下一站。