标签-a-最佳实践

什么是标签官方定义是这样的：HTML元素（或锚元素）创建指向其他网页、文件、同一页面内的位置、电子邮件的超链接地址，或任何其他URL。即，我们需要注意的是中的属性，以及标签之间的内容。比如我们观察下面的好像没问题Example:

点击链接下载thesalesreport

讨论之前在分析上面的例子之前，我想先讨论一下我们的目的。前端的一个关键目的就是尽可能满足不同用户的需求。这里的用户不仅仅指人类，还包括各种搜索引擎和各种辅助设备（如视障人士的屏幕阅读器等）。具体分析，我们试着从不同的“用户”角度来分析上面例子中的问题。对于搜索引擎来说，他们会重点分析标签中的内容，也就是例1中的“clickthelink”的文字。而显然“clickthelink”不包含对链接的描述，那么搜索引擎不会理解链接的含义。对于使用屏幕阅读器的用户，有一种在链接之间跳转而看不到周围上下文的倾向。也就是说，在大多数情况下，他们只关注标签中的内容，而忽略标签周围的上下文。在示例1中，他们很容易只看到文本“单击链接”，但不理解链接指向何处。即使对于大多数正常使用浏览器的用户来说，人们也很容易只被标签中的内容所吸引而忽略上下文。所以我们要注意的是：尽量在标签的内容中放入有意义的关键词。

点击链接下载销售报告

改进后，将关键字放在标签并解决了上面提出的问题，接下来我们继续分析剩下的问题。改进后的问题在于标签中的内容过多，用户已经通过标签知道这是一个链接，所以不要再出现“link”等关键词。用户也知道链接是用来点击的，所以不需要关键字“点击”。总之，保持标签中的关键字简洁非常重要。第二次改进

销售报告

上面的例子中，内容进行了简化，只留下“销售报告”四个字写了下来，看起来很完美。但是我们知道，点击链接后，可能会打开一个新的页面直接查看报告，也可能会开始下载报告。有多种可能性。因此，我们不能忽略关键词中点击链接后的行为描述，告诉用户点击链接后会发生什么。第三次改进

下载销售报告

改进的链接比较好，但是还是有问题。也就是说，URL是绝对地址，我们要把它改成相对地址。第四个改进

下载销售报表

相对地址有以下优点：代码更易读，相对地址效率更高.如果使用绝对地址，浏览器会搜索DNS服务器，会产生一系列不必要的进程消耗。最后我们再对下载链接做一个优化，就是增加download属性。改进五

下载销售报告

这里的download属性指定了下载时的默认文件名。总结综上所述，标签的最佳实践应该注意以下几点：在标签的内容中，写上清晰易懂的关键字描述尽可能使用相对地址对于点击链接后的动作，明确提示下载链接，添加download属性（PS：download属性浏览器支持不广泛，慎用）参考HTML元素referencCreatinghyperlinksauthor'sblog