HTML笔记应用可用原生contenteditable实现编辑，localStorage保存HTML字符串，CSS控制换行与光标行为，导出通过Blob生成下载文件。
直接用浏览器原生能力就能搭出一个可用的 HTML 笔记应用，不需要框架、不依赖后端，核心就三件事：可编辑区域 + 本地保存 + 基础格式支持。
contenteditable 是最轻量的编辑入口
不用自己实现光标、选区、撤销，contenteditable="true" 让任意 <div> 变成编辑区。它不是“富文本编辑器”，但对笔记场景够用——支持加粗、换行、列表、拖拽图片，且所有操作都生成标准 HTML 标签。
- 必须加
spellcheck="false"关闭拼写检查，否则在中文输入时会频繁触发下划线干扰 - 避免设在
<body>或<main>上，推荐用独立<div id="editor"></div>，方便后续绑定事件和序列化 - 不要用
document.execCommand()控制格式（已废弃），改用document.queryCommandState()读取当前状态，配合按钮 UI 实现“加粗”“标题切换”等反馈
localStorage 存纯 HTML 字符串最稳妥
笔记内容本质是结构化文本，localStorage.setItem('note-html', editor.innerHTML) 就能存下来。别存 innerText 或 textContent，那会丢掉所有标签和格式。
- 每次输入后用
input事件节流保存（比如 800ms 延迟），避免高频写入卡顿 - 首次加载时用
localStorage.getItem('note-html')恢复，若为空则插入默认提示文字（如<p>开始记录你的 HTML 笔记…</p>） - 注意 XSS 风险：如果未来要支持用户粘贴外部 HTML，得用
DOMPurify.sanitize()过滤，但纯自用笔记可跳过
用 CSS 控制编辑区行为比 JS 更可靠
很多“编辑体验问题”其实靠几行 CSS 就能解决，比如换行混乱、光标错位、空行塌陷。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 给编辑区加
white-space: pre-wrap，确保回车和空格保留，又不会破坏自动换行 - 禁用默认的
user-select: text对某些标签的影响，统一设#editor * { user-select: text; } - 为
<p>和<h1>–<h6>设置最小高度（如min-height: 1.5em），防止空段落消失导致光标无处安放 - 用
::before在空块级元素前插入占位符（如content: "↵"），辅助视觉定位
导出 HTML 文件需绕过浏览器安全限制
浏览器禁止前端脚本直接写文件系统，所以“导出为 .html”只能走 a.download + Blob 方案，本质是生成一个可下载的 blob URL。
- 构造完整 HTML 字符串时，必须包含
<!DOCTYPE html>和<meta charset="UTF-8">，否则中文会乱码 - 不要试图把样式内联进
<style>后再导出——CSS 优先级容易错乱，建议只导出语义化结构，样式留到打开后由页面 CSS 控制 - 导出文件名用
new Date().toISOString().slice(0,10) + '-note.html'，避免重名覆盖
真正难的不是功能实现，而是边界处理：光标落在 <img> 后怎么继续输入？连续按两次回车产生两个 <p></p> 怎么合并？这些细节没有银弹，得靠真实输入反复验证 DOM 状态。先跑通保存和渲染，再一处处补漏，比一开始就追求“完美编辑器”更实际。
