如何在HTML里创建指向外部资源的 a 标签链接
作者：袖梨
2026-06-17
外部链接必须带协议头、加 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>。
