超链接

约 615 字大约 2 分钟

布欧-Lewyon

2026-05-16

超链接是 Web 的"胶水"——它让页面之间关联起来，形成了互联的网络。

`<a>` 标签

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

`href` 属性：链接目标

<!-- 绝对 URL -->
<a href="https://www.google.com">Google</a>

<!-- 相对 URL -->
<a href="/about.html">关于我们</a>
<a href="pages/contact.html">联系我们</a>

<!-- 锚点（页面内） -->
<a href="#section2">跳转到第二节</a>

<!-- 锚点（其他页面） -->
<a href="about.html#team">查看团队</a>

<!-- 电子邮件 -->
<a href="mailto:info@example.com">发送邮件</a>

<!-- 电话 -->
<a href="tel:+8613800138000">拨打电话</a>

<!-- 下载 -->
<a href="files/document.pdf" download>下载文档</a>
<a href="files/report.pdf" download="年度报告.pdf">下载（指定文件名）</a>

`target` 属性：打开方式

值	行为
`_self`	当前窗口/标签页中打开（默认）
`_blank`	新窗口/标签页中打开
`_parent`	父框架中打开
`_top`	最顶层窗口中打开（跳出所有框架）

<a href="https://example.com" target="_blank" rel="noopener">新窗口打开</a>

⚠️ `rel="noopener"` 安全策略

使用 target="_blank" 时必须加 rel="noopener"：

<!-- ✅ 安全 -->
<a href="https://external-site.com" target="_blank" rel="noopener">外部链接</a>

<!-- 同时使用 noopener + noreferrer（彻底屏蔽来源） -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">
  外部链接（不传来源）
</a>

为什么？ 不加 noopener 时，新页面可以通过 window.opener 控制原页面（钓鱼攻击风险）。

`rel` 属性其他值

<!-- nofollow：告诉搜索引擎不要传递权重 -->
<a href="https://example.com" rel="nofollow">不要追踪此链接</a>

<!-- sponsored：付费/赞助链接 -->
<a href="https://sponsor.com" rel="sponsored">赞助商</a>

<!-- ugc：用户生成内容（如评论中的链接） -->
<a href="https://user-site.com" rel="ugc">用户链接</a>

图片链接

<a href="https://example.com">
  <img src="banner.jpg" alt="点击访问示例">
</a>

锚点导航

<!-- 目录 -->
<nav>
  <a href="#intro">简介</a>
  <a href="#features">特性</a>
  <a href="#pricing">价格</a>
</nav>

<!-- 目标位置 -->
<h2 id="intro">简介</h2>
<p>内容...</p>

<h2 id="features">特性</h2>
<p>内容...</p>

<h2 id="pricing">价格</h2>
<p>内容...</p>

<!-- 回到顶部 -->
<a href="#">返回顶部</a>

小结

属性	作用	必记
`href`	链接目标	URL / 锚点 / mailto / tel
`target="_blank"`	新窗口打开	⚠️ 必须配合 `rel="noopener"`
`download`	触发下载	可指定文件名
`rel`	链接关系	`noopener` / `nofollow` / `ugc`

上一节：路径与字符实体下一节：图片与响应式图片