PHP小码农

Appearance

href 属性 ​

href（Hypertext Reference）是 <a> 标签最核心的属性，指定链接指向的目标地址。href 支持多种 URL 格式，包括绝对路径、相对路径、锚链接以及各种协议（mailto、tel 等）。

前置知识

阅读本节前，建议先了解：a 标签基础

基础概念 ​

href 属性的值可以有多种形式：指向其他网站（绝对 URL）、指向同一网站内的页面（相对路径）、跳转到页面内的某个位置（锚链接），或触发特殊操作（如发送邮件、拨打电话）。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>href 属性示例</title>
</head>
<body>
  <!-- 绝对 URL -->
  <a href="https://www.example.com/page">外部链接</a>

  <!-- 相对路径 -->
  <a href="/about">关于页面</a>
  <a href="contact.html">联系页面</a>

  <!-- 锚链接 -->
  <a href="#section1">页面内跳转</a>

  <!-- 特殊协议 -->
  <a href="mailto:info@example.com">发送邮件</a>
  <a href="tel:+861012345678">拨打电话</a>
</body>
</html>

详细说明 ​

绝对 URL ​

绝对 URL 包含完整的协议、域名和路径：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>绝对 URL</title>
</head>
<body>
  <h2>完整的绝对 URL</h2>
  <a href="https://www.example.com/index.html">完整路径</a>

  <h2>省略协议（浏览器会自动添加当前页面的协议）</h2>
  <a href="//www.example.com/index.html">协议相对 URL</a>

  <h2>HTTPS 链接</h2>
  <a href="https://secure.example.com">安全链接</a>
</body>
</html>

相对路径 ​

相对路径相对于当前页面的位置：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>相对路径</title>
</head>
<body>
  <!-- 同目录下的文件 -->
  <a href="about.html">关于页面</a>

  <!-- 子目录下的文件 -->
  <a href="pages/contact.html">联系页面</a>

  <!-- 上级目录 -->
  <a href="../index.html">上级目录</a>

  <!-- 网站根目录 -->
  <a href="/images/logo.png">根目录下的图片</a>

  <!-- 当前页面 -->
  <a href="./">当前页面</a>
</body>
</html>

相对路径对照表 ​

路径写法含义示例
file.html当前目录当前页面同目录下的 file.html
dir/file.html子目录当前目录下 dir 目录中的 file.html
../file.html上级目录上一级目录中的 file.html
../../file.html上上级目录上两级目录中的 file.html
/file.html根目录网站根目录下的 file.html
./当前目录当前目录（通常等于当前页面）

锚链接 ​

锚链接以 # 开头，用于跳转到当前页面的特定位置：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>锚链接</title>
</head>
<body>
  <!-- 目录导航 -->
  <nav>
    <a href="#introduction">引言</a>
    <a href="#content">正文</a>
    <a href="#conclusion">结论</a>
  </nav>

  <!-- 目标锚点 -->
  <h2 id="introduction">引言</h2>
  <p>引言内容。</p>

  <h2 id="content">正文</h2>
  <p>正文内容。</p>

  <h2 id="conclusion">结论</h2>
  <p>结论内容。</p>

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

特殊协议 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>特殊协议</title>
</head>
<body>
  <!-- 邮件链接 -->
  <a href="mailto:info@example.com">发送邮件</a>

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

  <!-- 短信链接 -->
  <a href="sms:+861012345678">发送短信</a>

  <!-- JavaScript 链接（不推荐） -->
  <!-- <a href="javascript:void(0)">执行 JavaScript</a> -->

  <!-- 空链接（不推荐） -->
  <!-- <a href="#">空链接</a> -->

  <!-- 下载文件 -->
  <a href="/files/document.pdf" download>下载文档</a>
</body>
</html>

href="#" 的问题 ​

html
<!-- 不推荐：href="#" 会跳到页面顶部并改变 URL -->
<a href="#">链接</a>

<!-- 推荐：移除 href 或使用 hreflang -->
<a>链接</a>
<!-- 或使用 JavaScript 事件 -->
<a href="javascript:void(0)">链接</a>

实战示例 ​

面包屑导航 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>面包屑导航</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    .breadcrumb { list-style: none; padding: 0; display: flex; gap: 0.25rem; }
    .breadcrumb li::after { content: " > "; color: #999; }
    .breadcrumb li:last-child::after { content: ""; }
    .breadcrumb a { color: #1565c0; text-decoration: none; }
    .breadcrumb a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <ul class="breadcrumb">
    <li><a href="/">首页</a></li>
    <li><a href="/docs">文档</a></li>
    <li><a href="/docs/html">HTML</a></li>
    <li>href 属性</li>
  </ul>
</body>
</html>

注意事项 ​

  • 相对路径以当前页面为基准，移动文件后链接可能失效
  • 协议相对 URL（//）在本地文件中不工作
  • href="#" 会改变 URL 并滚动到顶部，尽量避免使用

最佳实践 ​

  1. 内部链接用相对路径：便于网站迁移和维护
  2. 外部链接用绝对 URL：确保链接正确
  3. 使用语义化路径：URL 路径应简洁有意义
  4. 避免 javascript: 协议：使用事件监听器替代

下一节

继续学习：target 与 download

参考链接 ​