26. 链接类型：内部、外部、锚点

本节目标：学会六种常见链接类型——内部链接、外部链接、锚点跳转、邮件链接、电话链接、下载链接。

链接不只是跳转到另一个网页。根据 href 的写法不同，它能做的事多着呢。

内部链接：站内的页面跳转

内部链接指向你网站内的其他页面。用相对路径就行。

<nav>
  <a href="index.html">首页</a>
  <a href="products.html">产品</a>
  <a href="about.html">关于</a>
  <a href="contact.html">联系</a>
</nav>

指向其他域名的链接。必须用完整 URL（绝对路径）。

<a href="https://developer.mozilla.org/zh-CN/">MDN 文档</a>

Important

外部链接加 target="_blank" rel="noopener noreferrer"，安全且不打断用户浏览。

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  访问外部网站
</a>

有时候你想跳转到同一页面的某个位置。先给目标位置加个 id，再用 #id 跳转。

<!-- 跳转目标 -->
<h2 id="chapter3">第三章</h2>

<!-- 跳转链接 -->
<a href="#chapter3">跳转到第三章</a>

点击”跳转到第三章”，页面就会滚动到 <h2 id="chapter3"> 所在的位置。

甚至可以跳转到其他页面的锚点：

<a href="about.html#team">查看团队介绍</a>

Tip

锚点跳转在长页面里特别实用——做个”回到顶部”链接，用户体验立刻提升。

<a href="#top">回到顶部</a>

用 mailto: 开头，点击后会打开系统的邮件客户端。

<a href="mailto:hello@example.com">发送邮件</a>

还可以预填主题、内容、抄送和密送：

<a href="mailto:hello@example.com?subject=咨询&body=您好，我想了解...">
  带主题的邮件链接
</a>

多个收件人用逗号分隔，抄送用 cc=，密送用 bcc=：

<a href="mailto:a@example.com,b@example.com?cc=boss@example.com&subject=会议通知">
  群发邮件
</a>

Note

邮件链接依赖用户的电脑上装有邮件客户端。如果没有，点击后可能没反应。

在手机上点击会直接拨打指定号码。

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

号码里不要有空格和横杠，用 +86 格式写国际区号。

默认情况下，浏览器会尝试打开能显示的文件（PDF、图片等）。加上 download 属性，浏览器就会下载它。

<a href="report.pdf" download>下载报告</a>

还可以指定下载后的文件名：

<a href="report.pdf" download="2026年度报告.pdf">下载报告</a>

Note

download 属性只在同源链接上有效。如果文件在别的域名下，浏览器会直接打开而不是下载。

有时候你只想占个位，点击后不跳转页面。常见写法：

<!-- 跳到页面顶部（很少这样用） -->
<a href="#">返回顶部</a>

<!-- 配合 JavaScript 使用，不做跳转 -->
<a href="javascript:void(0)">点击我（不跳转）</a>

Tip

现代更推荐用 <button> 代替空链接做交互按钮。语义更准确，键盘也能正常操作。

下节我们学习 rel 属性——控制链接和目标页面之间的关系。