链接与锚点

1. 超链接基础

<a href="https://example.com">访问示例网站</a>
<a href="mailto:contact@example.com">发送邮件</a>
<a href="tel:+861012345678">拨打电话</a>
<a href="document.pdf" download>下载文件</a>

1.1 target 属性

<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接</a>

安全提示：使用 target="_blank" 时务必添加 rel="noopener noreferrer"。

1.2 rel 属性

<a rel="noopener">无 opener</a>
<a rel="noreferrer">不发送 Referer</a>
<a rel="nofollow">不传递权重</a>
<a rel="ugc">用户生成内容</a>

2. 锚点与页面内导航

<h2 id="section1">第一节</h2>
<a href="#section1">跳转到第一节</a>

html {
  scroll-behavior: smooth;
}
[id] {
  scroll-margin-top: 80px;
}

3. 路径系统

<!-- 绝对路径 -->
<a href="https://example.com/page.html">完整 URL</a>
<a href="/about/index.html">根目录开始</a>

<!-- 相对路径 -->
<a href="page.html">同目录</a>
<a href="sub/page.html">子目录</a>
<a href="../page.html">父目录</a>

4. 链接可访问性

<!--  描述性链接文本 -->
<a href="report.pdf">查看2026年度报告</a>

<!-- 跳过导航链接 -->
<a href="#main-content" class="skip-link">跳到主要内容</a>