a标签跳转到另一个页面

还有几个值值得单独拎出来说。`href="#"`是空锚点，点了页面会跳到顶部，很多人拿它当占位符用。`href="javascript:void(0)"`更彻底，什么都不干，但搜索引擎和屏幕阅读器看到这个会皱眉。`href="mailto:someone@example.com"`会唤起邮件客户端，`href="tel:+8613800138000"`在手机上直接拨号。这些不是跳转到另一个页面，但都是a标签的合法用法，日常开发里出现频率不低。

真正跳转到另一个页面的时候，有个属性经常被忽略：target。

默认情况下，a标签在当前标签页打开链接。加上`target="_blank"`，浏览器会开一个新标签页。很多人喜欢这么干，觉得用户不会丢失当前页面。但这里有个坑。从Chrome 88开始，带`target="_blank"`的链接会自动获得`rel="noopener"`的行为，新页面没法通过`window.opener`反过来控制原页面。这个安全修复是好事，但如果你在旧代码里手动写了`rel="noopener"`，现在写不写效果一样。真正需要留意的是`rel="noreferrer"`，它会阻止浏览器发送Referer头，有些网站靠这个头做防盗链或者统计来源，加了这个属性，对方就看不到你从哪来的。

我见过一个真实案例。某电商网站的商品详情页里，所有外部链接都加了`target="_blank"`，但没加`rel="noopener"`。结果有个第三方页面被注入恶意脚本后，通过`window.opener`把原商品页的“立即购买”按钮改成了钓鱼链接。用户切回原标签页，看到按钮还在，点下去钱就没了。这个漏洞在2018年前后很常见，现在浏览器默认堵上了，但自己写代码时心里得有这根弦。

另一个容易踩的坑是嵌套。a标签里不能再放a标签。浏览器解析的时候会把嵌套的内层a标签拆出来，DOM结构变得跟你想的不一样。有人想在卡片链接里再放一个“详情”链接，结果两个链接的点击区域重叠，用户点哪都跳同一个地方。正确的做法是用JavaScript阻止事件冒泡，或者干脆别嵌套，用绝对定位把内层链接浮在上面。

写a标签的时候，href里填的URL最好别用中文。虽然现代浏览器会自动编码，但有些老旧的服务器或者代理会把它搞乱。用encodeURIComponent处理一下，或者干脆用英文路径，省心。

最后说个细节。a标签的默认样式是蓝色带下划线，`:visited`状态是紫色。这个紫色是浏览器隐私历史的一部分，JavaScript拿不到具体颜色值，只能通过CSS改。但改完之后，用户就分不清哪些点过了。有些设计师喜欢把visited状态去掉，让所有链接看起来一样。这算是一种取舍，没有绝对的对错。

一个标签，二十多年了，还在天天用。它简单，但简单的东西往往藏着最多细节。