如何在HTML里创建指向外部资源的 a 标签链接

外部链接必须带协议头、加 rel="noopener"、使用有意义文本、保留 a 标签语义：href 需以 http:// 或 https:// 开头；target="_blank" 必须配 rel="noopener"；链接文本应描述目标内容；禁止用 JavaScript 伪造链接行为。

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 虽然能“协议相对”，但已不推荐，尤其在混合内容或 PWA 场景下容易出问题。

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

用 target="_blank" 打开外部链接时，新页面会继承原页面的 window.opener 引用。恶意站点可通过它访问你的页面、执行跳转甚至窃取敏感信息。

立即学习“前端免费学习笔记（深入）”；

必须同时加上 rel="noopener"（推荐）或 rel="noreferrer"（更彻底，还会禁用 referrer）：

<a href="https://example.com" target="_blank" rel="noopener">访问示例网站</a>

漏掉 rel 属性是常见疏忽，尤其在复制粘贴代码时。

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

屏幕阅读器和搜索引擎都依赖 <a> 标签内的文本理解链接意图。写成 <a href="https://docs.python.org">点击这里</a> 对用户和 SEO 都没价值。

好做法：

• 用目标内容描述链接： <a href="https://docs.python.org">Python 官方文档</a>
• 若需强调动作，带上宾语： <a href="https://github.com/torvalds/linux">查看 Linux 内核源码</a>
• 图片链接必须加 alt： <a href="https://example.com"><img src="logo.png" alt="Example 公司官网"></a>

不要用 JavaScript 伪造 a 标签行为

看到有人写 <span onclick="window.open('https://...')">链接</span>，这是错的。它绕过了浏览器默认的链接语义，导致：

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

真要控制行为，也该用 <a> 为基础再增强：<a href="https://..." onclick="trackClick(); return true;">...，而不是抛弃 <a>。

外部链接看着简单，但协议头、安全属性、可访问性和语义完整性这四点，任一缺失都会在真实场景中暴露问题——尤其是上线后被审计或被辅助工具检测时。