ul和ol是构建目录骨架最直接的手段，关键在语义结构、合理嵌套与简单样式控制；需配合id锚点实现跳转，用包裹并验证id唯一性以保障可访问性与维护性。
ul 和 ol 是快速生成内容目录最直接的手段，但“精美”不靠列表本身，而靠语义结构 + 简单样式控制 + 正确嵌套。纯 HTML 无法实现动画、折叠、自动编号跳转等效果，那些必须配合 CSS 或 JavaScript。
用 ul / ol 搭出可读性强的目录骨架
目录本质是层级化导航，ol 适合带序号的线性流程（如教程步骤），ul 更通用（如章节概览）。关键不是选哪个，而是嵌套是否合理：
- 一级目录项必须直接放在
<ol></ol>或<ul></ul>内，不能跳过 - 子目录用
<li>包裹，再在其内部嵌套另一个<ul></ul>或<ol></ol> - 避免混用
<div> 替代 <code><li>—— 这会破坏语义，影响屏幕阅读器和 SEO - 示例片段：
<ol> <li>入门准备 <ul> <li>安装编辑器</li> <li>创建第一个文件</li> </ul> </li> <li>基础标签详解</li> </ol> - 在目标章节标题上加
id属性，例如：<h2 id="section-2">基础标签详解</h2> - 在目录项里用
a标签指向它：@#@#@#@#@#@#@#@#@#@0 - 注意：
id值不能含空格或中文（推荐用短横线分隔），且全页唯一 - 浏览器滚动行为默认生硬，如需平滑滚动，需额外加 CSS：
html { scroll-behavior: smooth; } - 给外层列表设
margin-left: 1.5em加强层级感 - 用
font-size: 0.95em统一文字大小，避免默认过小 - 给链接加
text-decoration: none和color: #2a58b7提升可点击感 - 不要在
<li>上直接写style—— 容易重复，应作用于<ol></ol>或<ul></ul> - 所有
href必须对应真实存在的id，否则点击空白滚动，调试时难定位 - 若页面内容动态生成（比如 CMS 输出），
id需由系统自动生成并保证唯一，手写易冲突 - 移动端小屏下，深嵌套目录会挤占空间，建议超过三级就考虑收起逻辑（这时已超出纯 HTML 能力）
-
<nav></nav>语义标签应包裹整个目录，而非只包列表 —— 这是辅助技术识别导航区域的关键
id 锚点链接让点击能跳转到对应章节
光有列表没用，得让它“可交互”。HTML 原生支持锚点跳转，只需两步：
不用 CSS 就显得“简陋”，但加三行就能提升辨识度
纯 HTML 目录默认缩进浅、字号小、无视觉区分。不需要写复杂样式，仅内联 style 就够用：
容易被忽略的兼容性和维护陷阱
目录看着简单，但实际协作或长期维护时，几个点常被跳过：
真正卡住人的往往不是怎么写，而是写了之后没检查 id 是否拼错、路径是否漏掉 #、嵌套是否多了一层 <ul></ul>。打开浏览器开发者工具，直接搜索 id= 能最快验证锚点是否存在。
