HTML中<ol>的编号是独立作用域，子列表不继承父级start值；type属性仅支持1/A/a，罗马数字需用CSS的list-style-type；锚点跳转失效多因id缺失或定位异常；专业目录必须依赖CSS counters、伪元素和样式控制。
用 <ol> 做目录时，序号不连续或跳变
常见现象是：手动写 <ol start="3"> 后，后续嵌套的 <ol> 又从 1 开始，或者浏览器自动重置了编号。根本原因在于 HTML 规范里 <ol> 的编号是**独立作用域**的，子 <ol> 不继承父级的 start 值，也不会自动接续。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果需要“1.1、1.2、2.1”这类多级编号，不要依赖原生
<ol>自动递进——它只支持单层序列； - 多级目录必须靠 CSS 的
counter-reset/counter-increment配合::before伪元素实现； - 若只是简单线性目录（如“第一章、第二章…”），直接用单层
<ol>+start属性即可，例如：<ol start="5"><li>性能优化</li></ol>； - 避免在
<ol>内混用<ul>或其他非<li>元素，否则部分浏览器会中断计数。
<ol type="I"> 和 <ol type="i"> 渲染结果不符预期
比如写了 <ol type="i">，但显示的是小写英文字母 a、b、c，而不是小写罗马数字 i、ii、iii。这是因为在 HTML5 中，type 属性对 <ol> 的支持已被降级为非标准行为，多数现代浏览器（Chrome/Firefox/Safari）仅保留 1、A、a 三种可靠值，I 和 i 实际被忽略，回退到默认数字。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 需要罗马数字编号，必须用 CSS 控制：
ol { list-style-type: lower-roman; }或upper-roman； - 避免在语义化要求高的场景（如正式文档目录）中依赖
type属性做格式控制； - 若需兼容老旧 IE（如 IE8），可保留
type="I"并配 CSS 回退，但当前（2026年）已无必要。
目录项点击跳转但页面不滚动到对应锚点
很多人把 <li><a href="#sec2">第二节</a></li> 放进 <ol>，却发现点击后没反应或跳转错位。问题通常不在列表本身，而在于目标锚点缺失或位置异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保每个
href对应的id确实存在，且是唯一值，例如：<h2 id="sec2">第二节</h2>； - 避免给
<div>或空元素设id作锚点——最好绑定在有内容、有高度的块级元素（如<h2>、<section>）上； - 若页面顶部有固定导航栏，跳转后标题被遮挡，需加 CSS 偏移：
h2[id] { scroll-margin-top: 60px; }； - 不要在
<li>内再套一层<ol>后直接写<a>，容易因样式继承导致点击区域异常。
用 CSS 生成带缩进和连接线的目录样式
纯 HTML 的 <ol> 只能控制编号类型和起始值，无法实现“1.1.1 → 1.1.2”缩进、“·”连接线、悬停高亮等效果——这些必须交由 CSS 完成。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 层级缩进推荐用
margin-left或padding-left，而非text-indent（后者只缩进首行）； - 连接线可用伪元素模拟：
li::after { content: "→"; margin-left: 8px; }，但注意要设display: inline才生效； - 多级编号用 CSS counters 更稳定：
ol { counter-reset: section; }<br>li { counter-increment: section; }<br>li::before { content: counters(section, ".") ". "; }； - 别忘了给
<a>加text-decoration: none和 hover 状态，否则目录看起来像普通链接堆砌。
<ol> 的 type 和 start 是弱兼容遗留接口，别指望它撑起一个专业目录。 
