前端基础►HTML

前端基础-HTML超链接标签

每日的基础学习笔记，不求大而全，追求精致和短小，主要从底层技术基础开始，记录一些核心概念、实践应用和原理方法，帮助自己理解前端基础，建立前端知识体系。多问几个为什么、怎么做

什么是超链接?

通过它定位到互联网上的各个资源，如文本、文件、图像、声音等。

最佳实践？

用清晰的链接措辞

  • 使用屏幕阅读器的用户喜欢从页面上的一个链接跳到另一个链接，并且脱离上下文来阅读链接。
  • 搜索引擎使用链接文本为索引目标文件所以，在链接文本中包含关键词是一个很好的主意，以有效地描述与之相关的信息。
  • 读者往往会浏览页面而不是阅读每一个字，他们的眼睛会被页面的特征所吸引，比如链接。他们会找到描述性的链接。
  • 不要重复URL作为链接文本的一部分
  • 不要在链接文本中说“link”或“links to”——它只是噪音
  • 保持你的链接标签尽可能短
1
2
3
<p>
<a href="https://firefox.com/">Download Firefox</a>
</p>

尽可能使用相对链接

当链接到另一个网站时，需要使用绝对链接。

当链接到同一网站的其他位置时，需要使用相对链接。

理由是：

  1. 检查代码容易，因为相对链接相对绝对链接路径要短，阅读容易
  2. 提升效率。当使用绝对链接时，每点击一次要进行 DNS 查询服务器的真实位置，然后才转到服务
    器并查找所请求的文件，而相对避免了 DNS 查询

链接到非html资源 —— 留下清晰的指示

当链接到一个需要下载的资源（如PDF或Word文档）或流媒体（如视频或音频）或有另一个潜在的意想不到的效果（打开一个弹出窗口，或加载Flash电影），你应该添加明确的措辞，以减少任何混乱。如下的例子会让人反感：

  • 如果你是在低带宽连接，点击一个链接，然后就开始下载大文件。
  • 如果你没有安装Flash播放器，点击一个链接，然后突然被带到一个需要Flash的页面。

在下载链接时使用下载属性

1
2
3
4
<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>

无障碍建议

锚点标签常常通过将 href 属性设置为 “#” 或 “javascript:void(0)” 来创造一个能阻止页面刷新的伪按钮的方式被滥用。 这些属性值会在拖动 / 复制链接时导致意外行为，在新窗口 / 新标签打开链接，加入书签以及 JavaScript 仍在下载时会出现错误或被禁用。这也会向辅助技术（如屏幕阅读器）传达不正确的语义。在这些情况下，推荐使用 button 来代替。通常情况下，您应该只将锚点用于正常的 URL 导航。

参考