a 标签，不只是超链接

文章导读：旨在帮助初学者学习前端，包含入门、进阶、高级部分前端系列内容，公众号会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

今天来学习  a 标签，<a> 标签是超链接，用来跳转网页，但其实 <a> 标签的用法很多种，在网页中，可以充分利用 <a> 来达到我们想要的效果，今天就来看看它有那些隐藏用法。

<a> 是用于创建链接的 HTML 标签。<a> 标签可以用于连接到其他页面、下载文件、发送电子邮件等，它能够解决以下问题：

1.超链接：最常见的用法是创建超链接，将用户导航到其他网页。

<a href="https://www.example.com/">点击这里访问示例网站</a>

2.下载链接：通过添加 download 属性，可以指定链接为文件下载链接，使用户可以下载文件而不是打开链接。

<a href="example.pdf" download>点击这里下载示例文件</a>

3.锚点链接：通过设置 href 属性为页面内的元素 ID，可以创建页面内的锚点链接，方便用户快速跳转到页面的不同部分。

<a href="#section1">跳转到第一节</a>
<h2 id="section1">第一节标题</h2>

4.电子邮件链接：通过设置 href 属性为邮件地址，可以创建电子邮件链接，使用户可以点击链接发送邮件。

<a href="mailto:contact@example.com">联系我们</a>

5.JavaScript 操作：<a> 标签也可以用于在 JavaScript 中执行操作，例如、触发事件，此时 href 的值为 #

<a href="#" onclick="doSomething()">点击这里执行操作</a>

6.图片链接：<a> 标签可以用于将图片包裹在链接中，使用户可以通过点击图片跳转到其他页面。

<a href="https://www.example.com/">
  <img src="image.jpg" alt="图片链接">
</a>

合理使用 <a> 标签有助于提高网页的互动性和用户体验，同时也是构建复杂网页和导航系统的重要工具之一。在实际开发中，熟练运用 <a> 标签可以让网页变得更加功能丰富和便于用户使用。

除了前面提到的常见用法，还有一些其他的 <a> 标签用法:

1.目标窗口：通过添加 target 属性，可以控制链接在何处打开。常见的取值有 _blank（在新标签页打开）、_self（在当前标签页打开）等。

<a href="https://www.example.com/" target="_blank">在新标签页打开示例网站</a>

2.引用链接：通过添加 rel 属性，可以指定链接与当前文档的关系，例如 nofollow、noreferrer 等。

<a href="https://www.example.com/" rel="nofollow">这是一个 nofollow 链接</a>

3.外部链接图标：可以在外部链接后添加图标，以便用户清楚地知道该链接会在新窗口打开。

<a href="https://www.example.com/" target="_blank">示例网站 <i class="external-link-icon"></i></a>

4.按钮链接：将 <a> 标签用作按钮的样式，通过 CSS 样式调整使其看起来像按钮。

<a href="#" class="button">点击这里</a>

5.触发事件：在 <a> 标签中可以添加 onclick 属性，使其在点击时触发 JavaScript 事件或函数。

<a href="#" onclick="doSomething()">点击这里触发事件</a>

总的来说，<a> 标签非常灵活，可以通过添加不同的属性和样式，适应各种不同的需求和场景。在实际开发中，你可以根据具体情况灵活运用 <a> 标签的不同用法，以实现更多的交互效果和用户体验。同时，要注意遵循 HTML 标准，确保 <a> 标签的使用符合语义化和可访问性的要求。

这里解释下，上面的第3点中提到的nofollow、noreferrer分别是什么意思

在 <a> 标签中，rel 属性用于指定链接与当前文档的关系，这两个属性通常与rel属性一起使用。其中，nofollow 和 noreferrer 是两个常用的 rel 属性值：

1.nofollow：当链接使用了 rel="nofollow" 属性时，表示告知搜索引擎不要对该链接进行权重传递。这意味着搜索引擎不会将链接目标的页面排名受到当前页面的影响。通常，这种属性会用于防止垃圾信息（例如评论中的链接）对网站排名产生影响，从而减少垃圾信息的产生。

示例：

<a href="https://www.example.com/" rel="nofollow">这是一个 nofollow 链接</a>

2.noreferrer： 是另一个HTML属性，它的作用是告诉浏览器，在跟随链接时不要发送referer header（即不告诉目标网站你是从哪个页面链接过来的）。 这可以用于保护用户的隐私，因为referer header可以被用来追踪用户的浏览行为。 noreferrer 也有助于减少一些安全问题，比如在某些情况下，referer header可能会暴露敏感信息。

看到这里的朋友，可以回顾下，在平时的开发中你用到了哪几种呢，这里瑶琴补充下，<a> 标签作为「下载链接」时，后端给的接口为 「get 方式」，才能下载成功。

希望今天的内容对你有帮助，学习是一个持续的过程，不断学习和实践将使你逐渐成为一名出色的前端开发者。加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。