纯HTML+CSS+JS可实现电子书阅读器，但核心在于阅读舒适性：需语义化结构（section/h1–h6/p/blockquote）、精准滚动定位、夜间模式全链路控制、合理排版参数（font-size:1.125rem, line-height:1.7）及避免iframe分章加载。
直接用纯 HTML + CSS + JavaScript 就能做出可用的电子书阅读器界面，但关键不是“能不能做”，而是“做出来能不能读得舒服、翻得顺、换设备不崩”。Safari 和 IE8 以下不支持是硬伤，别硬扛；真正要花力气的是字体渲染、段落呼吸感、夜间模式切换和滚动锚点对齐。
怎么组织电子书内容结构才利于阅读和维护
别用一堆 <div> 堆章节，语义错误且后期加注释、朗读、SEO 都会出问题。必须用 <section> 包每章，<h1>～<h6> 控制层级，正文统一用 <p>，长引用走 <blockquote>，代码块用 <pre><code>。章节之间加 <hr> 或留白比用 <br> 更可控。如果要做目录跳转，每个 <section> 得带 id，比如 <section id="chapter-3">，不然 JS 无法精准 scrollIntoView。
CSS 排版细节决定阅读疲劳度
字号、行高、字间距不是调着玩的：正文建议 font-size: 1.125rem（18px），line-height: 1.7，letter-spacing: 0.02em；段落间用 margin-bottom: 1.4rem，别依赖 <p> 默认 margin；禁用 text-align: justify，中文字用两端对齐反而断词诡异；hyphens: auto 在 Safari 和 Chrome 里行为不一致，干脆关掉。夜间模式不是简单改 background-color，得连 color、border-color、caret-color 一起切，否则光标看不见。
滚动定位和翻页逻辑容易踩的坑
用户拖动滚动条后点“下一章”，页面常卡在中间或跳错位置。根本原因是没监听 scroll 事件重置当前章状态，也没用 getBoundingClientRect() 判断可视区域顶部是否已进入下一章 <section>。正确做法是：监听 scroll，遍历所有 <section>，取第一个顶部 <= window.innerHeight * 0.3 的作为当前章；翻页时调用 element.scrollIntoView({ behavior: 'smooth', block: 'start' })，别用 window.scrollTo 硬跳。另外，iOS Safari 滚动惯性大，scroll-behavior: smooth 必须写在 <html> 标签上才生效，写在 <body> 里无效。
立即学习“前端免费学习笔记（深入）”；
为什么不要用 iframe 加载单章 HTML
看似隔离干净，实则埋雷：iframe 内容无法被父页 CSS 全局控制字体、夜间模式；postMessage 同步阅读进度麻烦还易丢；iOS 下 iframe 滚动卡顿比主文档严重；搜索引擎基本不抓 iframe 里的内容。真要分章加载，用 fetch() + innerHTML 替换 <main> 内容更稳，配合 history.pushState() 更新 URL 即可。注意替换前清空 event listener，否则多次加载后事件重复绑定。
最常被忽略的其实是字体回退链和 font-display: swap 设置——等自定义字体加载完再渲染文字，用户会看到大片空白。电子书页面一旦卡住，用户立刻就走，没耐心等 2 秒。
