HTML目录锚点设置教程【入门】

HTML目录锚点设置看似简单，实则暗藏诸多易被忽视的关键细节：锚点ID必须严格遵循全小写、连字符分隔、不以数字开头、无空格/中文/标点的合法命名规则，并确保全页唯一；h2与h3标题需同步捕获并嵌套生成结构化目录，且每个标题必须自动生成或补全合规id；href链接必须与目标id完全一致（大小写、符号、空格零误差），推荐直接引用el.id避免拼写偏差；最后务必通过scroll-behavior: smooth启用平滑滚动提升体验。真正导致锚点失效的，往往不是语法错误，而是ID合法性、一致性与生成-引用链路间那微小却致命的脱节。

锚点 id 必须合法且唯一，否则跳转失效

浏览器只认 id 属性做锚点目标，但不是随便写个字符串就有效。常见失效原因：id 里含空格、中文、标点、开头是数字（如 id="1.简介"），或多个标题用了同一个 id（比如都叫 section）。结果是点击后不动、跳到第一个匹配项，或 CSS/JS 选择失败。

生成规则要手动盯住或用脚本强制处理：

• 全小写 + 连字符（-）替代空格和符号，例如“用户登录流程” → user-login-flow
• 避免以数字开头，id="2-intro" 改成 id="intro-2"
• 中文需转义或过滤，可用正则 .replace(/[^a-z0-9\u4e00-\u9fa5]+/gi, '-') 后再 trim 两端横线
• 同一页面内所有 id 值必须全局唯一，重复会导致 document.getElementById 和锚点跳转都只命中第一个

动态生成目录时，h2 和 h3 都得抓，不能漏

只选 h2 会丢掉二级标题，只选 h3 又没结构层级。实际目录需要体现“章-节”关系，所以必须同时处理两级标题，并在生成的