现代HTML书签用id配合href="#id"实现，name已废弃；需确保id唯一、href带#、id值规范；加html{scroll-behavior:smooth}启用平滑滚动；用:p:target高亮目标元素；设scroll-margin-top避免固定导航遮挡。
书签标记不是用 <a name>，而是用 id 配合 <a href="#xxx">
老式写法 <a name="section1"> 已被废弃，现代 HTML 只认元素的 id 属性作为锚点目标。浏览器滚动到该元素位置，靠的是 href 指向对应 id 值。
常见错误是给段落加了 name 却没加 id，或者 href 里漏掉 #（比如写成 href="section1" 而不是 href="#section1"），结果点击无反应。
- 段落本身用
<p id="intro">...或<h2 id="summary">...标记锚点位置 - 导航链接写成
<a href="#intro">引言</a>，必须带# -
id值不能含空格、中文或特殊符号（如id="第1节"会失效），推荐用英文小写+短横线，如id="chapter-one"
让书签跳转更平滑：加一行 scroll-behavior: smooth
默认跳转是生硬“瞬移”，用户体验差。CSS 中全局启用平滑滚动只需一句：
html { scroll-behavior: smooth; }
注意：scroll-behavior 必须作用在 html 元素上，写在 body 或某个 div 上无效。它对所有原生锚点跳转都生效，包括浏览器地址栏直接输入 #xxx。
立即学习“前端免费学习笔记（深入）”；
- 兼容性没问题：Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+ 均支持
- 不建议用 JavaScript 模拟平滑滚动（如
element.scrollIntoView({ behavior: 'smooth' })），除非要控制偏移量或回调 - 如果页面已有自定义滚动逻辑（比如单页应用路由），可能和该 CSS 冲突，需测试
想加视觉反馈？用 :target 伪类高亮当前段落
用户点击书签跳转后，目标段落常被顶部导航栏遮挡，或难以定位。CSS 的 :target 伪类能精准选中当前 URL hash 对应的元素：
p:target { background-color: #fff8dc; padding: 2px 8px; border-left: 3px solid #ff6b35; }
这段样式会让被跳转到的 <p> 段落左侧加橙色竖条、浅黄色背景，持续 2 秒左右（取决于用户是否手动滚动离开）。
-
:target是实时响应的——URL hash 改变，样式立刻切换 - 不能用于动画（
transition在:target上无效），但可配合@keyframes做一次性的入场效果 - 若多个元素同时匹配（比如两个
id相同），只第一个生效；务必保证id唯一
移动端点击书签后内容被吸顶导航遮住？加 scroll-margin-top
很多响应式网站顶部有固定导航栏（position: fixed），跳转后段落文字被盖住，这是最常被忽略的体验断点。
解决方法不是 JS 计算偏移，而是用标准 CSS 属性：
h2, p { scroll-margin-top: 64px; }
这表示：当该元素成为 :target 或被锚点跳转定位时，浏览器自动将其顶部预留 64px 空间（适配你导航栏高度）。
- 值可以是
px、rem，甚至calc(64px + 1rem)，但别用百分比（不生效） - 必须设在目标元素上（比如
h2或p），不能只设在html或body - 部分旧版 Safari（padding-top +
margin-top: -Xpx模拟，但语义差
真正麻烦的不是写几行代码，而是得同时确认 id 命名规范、scroll-margin-top 数值是否匹配实际导航高度、以及 :target 样式有没有被更高优先级规则覆盖——三者缺一都会让书签“看起来没反应”。
