小说章节目录应使用和构建语义化线性结构，支持原生编号、嵌套分级、type/start属性定制样式，配合正确锚点id与scroll-margin-top实现可靠跳转与定位。
用 <ol></ol> 和 <li> 搭建基础章节目录
小说章节目录本质是带编号的线性结构，<ol></ol>（ordered list）天然适配。浏览器默认会按 1. 2. 3. 顺序渲染，无需额外 JS 或 CSS 就能保证语义正确和基础可访问性。
实操建议：
- 每章用一个
<li>包裹，内部可嵌套@#@#@#@#@#@#@#@#@#@0 - 避免手动写数字（如
<li>1. 第一章...</li>），否则后续增删章节时编号易错乱 - 若目录跨多级（如“卷一”“卷二”下再分章），可用嵌套
<ol></ol>，但注意屏幕阅读器对深层嵌套的支持较弱，一般两级足够
用 type 和 start 属性控制编号样式与起始值
小说常需罗马数字（卷）、汉字（章）、或从非 1 开始编号（如续作第二部），这些靠 <ol></ol> 原生属性就能解决，不依赖 CSS 计数器。
常见组合：
-
<ol type="I"></ol>→ 大写罗马数字：I II III（适合“卷”） -
<ol type="1" start="5"></ol>→ 从数字 5 开始：5 6 7（适合连载续更） -
<ol type="a"></ol>→ 小写英文字母：a b c（适合附录小节） - 注意：
type="Chinese"不是标准属性，HTML5 不支持；想用汉字编号必须用 CSScounter-style: cjk-decimal或 JS 生成
锚点跳转失效？检查 id 和 href 的匹配细节
点击章节目录跳不到对应章节，90% 是锚点 ID 写错或未定义。HTML 锚点不区分大小写，但空格、标点、中文在 URL 中需编码，极易出错。
关键检查点：
- 目标章节容器必须有
id，且值与<a href="#xxx"></a>中的xxx完全一致（包括连字符、下划线） - 避免用纯中文
id（如id="第一章"），浏览器可能解析异常；推荐拼音或数字，如id="chapter-1"或id="ch1" - 确保目标
id在页面中唯一；重复 ID 会导致跳转不可预测 - 如果章节内容动态加载（如 AJAX），需确认
id元素已存在于 DOM 中，否则锚点无效
移动端滚动定位不准？加 scroll-margin-top 微调
点击目录跳转后，标题被顶部导航栏遮挡是高频问题。CSS 的 scroll-margin-top 能让目标元素自动留出上边距，比 JS 监听 scroll 更轻量可靠。
实操方式：
- 给所有章节标题（如
<h2 id="chapter-1"></h2>）加样式：scroll-margin-top: 60px;（数值略大于导航栏高度） - 该属性兼容性良好（Chrome 69+、Firefox 68+、Safari 15.4+），旧版 Safari 可用
scroll-padding-top配合设置作为降级 - 不要用
margin-top或padding-top替代，它们改变的是布局流，不是滚动锚点偏移
真正麻烦的是混合编号逻辑——比如“卷一·第一章”，需要两层计数器联动，此时 CSS counter-reset 和 counter-increment 才是解法，<ol></ol> 单靠自身属性搞不定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
