纯html文章阅读器的关键在于阅读体验而非仅显示文字，需规范语义结构、精准排版参数、可靠滚动定位及完整夜间模式适配。
纯 HTML 就能做出可用的文章阅读器，但关键不是“能不能显示文字”，而是“读起来是否不累、翻页是否准、换设备是否崩”。真要省事又靠谱，别碰 iframe 分章、别用 justify 对齐中文、scrollIntoView 必须带 { behavior: 'smooth', block: 'start' } 参数——否则 iOS Safari 会跳得莫名其妙。
怎么组织文章结构才不会翻页错乱
用一堆 <div> 包段落，后期加目录、朗读、夜间模式全得重写。必须按语义来：<ul><li>
<code><article></article> 包整篇内容，不是 <div>
<li>每章用 <code><section id="chapter-2"></section>，id 值要可预测，方便 JS 定位
<h2></h2>（主标题用 <h1></h1>），别混用 <h3></h3> 或自定义 class<p></p>，长引用走 <blockquote></blockquote>，代码块用 <pre class="brush:php;toolbar:false;"><code></code></pre>
<hr> 或留白，别靠 margin-top 硬顶排版参数直接决定阅读疲劳度
字号、行高、字间距不是凭感觉调的。这些值在多数现代浏览器里实测最稳：
-
font-size: 1.125rem（约 18px），小屏可 media query 降到1rem -
line-height: 1.7，低于 1.5 容易挤，高于 1.8 段落像散架 -
letter-spacing: 0.02em，中文微调即可，别设负值 -
margin-bottom: 1.4rem给<p></p>，别依赖浏览器默认 margin - 禁用
text-align: justify——中文字两端对齐会断词诡异，一律用left -
hyphens: auto在 Safari 和 Chrome 行为不一致，干脆关掉
滚动定位和翻页逻辑最容易出 bug
用户拖动后点“下一章”，页面卡中间或跳错，根本原因就两条：没监听 scroll、没判断可视区域。正确做法是：
- 监听
window.addEventListener('scroll', ...)，每次滚动都遍历所有<section></section> - 用
element.getBoundingClientRect().top 判定“当前章” - 翻页时调
section.scrollIntoView({ behavior: 'smooth', block: 'start' }) -
scroll-behavior: smooth必须写在标签上，写在里 iOS Safari 不认 - iOS 滚动惯性大，建议加
touch-action: manipulation到<article></article>上提响应速度
夜间模式不能只改 background-color
只切背景色，光标、链接下划线、边框、placeholder 文字全会消失。必须连带控制：
-
color（正文）、border-color（分隔线）、caret-color（输入光标）全换 -
filter: invert(1) hue-rotate(180deg)是黑魔法，慎用——会把图片也反色 - 推荐用 CSS 自定义属性：
:root { --bg: #fff; --text: #333; }，夜间时批量覆盖 -
<meta name="color-scheme" content="light dark">告诉浏览器你支持暗色，系统级控件（如 checkbox）才自动适配
真正难的不是写出来，而是让每一段文字呼吸感一致、每一次翻页都落在段首第一行、夜间模式下光标依然清晰可见——这些细节藏在 getBoundingClientRect 的阈值里、藏在 scroll-behavior 的作用域里、藏在 caret-color 这个冷门属性里。
