应使用语义化标签（如<section>+<h1>～<h6>）拆分独立HTML文件，用<nav>+<ol>构建目录，确保ID唯一且路径正确，命名采用两位数字前缀（如01-introduction.html）避免排序混乱。
怎么用 HTML 组织多章节电子书的页面结构
HTML 本身不提供“电子书”格式，但可以用语义化标签 + 文件组织模拟出可导航、可跳转、可样式化的多章节结构。关键不是用什么高级技术，而是让章节有明确层级、链接可预测、内容可独立加载或滚动定位。
常见错误是把所有章节塞进一个大 HTML 文件里，结果加载慢、书签失效、打印错乱；或者用一堆 <div> 堆砌，导致屏幕阅读器无法识别章节目录、搜索爬虫抓不到标题层级。
- 用
<section>包裹每章，<h1>～<h6>严格按逻辑嵌套（一章一个<h1>，小节用<h2>） - 章节文件建议拆成独立 HTML（如
chapter-1.html、chapter-2.html），用相对路径链接，避免file://协议下跨文件跳转失败 - 在首页或目录页用
<nav>+<ol>列出章节链接，每个<a href="chapter-3.html">后面加aria-label="第三章：CSS 选择器详解"，方便辅助技术理解
为什么不能只靠 <div> 和 CSS class 模拟章节
视觉上能做出分章效果，但语义缺失会立刻暴露问题：PDF 导出工具（如 PrinceXML）无法提取目录；EPUB 打包器（如 Sigil）识别不了结构；甚至浏览器原生“查找本页”功能会跳过没标题的 <div> 区域。
更实际的坑是：你写了 class="chapter"，但搜索引擎和阅读器根本不知道这是“章节”，只会当普通区块处理。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<div class="chapter">→ 无语义，对机器不可读 -
<section aria-labelledby="ch2-title"><h2 id="ch2-title">浮动与清除</h2>→ 可被朗读、索引、导出为目录项 - 如果必须用
<div>（比如旧项目迁移），至少补role="region"和aria-label，但不如直接换<section>
章节内锚点跳转失效的常见原因
点击目录链接却跳不到对应位置？大概率是 ID 冲突或路径解析错了。HTML 锚点依赖精确的 id 值匹配，且对大小写、空格、特殊字符敏感。
例如 <a href="chapter-4.html#section-2.1"> 要求目标页存在 <h3 id="section-2.1">，而 id="section-2_1" 或 id="Section-2.1" 都不会命中。
- ID 必须唯一，不能重复出现在同一页面（哪怕在不同
<section>里） - 避免在 ID 中使用中文、空格、句号（
.）、冒号（:）——这些在 CSS 选择器或 JS 查询时要额外转义 - 跨文件跳转时，确保路径正确：
../appendix.html#faq不是appendix.html#faq（相对路径以当前文件为基准）
静态生成时如何避免章节顺序混乱
如果你用脚本批量生成 HTML 章节（比如从 Markdown 转换），最容易忽略的是文件名排序逻辑。系统按字典序排 chapter-1.html、chapter-10.html、chapter-2.html，结果目录里第10章排在第1章后面、第2章前面。
这不是 HTML 的问题，是文件命名策略问题。解决方式非常具体，不靠框架，只靠命名习惯。
- 统一用两位数字前缀：
01-introduction.html、02-html-structure.html、03-css-basics.html - 避免用
chapter-1这类带连字符+数字的组合，除非你控制生成脚本做自然排序 - 检查生成后的目录页 HTML，确认
<a href="02-html-structure.html">出现在<a href="01-introduction.html">之后 —— 最好用脚本校验href属性值是否按预期顺序排列
最麻烦的其实是章节间样式继承不一致：某章用了 <aside>，另一章忘了重置 margin，打印出来缩进错位。这种细节没法靠结构解决，得靠 CSS 重置和章节级 class 隔离，比如给每章外层加 class="chapter chapter--03"，再写 .chapter--03 aside { margin: 1em 0; }。
