前端学习回顾-08

超链接

超链接使得互联网成为一个互联的网络。
超链接可以是文档链接到任何其他文档（或其他资源），可以链接到该文档的指定部分。
几乎任何网络内容都可以转换为链接，**点击（或激活）**链接将使浏览器转到另一个网址（URL，Uniform Resource Locator。统一资源定位符）。
注：URL可以指向HTML文件、文本文件、图像、文本文档、视频和音频文件以及在网络上保存的任何其他内容。如果浏览器不知道如果显示或处理文件，它会询问是否需要打开文件（需要选择合适的本地应用打开或处理文件）或下载文件（待之后处理）。

链接解析

通过使用 <a> 元素包裹文本或其他内容，并使用 href 属性（也称为 Hypertext Reference，或 target，包含web地址）创建一个基本链接。代码示例：

<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>
的超链接。
</p>

使用 title 属性添加支持信息

title 属性包含关于链接的附加信息，比如页面包含的信息的类型，或者该网站的使用注意事项。
当鼠标指针悬停在链接上时，title （标题）将作为提示信息你出现。代码示例：

<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/"
   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a>
的超链接。
</p>

注：链接的标题仅当鼠标悬停在其上时才会显示，这意味如果使用键盘进行导航网页将很难获取到标题信息。如果该标题信息对于页面非常重要，建议使用所有用户都能方便获取的方式来呈现，例如放在常规文本中。

块级链接

将一个块级元素转换为链接，例如将图像（块级元素）转换为链接，只需将图像元素作为 <a> 元素的元内容即可。代码示例：

<a href="https://www.mozilla.org/zh-CN/">
  <img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志">
</a>

统一资源定位符（URL）

统一资源定位符（Uniform Resource Locator，URL）是一个文本字符串，定义了某物在Web上的位置。例如，Mozilla 的英文主页位于 https://www.mozilla.org/en-US/。
URL 通过路径查找文件。

绝对URL（绝对链接）

绝对URL：指向由其在Web上的绝对位置定义的位置，包括 protocol（协议）和 domain name（域名）。例如，如果 index.html 页面上传至 web 服务站点根目录的子目录 —— projects 目录。假设 web 站点的域名为 http://www.example.com。如果想要访问 index.html 页面可以通过 http://www.example.com/projects/index.html (或者通过 http://www.example.com/projects/，在没有指定特定的 URL 的情况下，大多数 web 服务器会默认访问加载名为 index.html 的页面)。
绝对 URL 在任何地方使用，总是指向确定的相同位置。

相对URL（相对链接）

相对URL：指向与链接页面相关的位置。例如，假如 project-brief.pdf 位于 projects 目录的子目录 pdfs，从 index.html 访问 project-brief.pdf 文件需要通过相对路径 pdfs/project-brief.pdf（对应的绝对路径是 http://www.exampple.com/projects/pdfs/project-brief.pdf）。
由于相对路径取决于所在文件与目标文件的位置，一个的相对 URL 可能指向不同的文件。例如，如果将 index.html 文件移至 web 站点的根目录，此时，从 index.html 访问 project-brief.pdf 文件需要通过相对路径 /projects/pdfs/project-brief.pdf（对应的绝对路径亦是http://www.exampple.com/projects/pdfs/project-brief.pdf ）此时使用原相对路径 /pdfs/project-brief.pdf，对应的绝对路径是 http://www.example.com/pdfs/project-brief.pdf（注意 index.html 位置改变后，对应的绝对路径变化），此时浏览器将报错（无法访问到文件），这并不意味着 project-brief.pdf 文件已损坏，只是系统找不到同名文件造成的。

链接使用建议

使用清晰的链接措辞

（1）读者往往会浏览页面而不是阅读每一个字，他们往往会被页面的特征所吸引，比如链接。
（2）搜索引擎使用链接文本来索引目标文件，所以建议在链接文本中包含关键字，以有效地描述与之相关的信息。
（3）使用屏幕阅读器的用户通常喜欢从页面上的一个链接跳转到另一个链接，并且脱离上下文来阅读链接。
具体实例：

（4）不建议重复 URL 作为链接文本的一部分，URL 通常是一串不规律字符，不易查看且干扰屏幕阅读器的正常工作。
（5）不建议在连接文本中出现“链接”或“链接到”等相似词汇，一方面屏幕阅读器会告知用户这是个链接，另一方面链接样式通常不同于其他文本，并且存在下划线（这个惯例一般不应该被打破）。
（6）使链接文本尽可能短，长链接对使用屏幕阅读器的用户尤其不友好。

尽可能使用相对链接

当链接到一个网站时，需要使用绝对链接，但是当链接到同一网站的其他位置时，推荐使用相对链接。
（1）通常相对 URL 文本长度比绝对 URL 长度较短，这使得代码阅读以及检查代码更加便捷。
（2）当使用绝对 URL 时，浏览器首先通过 DNS（见万维网是如何工作的） 查找服务器的真实位置，然后再转到该服务器并查找所请求文件。当使用相对 URL 时，浏览器只在同一服务器上查找被请求文件。综上所述，非必要情况下，建议使用相对 URL，以避免浏览器做无用功，降低其效率。

链接到非 HTML 文件

当链接到一个需要下载的资源时（如 PDF 或 word 文档）或流媒体（如视频或音频）或有一个意想不到的效果（打开一个弹窗，或加载Flash电影），此时建议在链接文本中添加明确的提示，及以减少胡乱。代码示例：

<p>
    <a href="http://www.example.com/large-report.pdf"> 下载销售报告（PDF, 10MB）</a>
</p>

<p>
    <a href="http://www.example.com/video-stream/"> 观看视频（将在新标签页中播放, HD画质）
</a>
</p>

<p>
    <a href="http://www.example.com/car-game"> 进入汽车游戏（需要Flash插件）</a>
</p>

下载链接使用 download 属性

当链接指向需要下载的资源而不是需要在浏览器中打开的文件时，建议使用 <a> 标签的 download 属性为待下载的资源提供一个默认保存的文件名称（此属性仅适用于同源URL）。代码示例：

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64位）
</a>