HTML a 标签：用 a href 创建超链接

如何在 HTML 中创建链接

链接就是带有 href 属性的锚元素 <a>。href 是链接的去处；标签之间的内容是读者点击的部分。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

浏览器会把链接显示为蓝色带下划线，并把鼠标指针变成手形。最后一行说明了 href 为什么重要：没有它，<a> 就只是普通文字。它无法获得焦点，无法点击，也不会显示为链接样式。

绝对 URL 与相对 URL

href 的值决定链接去往哪里。主要的写法：

链接到其他网站时用绝对 URL，在自己网站内部用以根目录开头的路径（/about）：即使包含链接的页面被移到其他文件夹，它们依然有效。

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

最后一行是最常见的链接 bug。没有 https:// 时，浏览器会把 www.wikipedia.org 当作当前文件夹中的一个文件名。

电子邮件和电话链接有单独的页面：HTML 邮件链接。

链接到页面的某个部分

任何带有 id 的元素都可以作为目标。用 # 加上 id 链接到它，浏览器就会滚动到那里。点击预览中的链接试试：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

一些细节：

• id 必须完全一致，包括大小写。href="#FAQ" 找不到 id="faq"。
• href="#top" 和 href="#" 会滚动到页面顶部，即使没有元素的 id 是 top。
• :target 选择器可以为 URL 当前指向的部分设置样式。在真实页面上它会高亮显示；预览滚动时不会改变地址，所以这里看不到高亮。
• 要链接到另一个页面的某个部分，把井号加在那个页面的 URL 后面：<a href="/docs/html/table#caption">。

固定页头下的锚点链接

粘性或固定的页头会遮住你跳转到的那部分内容的顶部。在目标上设置 scroll-margin-top 可以为页头留出空间，scroll-behavior: smooth 则让跳转带有动画：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

删掉 scroll-margin-top 那一行，再点击 Two：标题会被藏在深色页头后面。

下载链接

download 属性让浏览器保存文件，而不是打开它。如果给它一个值，这个值就是建议的文件名：

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download 只对与页面同源（协议、主机和端口都相同）的文件以及 data: 和 blob: URL 有效。对于其他源的文件，哪怕是子域名，浏览器都会忽略它，像普通链接一样跳转到文件。服务器可以用 Content-Disposition: attachment 响应头强制下载任何文件。

有意义的链接文字

使用屏幕阅读器的用户常常逐个链接地浏览页面，只听到链接文字。“点击这里”和“阅读更多”对他们来说毫无信息。

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

title 属性会在鼠标悬停时显示提示，但在触摸屏上不会显示，大多数键盘用户也看不到，所以不要把任何重要的内容放在里面。

让整张卡片成为链接

<a> 可以包裹块级内容：标题、图片和段落可以合成一个链接。可点击的卡片就是这样做的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block 让整个盒子都可以点击，而不只是文字。卡片内容要保持简短，因为屏幕阅读器会把全部内容读作链接的名称。另外，永远不要在里面再放链接或按钮：交互元素不能嵌套在 <a> 中。

a 标签的其他属性

常见错误

• 外部 URL 没有写协议。 href="www.site.com" 是相对路径。请写上 https://。
• 用 <a href="#"> 执行 JavaScript 操作。 它会滚动到页面顶部，并在 URL 后加上 #。如果点击后并不跳转到任何地方，请使用 <button>。
• 链接里嵌套链接，或者链接里放按钮。两者都是无效的 HTML：第二个 <a> 会让解析器提前关闭第一个，而点击链接里的按钮时也没有明确的目标。
• 文件名中有空格。 href="my file.html" 通常能用，因为浏览器会对空格进行编码，但用 my-file.html 就完全不必考虑这个问题。
• 用“点击这里”作为链接文字。 请改为描述目标页面。
• id 的大小写不一致。 #Pricing 和 id="pricing" 是不同的。