链接最佳实践编辑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目录以获取完整文件列表）：

• 的index.html
• projects.html
• pictures.html
• social.html

你应该：

1. 在一个页面上的指定位置添加无序列表，其中包含要链接到的页面的名称。导航菜单通常只是一个链接列表，所以这在语义上是可以的。
2. 将每个页面名称转换为该页面的链接。
3. 将导航菜单复制到每个页面。
4. 在每个页面上，只删除指向同一页面的链接 - 页面包含自身链接会让人感到困惑和毫无意义，缺少链接会对您当前所在的页面提供良好的视觉提醒。

完成的示例最终应该看起来像这样：

电子邮件链接编辑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>

以下是一些其他示例mailto网址：

• 邮寄地址：
• 邮寄地址：[email protected]
• 邮寄地址：无处@ mozilla.org，没有人@ mozilla.org
• 邮寄地址：[email protected] [email protected]
• 邮寄地址：[email protected] [email protected]&subject=This%20is%20the%20subject

摘要编辑Section

无论如何，这就是链接！当您开始查看样式时，您将在稍后返回链接。接下来是HTML，我们将返回文本语义，并查看一些您会发现有用的更高级/不寻常的功能 - 高级文本格式是您的下一站。