正在加载...

HTML 书签

上一课 Link Titles & Targets 改变的是链接如何打开。书签（片段链接）改变的是你落在页面何处。长课文、常见问题与文档常常需要跳到「定价」「FAQ」或「回到顶部」，而不必加载一份全新文档。这种写法把目标上的唯一 id 与以 # 开头的 href 配对使用。

什么是页内书签

片段标识符是 URL 中 # 之后的部分。在 HTML 里，你给元素设置 id 来创建落点。随后，任何 href 为 #that-id 的链接都会让浏览器滚动到该页上第一个匹配的 id（若你在 # 前写了路径，则滚动到该页面上的匹配 id）。

直接答案

  1. 给目标加上 id，例如 <h2 id="pricing">。
  2. 用 href="#pricing" 建立链接。
    # 的意思是「找到这个 id」。同一页面上的 id 必须唯一。优先使用不含空格的短名称：用 pricing，不要用 Our Pricing!!。

同页目录

长页面顶部的迷你导航是经典入门示例：上方是片段链接，下方标题带有匹配的 id，再加上返回链接。

页内书签

html
HTML Code 
<nav>
<a href="#intro">Intro</a> |
<a href="#pricing">Pricing</a>
</nav>

<h2 id="intro">Intro</h2>
<p>Welcome to the guide.</p>

<h2 id="pricing">Pricing</h2>
<p>Simple plans for learners.</p>

<p><a href="#intro">Back to intro</a></p>

阅读同页示例

  • #intro 与 #pricing 是片段链接，不是单独的文件
  • 每个标题的 id 必须与 # 后的片段一致
  • 导航可以放在任何位置；长内容常见顶部目录
  • 「Back to intro」说明书签在同一文档中既可以向下也可以向上跳转

链接到另一页面的某个部分

你可以把相对（或绝对）路径与片段组合起来。浏览器先加载该页，若 id 存在再跳转到该处。

路径加片段

html
HTML Code 
<p>
<a href="guide.html#pricing">Open pricing in the guide</a>
</p>

何时使用 path#id

  • 同页跳转：只用 #pricing 就够了
  • 项目中的另一份 HTML：guide.html#pricing
  • 你信任的外部文档：当该站点公开稳定 id 时，可用以 #section-name 结尾的完整 URL
    若目标页缺少该 id，浏览器通常从页面顶部打开，并忽略未知片段。

id 命名习惯

  • 每页一个 id 值——绝不要重复
  • 尽可能以字母开头；避免空格与怪异标点
  • 多词名称用连字符：getting-started
  • 若其他页面会深链到这些 id，请保持名称稳定
    id 面向机器与 URL；可见的标题文字可以保持易读，并与 id 字符串不同。

书签与浏览器「书签」

人们也用「书签」表示把页面存进浏览器收藏夹。本课指的是页内片段链接。浏览器收藏夹使用文档 URL（若你复制了片段，有时也会带上片段）。同一词语，日常用途不同——教别人时请把 HTML 含义说清楚。

无障碍与体验要点

当目标是真正的地标（标题、区块）时，跳转链接能帮助键盘与屏幕阅读器用户浏览长页面。不要滥加大量空 id。跳转后确保目标可见——之后学 CSS 时，粘性页眉可能盖住标题；眼下先确认正确章节已经出现。

在编辑器中练习

  1. 创建两个带有不同 id 值的标题。
  2. 在它们上方添加使用 href="#…" 的片段链接。
  3. 点击每个链接，确认页面跳到匹配的标题。
  4. 添加「回到顶部」链接，指向第一个标题上的 id 或顶部地标。
  5. 从第二个文件用 other.html#intro 链接，确认跨页跳转。
  6. 临时重复一个 id，观察混乱，再修复唯一性。

常见错误

  • 在同一页面上两次使用相同的 id
  • 忘记在 href 中写 #，导致浏览器去找文件名
  • 在 id 中放入空格或怪异符号
  • 链接到不存在的 id
  • 把片段书签与 target="_blank" 混淆（职责不同）
  • 指望仅凭 #pricing、不写路径就能打开另一个文件

小结

  • 同页书签使用 id 加上 href="#id"
  • id 必须唯一、简短且不含空格
  • 非常适合长页面与迷你目录
  • 用 page.html#id 跳入另一页的某个部分
  • 缺失的片段通常静默失败——你停留在页面顶部

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
6
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程