给web开发的初学者们，浅显介绍下HTML最基础的元素<a>标签，以及<a>标签使用时经常遇到的问题！

<a>标签

首先，<a>标签是anchor的缩写。正确的描述应该是“锚标签”。它有两种使用形式：

  • 一种是配合name属性，作为一个“锚点”来使用。但现在已经废弃了。
  • 另一种是配合href属性，作为一个“超链接”来使用。从一个页面“链接”到另一个页面；从页面的某个部分（比如目录），跳转到另一个部分（比如正文中的某个章节）。这是目前主要使用的方式，也是后面主要说明的部分。

href超链接

我们先看下href这个属性。不意外的，它也是缩写，原词是Hypertext Reference（超文本引用）。

我们写文章的时候，都喜欢“引用”一些他人的文章，来旁证自己的观点。如果你阅读的是一些科学相关领域的书籍。你都会看到引用的段落结尾有个小记号①，然后在这一页的页尾会有一个“引用了某某作者某某文章”的说明。想象一下只有书本的时代，作者可能刚好手头有这本引用的作品。但阅读这篇文章的你呢？为了查这个引用，可能要到好几家图书馆检索这个文章的信息。而“超文本链接”就是可以把引用的相关内容，直接在文章里面标出。你点击了就可以跳转到引用的地址，减少了你再到搜索引擎上查找一遍的时间。相信这样解释一下，你至少知道了href这个属性为啥不太好用英语读出来，也不会将这个标签和src（来源）弄混了。

目前href属性主要用于引用以下几种：

  • <a href="#anchor"></a> 链接到文章中的一个锚点，旧标准中锚点一定是<a name="anchor"></a>定义的。但现在可以用任意的标签的id属性作为锚点了。
  • <a href="../"></a> 链接到相对于此页面的另一个页面地址。这种不带协议或者不是/开头的地址，都是相对于当前网页的“相对地址”。如果这个链接以/开头的话，就是基于这个网站根目录的绝对地址了。
  • <a href="mailto:xxx@mail.com"></a> 链接到某个邮箱的地址，这个协议大部分浏览器都支持并且会打开系统预设的邮件收发程序，你填写的邮箱地址xxx@mail.com会被自动添加到邮件的收件人列表中。
  • <a href="tel:136****1234"></a> 链接到指定电话号码，如果你是手机访问，点击这个链接会打开手机的“通话”界面，并且将你填写的手机号136****1234作为待拨打的电话号码输入。类似这样带协议的还有sms:发送短信；javascript:执行脚本代码等各种自定义的协议。

target目标

接着，我们经常使用的属性还有target，这个属性指定在哪里显示超链接里面的内容。取值可以以下几种可能：

  • _self 用当前页面显示超链接里面的内容；
  • _blank 在空白的新标签页（或窗口，取决于浏览器设置，下同）打开超链接里面的内容；
  • _parent 用当前页面的父框架显示超链接里面的内容，如果当前页面没有父框架，则等同于_self；
  • _top 用当前页面最顶级的框架显示超链接里面的内容，如果当前页面没有多级框架，则等同于_self；
  • 取值为某个存在的框架<frame>或者<iframe>容器的ID，则在这个框架里打开超链接里面的内容；
  • 取值为存在的标签页（或窗口）名称（通过window.open方法或者window.name属性设置），则直接在指定的标签页（或窗口）里打开超链接里面的内容；
  • 取值为不存在的名称时，将在空白的新标签页（或窗口）打开超链接里面的内容，并且用这个取值命名这个标签页（或窗口）。

其他属性

其他常用的属性还有：

  • download 点击链接时将链接目标视为下载链接进行下载。如果有取值，则将默认下载的文件的文件名为这个值。前提是这个下载的内容安全，且与当前页面同源。
  • referrerpolicy 链接跟踪策略，指定点击这个链接时，目标站点是否需要知道点击来源于当前页面。具体取值参考MDN文档中的相关说明。

样式问题

<a>标签在作为锚点使用时，默认是隐藏的。但是作为超链接使用时，会展示出4种状态：

  • :link 超链接未被访问前的样式。如果页面上没有将<a>标签作为锚点使用，则这个伪类可以忽略，直接对a标签设定样式即可。
  • :visited 超链接地址已经被访问过的样式。注意只要浏览器历史记录中有访问过目标地址，都会设定为这个样式，就算你之前不是通过当前页面访问到目标地址的。
  • :hover 鼠标悬停在链接上时的样式。鼠标悬停只会出现在PC端之类有鼠标指针的设备上。
  • :active 超链接被用户激活时的样式。这个状态如果你不太理解的话，可以试试不用鼠标，用键盘的Tab、Enter、方向键来控制这个网页。就会发现要“激活”这个超链接后按Enter键，才能访问这个超链接。

但是，在实际使用中，我们会发现定义这四个伪类时的顺序会导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。这里举几例子来说：

第一种情况：

1
2
3
a:visited { color: red; }
a:hover { color: green; }
a:link { color: blue; }

我们测试一个未访问的超链接和一个已访问的超链接的鼠标移入状态（下同）会发现：把鼠标放到未访问过的蓝色链接上时，它并不变成绿色，只有放在已访问的红色链接上，链接才会变绿。

改了下顺序，出现了第二种情况：

1
2
3
a:link { color: blue; }
a:visited { color: red; }
a:hover { color: green; }

这时，无论你鼠标经过的链接有没有被访问过，它都会变成绿色啦。

其实这个CSS问题早已有高人解释过了，总结就是一个“爱恨原则”（LoVe/HAte）巧妙的将四个伪类的首字母LVHA按顺序嵌入到爱恨两个单词中。也就是正确的顺序为：

a:link、a:visited、a:hover、a:active

所以：

  • 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种样式，后面的样式定义会覆盖前面的样式定义；
  • 鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种样式，后面的样式定义会覆盖前面的样式定义；

引用说明

本文部分段落节选自CSDN博主「IronLavender」的原创文章谈一谈a:link、a:visited、a:hover、a:active的正确使用顺序。由于原作是“自学前端”相关的分享，部分内容可能与实际情况不符，我这边略作修改和补充。