需结合语义化标签、锚点链接与JavaScript构建索引系统：一、用section与h2–h6建立结构；二、手动生成静态索引列表；三、用details/summary实现可折叠多级索引；四、JavaScript动态生成并高亮当前章节；五、用scroll-margin-top优化锚点定位。
如果您希望在HTML5文档中实现带索引的导航结构，使用户能够快速定位到特定内容，则需要通过语义化标签、锚点链接与JavaScript辅助功能相结合的方式构建索引系统。以下是实现该目标的具体方法：
一、使用section与h2至h6构建语义化文档结构
HTML5支持通过嵌套的标题层级自动形成逻辑大纲，浏览器和辅助技术可据此生成结构化索引。合理使用section、article等区块元素配合标题标签，是生成可访问索引的基础。
1、为每个主要章节包裹<section></section>标签，并确保每个section内至少包含一个h2或更高级别标题。
2、在section内部使用h3、h4等子标题表示层级关系，避免跳级（如从h2直接到h4）。
立即学习“前端免费学习笔记（深入）”；
3、为每个标题添加id属性，例如<h2 id="introduction">引言</h2>，以便后续创建锚点链接。
二、手动生成静态索引列表并关联锚点
静态索引通过手动编写无序列表并指向各章节id，是最轻量、兼容性最强的实现方式，无需脚本即可运行。
1、在文档顶部或侧边栏插入一个<nav>区块，内部使用<ul>定义索引项。
2、为每个<li>添加指向对应标题id的链接，例如<a href="#introduction">引言</a>。
3、确保所有索引项文字与对应标题文本严格一致，避免拼写差异导致定位失败。
三、利用details与summary实现可折叠多级索引
HTML5原生支持details元素，可用于构建交互式、节省空间的嵌套索引，特别适合长文档的二级或三级目录展示。
1、用<details>包裹一级索引项，其子元素<summary>显示主标题名称。
2、在<details>内部嵌套另一个<ul>，其中每个<li>链接至子章节id。
3、对含多个子节的主章节重复使用<details>，注意嵌套深度不宜超过三层，否则影响可操作性。
四、通过JavaScript动态生成索引并高亮当前定位
动态索引能自动扫描文档标题、提取文本与id、生成完整目录，并在滚动时实时高亮当前可见章节，提升用户体验。
1、在页面底部引入脚本，使用document.querySelectorAll('h2, h3, h4')获取全部标题节点。
2、遍历结果，为每个标题提取textContent与id，构造<a>链接并追加至预设的索引容器中。
3、绑定scroll事件监听器，计算视口内各section的垂直位置，当某标题顶部距视口顶部小于100px时，为其索引项添加active类。
五、启用scroll-margin-top优化锚点定位精度
点击索引链接跳转后，标题可能被固定头部遮挡。CSS的scroll-margin-top属性可为锚点目标预留上边距，确保内容完整可见。
1、为目标标题选择器（如h2, h3）设置scroll-margin-top值，例如scroll-margin-top: 80px;。
2、该值应等于页面顶部固定导航栏的高度，若导航栏高度动态变化，需配合JavaScript重设该样式。
3、检查浏览器兼容性，Safari 15.4+及Chrome 99+原生支持，旧版需回退至JavaScript滚动偏移方案。
