链接 - HTML 教程

讲解

<a>（anchor，锚）是互联网的基石——正是链接把孤立的文档织成了万维网。它最重要的属性是 href，值为目标地址。地址分几类：绝对地址（https://example.com/page.html，用于站外）；站内相对地址（about.html、../index.html，随当前页位置解析）；根相对地址（/docs/html，从站点根目录算起）；锚点地址（#section1，跳到本页 id 为 section1 的元素；page.html#top 则跳到指定页的锚点）。

两个常用行为属性：target="_blank" 让链接在新标签页打开——只要用它，就必须配上 rel="noopener"，否则新页面能通过 window.opener 反向操控原页面，这是真实存在的安全风险；download 让链接触发下载而非跳转，可选地指定保存的文件名。特殊的协议链接也很实用：mailto:hi@example.com 唤起邮件客户端，tel:+8613800000000 在手机上直接拨号。

链接文字本身的质量常被忽视。好的链接文字脱离上下文也能看懂目的地（「查看 2026 年招生简章」），坏的链接文字是「点击这里」「更多」——屏幕阅读器用户常用「列出本页所有链接」的方式浏览，一堆「点击这里」等于什么都没说。另外，HTML5 允许 <a> 包裹图片、卡片等块级内容，把整块区域变成可点链接，这正是商品卡片的标准做法。

示例

<!-- 站外链接：新窗口 + noopener -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN 文档</a>

<!-- 站内相对链接与根相对链接 -->
<a href="about.html">关于我们</a>
<a href="/docs/html/lists">列表章节</a>

<!-- 页内锚点：配合目标元素的 id -->
<a href="#comments">跳到评论区</a>
<section id="comments">……</section>

<!-- 下载与协议链接 -->
<a href="report.pdf" download="2026年报.pdf">下载年报</a>
<a href="mailto:hi@example.com">发邮件</a>
<a href="tel:+8613800000000">电话咨询</a>

<!-- 包裹块级内容的卡片链接 -->
<a href="/products/42">
  <img src="p42.png" alt="便携音箱" width="200" height="150" />
  <h3>便携音箱</h3>
  <p>¥199</p>
</a>

常见坑

target="_blank" 不加 rel="noopener"：新开的页面持有原页面的引用，可能被恶意站点利用钓鱼。这两个属性要成对出现。
链接文字写「点击这里」：无障碍和 SEO 双输。链接文字应能独立说明去向。
相对路径层级搞错：css/style.css 与 /css/style.css 完全不同——前者随当前页位置变，后者永远从根目录找。页面移动位置时前者容易 404。
用当按钮：触发动作（提交、弹窗）应该用 <button>，链接只用于「去某个地址」。没有 href 的 a 默认不可聚焦、不可键盘操作。

小结

a + href 构成链接，掌握绝对/相对/根相对/锚点四种地址写法；target="_blank" 必配 rel="noopener"；链接文字要能独立表意，动作用按钮、跳转用链接。下一章学习嵌入图片。