HTML a标签如何链接外部资源

写外部链接这件事，说大不大，说小也不小。很多开发者在日常写

href 必须带协议头，否则变成相对路径

浏览器判断 href 值的逻辑很简单：如果开头不是 http:// 或 https://，它就默认这是一个相对路径，在当前站点的目录下去找。比如你写成 href="www.example.com"，浏览器实际请求的是 https://your-site.com/www.example.com，结果自然是 404。这个问题在开发环境里偶尔能蒙混过关，但到了生产环境就是实打实的故障。

正确的做法只有两种：

• href="https://www.example.com"——推荐，现代网站基本都用 HTTPS，安全又省心。
• href="http://old-site.org"——仅限明确需要 HTTP 的旧系统，现在已经很少见了。

别想着偷懒省略协议。有人用 //www.example.com 这种“协议相对”写法，虽然以前能凑合，但现在不推荐了——尤其在混合内容（HTTPS 页面里加载 HTTP 资源）或者 PWA 场景下，很容易出奇怪的问题。

target="_blank" 不加 rel="noopener" 有安全风险

用 target="_blank" 打开外部链接时，新页面会继承原页面的 window.opener 引用。如果那个外部站点是恶意的，它可以通过 window.opener 访问你的页面、执行跳转甚至窃取敏感信息。这不是理论风险——早些年就有不少社交网站因此中招。

解决方案很简单：必须同时加上 rel="noopener"（推荐）或 rel="noreferrer"（更彻底，还会禁用 referrer）。

访问示例网站

漏掉 rel 属性是常见疏忽，尤其在复制粘贴已有代码时最容易踩坑。记住：凡是外部链接用了 target="_blank"，就顺手补上 rel="noopener"，形成肌肉记忆。

链接文本要可读、有意义，避免“点击这里”

屏幕阅读器和搜索引擎都依赖 标签内的文本来理解链接意图。写成 点击这里，对用户和 SEO 都没什么价值——用户不知道点了会去哪，搜索引擎也抓不到关联信息。

好的做法：

• 直接用目标内容描述链接：Python 官方文档
• 如果需要强调动作，带上宾语：查看 Linux 内核源码
• 如果链接里是个图片，必须加 alt 属性：

这条原则不仅关乎无障碍，也关乎用户的体验——没人愿意猜一个链接背后是什么。

不要用 Ja vaScript 伪造 a 标签行为

偶尔会看到有人写 链接，这种写法从根本上绕过了浏览器的默认链接语义。带来的后果很明确：

• 用户无法右键复制链接地址
• 键盘用户按 Enter 无法触发（除非额外加 tabindex 和事件绑定）
• 搜索引擎不将其识别为有效外链
• 不支持中键打开、拖拽到书签栏等原生行为

真要控制行为，也应该是用 作为基础再增强：...，而不是彻底抛弃 。保留 href 属性，让浏览器原生能力兜底，Ja vaScript 只做附加功能——这才是健壮的做法。