HTML排版长文档应以语义化标签为核心：用h1–h6构建严格层级，ol嵌套实现编号体系，为标题添加唯一id并配合nav[aria-label]提供可访问导航，兼顾打印与响应式需求。
用HTML规范排版长篇小说或法律文档的条款目录，核心是语义清晰、层级准确、可访问性强，而非仅靠CSS美化。重点在于合理使用标题标签（h1–h6）、列表结构和ARIA属性，让内容逻辑一目了然，同时兼容屏幕阅读器、电子书阅读器和打印样式。
用语义化标题构建清晰层级
法律条款或小说章节目录必须体现真实内容结构。一级标题（h1）用于文档总标题；二级标题（h2）对应“第一章”“第一条”等主干单元；三级标题（h3）用于节、款、项；更细粒度可用h4，但避免跳级（如h2后直接h4）。
- 错误示例：
<div class="title-level-2">第二条</div>——丢失语义，无法被辅助技术识别 - 正确示例：
<h2 id="article-2">第二条</h2><p>当事人应当……</p> - 小说目录中，
h2可标“第一卷”，h3标“第一章 风起青萍”，保持与正文标题一致
用有序列表呈现条款编号体系
法律条文常含嵌套编号（如“第十二条 → 第一款 → （一） → 1.”），宜用ol嵌套实现，而非纯文本或CSS计数器——前者保障结构可读性，后者仅控制外观。
- 外层
ol设type="1"表示阿拉伯数字主条 - 内层
ol可设type="a"或type="i"对应款、项 - 每项用
li包裹，内部可嵌h4或strong突出编号关键词，如<li><strong>（二）</strong>不得隐瞒……</li>
为目录添加可跳转锚点与导航支持
长文档目录本质是导航入口，每个条目需指向对应章节位置，并支持键盘Tab和屏幕阅读器朗读。
立即学习“前端免费学习笔记（深入）”；
- 为每个标题添加唯一
id（如id="chapter-3"），目录链接用<a href="#chapter-3">第三章</a> - 目录本身建议包裹在
<nav aria-label="文档目录">中，明确其导航用途 - 避免使用JavaScript滚动（如
scrollIntoView）替代原生锚点，确保无JS时仍可访问
兼顾打印与响应式阅读体验
法律文档常需打印，小说可能在小屏设备阅读，HTML结构要为不同媒介留出适配空间。
- 用
class区分内容类型（如class="legal-article"、class="novel-chapter"），便于CSS按场景定制 - 避免固定像素字号或宽度；优先用
rem或em，段落行高设为1.6以上提升可读性 - 打印样式中，隐藏无关装饰（如背景图、悬停效果），保留编号和页码（可通过
@media print补充counter-reset生成页码）
不复杂但容易忽略：结构先行，样式后置。先用正确标签搭好骨架，再通过CSS调整间距、缩进和字体，才能让长文档既严谨又易读。
