HTML 中 a 元素的 href 属性

HTML 中的 a 元素是用来创建超链接的，它允许用户从一个页面导航到另一个页面或相同页面的不同部分。a 的 href 属性（全称为 Hypertext Reference）是一个重要的属性，用于指定链接目标的 URL。没有 href 属性的 a 元素会被解释为占位符（也就是一个无效链接），通常被用来在页面内进行脚本触发或样式应用。

在 Web 开发中，链接的使用显而易见且多种多样，为了呈现一些常见的使用场合以及具体例子，我们需要深入探讨 href 属性的不同用途以及页面间链接如何被有效传达。

基础用法

一个最基本的链接通常会把用户导向一个特定的 URL，其写法如下：

<a href=`https://www.example.com`>访问 Example 网站</a>

以上代码中，href 指向的是 https://www.example.com，当用户点击链接时，浏览器会将用户导航到该 URL。

相对路径和绝对路径

在使用 a 元素时，href 属性可以采用绝对路径或相对路径：

• 绝对路径：

  <a href=`https://www.example.com/page.html`>访问页面</a>

• 相对路径：

  <a href=`/page.html`>访问页面</a>

绝对路径是完整的 URL，包含协议（如 https://），主机名以及路径。而相对路径是相对于当前页面的位置，由于其不包含完整的域名部分，所以在同一主机内页面间导航时更常见。

锚点链接

锚点链接允许用户导航到同一页面的某个特定部分。这种用法对于长页面或内容密集的页面非常有用。

<!-- 锚点定义 -->
<h2 id=`section1`>部分 1</h2>
<p>这里是部分 1 的内容。</p>

<!-- 链接到锚点 -->
<a href=`#section1`>跳到部分 1</a>

点击“跳到部分 1”的链接后，浏览器会将视图滚动到 id 为 section1 的元素位置。

邮件链接

当 href 属性的值是 mailto: 时，它可以生成一个用于发送邮件的链接，点击后会打开用户默认的邮件客户端：

<a href=`mailto:[e-mail]`>发送邮件到 [e-mail]</a>

点击这个链接后会弹出默认邮件客户端的窗口，其中收件人已被填充为 [e-mail]。

电话链接

类似于邮件链接，如果希望用户在移动设备上点击链接直接拨打电话，可用 tel: 协议：

<a href=`tel:[phone]`>拨打电话 [phone]</a>

在移动设备上点击这个链接会启动拨号应用并自动填充指定号码。

下载链接

通过设置 download 属性，链接还可以被用作下载特定文件，href 属性用于指向文件地址。download 属性可以指定文件名：

<a href=`example.pdf` download=`custom-filename.pdf`>下载 PDF</a>

点击此链接时，文件 example.pdf 将被下载，并被保存为 custom-filename.pdf。

跨站点链接

逻辑上，a 元素可以链接到任何合法的 URL，包括外部站点。跨站点链接需要注意同源策略，以及浏览器的安全策略。

<a href=`https://www.externalsite.com` target=`_blank`>访问外部网站</a>

这里的 target=_blank 会在新窗口或标签页打开该链接，有助于保持原页面可访问。

JavaScript 触发

有时我们需要一个链接触发 JavaScript 动作而不是导航页面。例如：

<a href=`javascript:void(0);` onclick=`alert('Hello, world!');`>点击我</a>

点击这里的链接不会导致页面跳转，而是执行 JavaScript 代码 alert('Hello, world!');。

Links and SEO

对 href 属性的合理使用有助于搜索引擎优化（SEO）。明确和准确的链接结构可以帮助搜索引擎理解页面内容和不同页面间的关系。

常见错误避免

• 误用相对路径可能会导致链接失效。相对路径是相对于当前文件路径，需确保路径和文件结构正确。
• 忘记添加协议部分，尤其是以 // 开头的 URL 可能导致意外结果。
• 在需要使锚点链接有效时忘记添加 id 或 name 属性。
• 不适当地使用 target=_blank 可能导致用户体验问题。
• 忘记 mailto: 前的冒号会使邮件链接失效。