纯html+css+js可实现电子书阅读器，但核心在于阅读舒适性：需语义化结构（section/h1–h6/p/blockquote）、精准滚动定位、夜间模式全链路控制、合理排版参数（font-size:1.125rem, line-height:1.7）及避免iframe分章加载。

直接用纯 HTML + CSS + JavaScript 就能做出可用的电子书阅读器界面，但关键不是“能不能做”，而是“做出来能不能读得舒服、翻得顺、换设备不崩”。Safari 和 IE8 以下不支持是硬伤，别硬扛；真正要花力气的是字体渲染、段落呼吸感、夜间模式切换和滚动锚点对齐。

怎么组织电子书内容结构才利于阅读和维护

别用一堆 <div> 堆章节，语义错误且后期加注释、朗读、SEO 都会出问题。必须用 <code><section></section> 包每章，<h1></h1>～<h6></h6> 控制层级，正文统一用 <p></p>，长引用走 <blockquote></blockquote>，代码块用 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt;。章节之间加 &lt;code&gt;&lt;hr&gt;&lt;/code&gt; 或留白比用 &lt;code&gt;&lt;br&gt;&lt;/code&gt; 更可控。如果要做目录跳转，每个 &lt;code&gt;&lt;section&gt;&lt;/section&gt;&lt;/code&gt; 得带 &lt;code&gt;id&lt;/code&gt;，比如 &lt;code&gt;&lt;section id=&quot;chapter-3&quot;&gt;&lt;/section&gt;&lt;/code&gt;，不然 JS 无法精准 scrollIntoView。&lt;h3&gt;CSS 排版细节决定阅读疲劳度&lt;/h3&gt;&lt;p&gt;字号、行高、字间距不是调着玩的：正文建议 &lt;code&gt;font-size: 1.125rem&lt;/code&gt;（18px），&lt;code&gt;line-height: 1.7&lt;/code&gt;，&lt;code&gt;letter-spacing: 0.02em&lt;/code&gt;；段落间用 &lt;code&gt;margin-bottom: 1.4rem&lt;/code&gt;，别依赖 &lt;code&gt;&lt;p&gt;&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow artxards&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; rel=&quot;nofollow&quot; href=&quot;/xiazai/skill3458&quot; title=&quot;html-ppt-to-pdf&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg&quot; alt=&quot;html-ppt-to-pdf&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a rel=&quot;nofollow&quot; href=&quot;/xiazai/skill3458&quot; title=&quot;html-ppt-to-pdf&quot; class=&quot;overflowclass&quot;&gt;html-ppt-to-pdf&lt;/a&gt; &lt;p class=&quot;overflowclass&quot;&gt;将使用 `&lt;section class=&quot;slide&quot;&gt;` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。&lt;/p&gt; &lt;/div&gt; &lt;a rel=&quot;nofollow&quot; href=&quot;/xiazai/skill3458&quot; title=&quot;html-ppt-to-pdf&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;/code&gt; 默认 margin；禁用 &lt;code&gt;text-align: justify&lt;/code&gt;，中文字用两端对齐反而断词诡异；&lt;code&gt;hyphens: auto&lt;/code&gt; 在 Safari 和 Chrome 里行为不一致，干脆关掉。夜间模式不是简单改 background-color，得连 &lt;code&gt;color&lt;/code&gt;、&lt;code&gt;border-color&lt;/code&gt;、&lt;code&gt;caret-color&lt;/code&gt; 一起切，否则光标看不见。&lt;/p&gt;&lt;h3&gt;滚动定位和翻页逻辑容易踩的坑&lt;/h3&gt;&lt;p&gt;用户拖动滚动条后点“下一章”，页面常卡在中间或跳错位置。根本原因是没监听 &lt;code&gt;scroll&lt;/code&gt; 事件重置当前章状态，也没用 &lt;code&gt;getBoundingClientRect()&lt;/code&gt; 判断可视区域顶部是否已进入下一章 &lt;code&gt;&lt;section&gt;&lt;/section&gt;&lt;/code&gt;。正确做法是：监听 scroll，遍历所有 &lt;code&gt;&lt;section&gt;&lt;/section&gt;&lt;/code&gt;，取第一个顶部 &lt;code&gt; 的作为当前章；翻页时调用 &lt;code&gt;element.scrollIntoView({ behavior: 'smooth', block: 'start' })&lt;/code&gt;，别用 &lt;code&gt;window.scrollTo&lt;/code&gt; 硬跳。另外，iOS Safari 滚动惯性大，&lt;code&gt;scroll-behavior: smooth&lt;/code&gt; 必须写在 &lt;code&gt;&lt;/code&gt; 标签上才生效，写在 &lt;code&gt;&lt;/code&gt; 里无效。&lt;/code&gt;&lt;/p&gt;&lt;h3&gt;为什么不要用 iframe 加载单章 HTML&lt;/h3&gt;&lt;p&gt;看似隔离干净，实则埋雷：iframe 内容无法被父页 CSS 全局控制字体、夜间模式；&lt;code&gt;postMessage&lt;/code&gt; 同步阅读进度麻烦还易丢；iOS 下 iframe 滚动卡顿比主文档严重；搜索引擎基本不抓 iframe 里的内容。真要分章加载，用 &lt;code&gt;fetch()&lt;/code&gt; + &lt;code&gt;innerHTML&lt;/code&gt; 替换 &lt;code&gt;&lt;main&gt;&lt;/main&gt;&lt;/code&gt; 内容更稳，配合 &lt;code&gt;history.pushState()&lt;/code&gt; 更新 URL 即可。注意替换前清空 &lt;code&gt;event listener&lt;/code&gt;，否则多次加载后事件重复绑定。&lt;/p&gt;&lt;p&gt;最常被忽略的其实是字体回退链和 &lt;code&gt;font-display: swap&lt;/code&gt; 设置——等自定义字体加载完再渲染文字，用户会看到大片空白。电子书页面一旦卡住，用户立刻就走，没耐心等 2 秒。&lt;/p&gt;</pre>