一个index.html文件即可运行的极简读书笔记页：用语义化标签（h1书名、h2章节、p正文、blockquote引用）、内联style微调排版、UTF-8编码、系统字体，避免框架和多余交互，确保双击打开、刷新不丢内容、保存即生效。
怎么用纯 HTML 搭出一个能立刻写的读书笔记页
不需要框架、不装依赖，一个 index.html 文件就能跑起来。关键不是“好看”，而是“打开就能记”——避免任何阻断写作的步骤（比如配 CSS 类名、调 JS 插件）。直接写结构，留白够大，字体够清楚。
实操建议：
- 用
<h1>作书名，<h2>作章节或日期，<p>写笔记正文——语义清晰，打印/阅读器也友好 - 别写内联样式，但可以加一行
<style>在<head>里微调：比如body { line-height: 1.6; max-width: 60ch; margin: 2rem auto; padding: 0 1rem; }，控制宽度和行高比“居中+字号”更重要 - 避免用
<div>套来套去——极简页里每个标签都该有明确内容职责，多一层就多一分维护负担
为什么不用 CSS 框架反而更稳
像 Bootstrap 或 Tailwind 这类，初始加载快，但一旦你改一个颜色或边距，就得查文档、翻 class 名、担心响应式干扰。而读书笔记页几乎不交互、不响应缩放——它本质是“数字纸”。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 引入 CDN 后页面闪动（CSS 加载延迟导致重排）
- 用了
text-sm或mt-4却发现没生效——其实是 Tailwind 没配 purge 或没启用 JIT - 想改字体，结果发现框架把
font-family锁死在一堆 fallback 里，删又怕崩布局
实操建议：直接写 font-family: "Segoe UI", system-ui, sans-serif; ——用系统字体，无加载、无版权、渲染最稳。
如何让笔记内容真正「可导出」而不是只在浏览器里看
HTML 本身已是通用格式，但很多人导出时才发现：复制粘贴丢格式、打印成 PDF 段落挤在一起、甚至中文标点被转义。根源常在标签滥用或编码遗漏。
使用场景提示：
- 用
<blockquote>包引用原文，而不是用<p>+ 手动加 > 符号——这样复制时保留语义，后续转 Markdown 也容易 - 确保文件开头有
<meta charset="UTF-8">，否则引号、破折号、省略号（…）可能显示为 - 不要用
<pre>包代码片段或诗行，它天然保留空格和换行
哪些地方最容易「越改越复杂」
极简页最危险的不是功能少，而是从“加个深色模式按钮”开始，一路滑向 localStorage 存状态、加 toggle 动画、适配暗色系统偏好……最后连自己都懒得打开。
真实踩坑点：
- 加了
localStorage自动保存，结果每次改错一个字就触发一次写入——本地存储有 5MB 上限，日志一多直接报QuotaExceededError - 用
contenteditable替代<textarea>，本意是支持粗体，结果粘贴 Word 内容带一堆<span style="...">，污染结构 - 为了“美观”加图标字体（如 Font Awesome），反而让首次加载多一个 100KB 请求，且图标在无网时变方块
记住：这个页面的核心价值是「空白」和「确定性」——它不该猜你想做什么，只该等你写下来。只要 index.html 能双击打开、F5 刷新不丢内容、Ctrl+S 保存后下次还能读，就已经完成了它的全部使命。
