什么是标签 <a>
官方定义是这样的:
The HTML
<a>element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
也就是 <a></a>， 我们需要关注的就是<a>中的属性，以及标签之间的内容（content）.
例子
我们先观察以下看起来没啥问题的例子：
1 | <p> |
探讨之前
在分析以上例子之前，我想先探讨一下我们的目的
前端的一个关键目的就是，尽可能满足不同用户的需求。这里的用户不光指人类，还包括各种搜索引擎，各种辅助设备（比如给视障人士的读屏器等）。
具体分析
那么我们试着从不同的“用户”角度来分析上面例子存在的问题
对于搜索引擎来说，会着重分析标签<a>中的content,也就是例子中的“点击链接”这个文本，很明显“点击链接”并没有包含对链接的描述，那么搜索引擎也就不明白这个链接的意义。
对于使用屏幕阅读器的用户来说，会偏向于在不看链接周围的上下文的情况下，在链接之间跳来跳去。也就是说，在大多数情况下，他们只关注标签<a>中的content，而忽略标签周围的上下文。在例子中，他们也很容易只看的到“点击链接”这个文本，不明白这个链接到底指向何处。
就算对于大多数正常使用浏览器的用户来说，人们也容易只被标签<a>中的内容吸引，而忽略上下文。
那么我们要注意的是：要尽量在标签content中放入有意义的关键字
第一次改善
1 | <p> |
改善之后，将关键字都放到了标签<a>之内，解决了上面提出来的问题，那么我们再继续分析剩下的问题
改善后的问题在于标签<a>中的内容太多，用户通过标签<a>已经知道这是一个链接，所以就不要再出现“链接”之类的关键字。用户也知道链接是用来点击的，所以也不需要“点击”这个关键字。总之，保持标签<a>中的关键字简洁是非常重要的。
第二次改善
1 | <p> |
如上的例子中，精简了content，只剩下了“销售报告”四个字，貌似非常完美了。但是，我们知道通过点击链接之后，可能打开一个新的页面直接查看报告，也有可能是开始下载报告，有各种各样的可能性。 所以，我们在关键字中不能忽略掉点击链接之后的行为描述，告诉用户点击这个链接之后会发生的动作。
第三次改善
1 | <p> |
改善后的链接已经相对不错了，但是还是存在问题。就是URL是绝对地址，我们应该将它改成相对地址
第四次改善
1 | <p> |
采用相对地址有如下好处：
- 代码更加容易阅读
- 相对地址更加高效，如果采用绝对地址，浏览器会去查找DNS服务器，然后产生了一系列不必要的流程消耗。
最后，让我们再针对下载的链接，做一次优化，那就是添加 download 属性。
第五次改善
1 | <p> |
在这里，download属性指定了下载时的默认文件名。
总结
综上所述，标签<a>的最佳实践要注意以下几点：
- 在标签
<a>的content中，写上清晰易懂的关键字描述 - 尽可能使用相对地址
- 对于点击链接后的动作，给出清晰的提示
- 对于下载链接，添加
download属性