现代html书签用id配合href="#id"实现，name已废弃；需确保id唯一、href带#、id值规范；加html{scroll-behavior:smooth}启用平滑滚动；用:p:target高亮目标元素；设scroll-margin-top避免固定导航遮挡。
书签标记不是用 @#@#@#@#@#@#@#@#@#@0，必须带 #
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></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 段落左侧加橙色竖条、浅黄色背景，持续 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 样式有没有被更高优先级规则覆盖——三者缺一都会让书签“看起来没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
