链接到页面区域：片段标识符
使用 id 属性和哈希链接跳转到页面中的不同区域。
链接到页面区域：片段标识符 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
什么是片段标识符？
片段标识符是网址中 # 符号后面的部分：
https://example.com/page#section-3
│
└─ Fragment: "section-3"
<!-- The browser: -->
<!-- 1. Loads the page -->
<!-- 2. Scrolls to the element with id="section-3" -->使用 id 创建锚点目标
要链接到某个部分，请为它指定一个 id：
<!-- The target: give any element an id -->
<h2 id="installation">Installation</h2>
<h2 id="configuration">Configuration</h2>
<h2 id="faq">Frequently Asked Questions</h2>
<!-- The link: use # + id value -->
<a href="#installation">Jump to Installation</a>
<a href="#faq">Go to FAQ</a>从另一个页面链接
您可以链接到另一个页面中的某个部分：
<!-- From a different page -->
<a href="/docs/guide#installation">Installation Guide</a>
<!-- Loads /docs/guide and scrolls to #installation -->
<!-- Absolute URL to a section -->
<a href="https://example.com/docs#api">API Documentation</a>id 命名规则
有效 id 值的规则：
- 在页面中必须唯一——不能有两个元素共享同一个 id
- 在 CSS 中不能以数字开头（但在 HTML 中有效）
- 不能包含空格——请使用连字符：
my-section - 区分大小写：
#FAQ和#faq是不同的值
目录模式
片段链接可以实现页面内目录：
<nav aria-label="Table of Contents">
<ol>
<li><a href="#intro">Introduction</a></li>
<li><a href="#setup">Setup</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#api">API Reference</a></li>
</ol>
</nav>
<h2 id="intro">Introduction</h2>
<h2 id="setup">Setup</h2>使用 CSS 平滑滚动
为片段导航添加平滑滚动行为：
/* Apply to the entire page */
html {
scroll-behavior: smooth;
}
/* Or for specific containers */
.scrollable {
scroll-behavior: smooth;
}固定页眉的滚动内边距
固定导航栏会遮挡滚动到的部分。请使用 scroll-margin-top 修复：
/* If you have a 60px fixed header */
:target {
scroll-margin-top: 70px;
}
/* Or set globally for all headings */
h2, h3, h4 {
scroll-margin-top: 70px;
}
/* scroll-margin-top offsets where the browser scrolls to */:target CSS 伪类
使用 :target 设置当前目标部分的样式：
/* Highlight the targeted section */
:target {
background-color: #fff3cd;
outline: 2px solid #ffc107;
padding: 1rem;
}
<!-- Result: when user clicks #installation, -->
<!-- the installation section gets highlighted -->返回顶部链接
一种常见模式——使用片段实现返回顶部链接：
<a href="#top" id="back-to-top">↑ Back to top</a>
<!-- Link to page top: either id="top" on body or use empty href # -->
<!-- Always give it meaningful text for accessibility -->
<!-- Position it fixed with CSS: -->
<!--
#back-to-top {
position: fixed;
bottom: 1rem;
right: 1rem;
}
-->片段与浏览器历史记录
片段导航会向浏览器历史记录添加条目：
- 点击片段链接会推入一条历史记录
- 浏览器的“后退”按钮会返回到之前的滚动位置
- 这是正常行为——单页应用可以使用 pushState 操作历史记录
命名锚点（旧版）
在使用 id 属性之前，锚点使用 <a name>——现在已经废弃：
<!-- Old way (do not use): -->
<a name="section-1"></a>
<h2>Section 1</h2>
<!-- Modern way: -->
<h2 id="section-1">Section 1</h2>
<!-- Use id on the target element, not a separate anchor tag -->快速检查
哪个 CSS 属性可以防止固定导航栏遮挡滚动到的部分？
回顾：片段标识符
片段链接要点：
- href 中的
#id会滚动到带有相应id的元素 - 每个目标元素都需要唯一的
id属性 - 既适用于同一页面，也适用于从其他页面访问
- 使用
scroll-behavior: smooth实现动画滚动 - 使用
scroll-margin-top避免固定页眉遮挡 - 使用
:target伪类突出显示当前部分
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 40
- 课程
- 159
常见问题解答
「链接到页面区域：片段标识符」课时是免费的吗？
是的 — 「链接到页面区域：片段标识符」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「链接到页面区域：片段标识符」这节课中我会学到什么？
使用 id 属性和哈希链接跳转到页面中的不同区域。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「链接到页面区域：片段标识符」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。