<p>HTML 无法单独实现模板选择功能，需结合 JavaScript 动态注入预存的模板字符串（如 script[type="text/template"] 或 JS 对象），按语义化结构区分会议笔记（含 time、ol.action-items）与读书笔记（含 blockquote、aside.annotation），并用 data-* 属性标识角色以支持导出和打印。</p>
怎么用 HTML 实现模板选择功能
纯 HTML 本身不支持“选择模板”这种交互行为——<select> 只能选值，不能自动加载或切换整个笔记结构。真正起作用的是结合 JavaScript 动态插入 HTML 片段，或者用 data-* 属性预存模板内容。
常见错误是直接写一堆 <div class="template"> 然后靠 CSS display: none 切换，结果所有模板 DOM 都在页面里，既影响首屏性能，又让笔记导出/打印逻辑混乱。
- 推荐做法：把每个模板的 HTML 结构作为字符串存在
script type="text/template"或 JS 对象里，比如templates["meeting"] - 用户选中后，用
innerHTML或insertAdjacentHTML注入到目标容器（如<article id="note-body">） - 避免用
document.write或eval，安全性差且不可调试
会议笔记 vs 读书笔记的 HTML 结构差异
两类模板的核心区别不在样式，而在语义化标签和可编辑区域的组织方式。
会议笔记强调时间线、行动项和责任人，读书笔记侧重引用、批注和概念关联。如果强行共用一套 <section> 嵌套，后期加导出 PDF 或同步到 Obsidian 就会出问题。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 会议模板应包含：
<time datetime="">开始时间、<ol class="action-items">、<dl>记录决策依据 - 读书模板应包含：
<blockquote cite="">原文摘录、<aside class="annotation">批注区、<ul class="keywords">标签 - 不要给所有输入框都用
contenteditable="true"，优先用<textarea>和<input>，便于表单序列化和移动端聚焦
如何让模板列表支持快速预览和切换
用户点选模板时，如果只是刷新整个页面或跳转 URL，体验就断了。需要在不重载的前提下展示差异。
最轻量的做法是：每个模板选项带一个缩略图 + 一行描述，并用 data-preview 存一小段代表性 HTML（比如前 3 行结构），鼠标悬停时渲染到预览区。
- 缩略图不用真图，用 SVG 内联即可，比如会议模板用日历 icon + “2024-06-15” 文字
- 预览 HTML 字符串需做基础转义，防止 XSS，至少过滤
<script>和onerror=类属性 - 切换时清空原内容前，先检查是否有未保存编辑（监听
input或blur事件，设isDirty标志位）
为什么不能只靠 CSS 类名控制模板样式
光靠 class="template-meeting" 然后写一堆 .template-meeting h2 规则，看似简单，实际会埋三个坑：
- 不同模板可能需要同一语义标签（如
<h2>）表现完全不同的层级含义，CSS 无法表达“这个<h2>是章节标题，那个是发言人姓名” - 打印样式（
@media print）里，会议模板要隐藏“编辑按钮”，读书模板要保留“页码引用”，仅靠类名难区分上下文 - 后续想导出为 Markdown，靠 class 名解析结构极不可靠；而用明确的
data-role="speaker-name"或data-type="quote"就容易提取
模板的本质是结构契约，不是视觉皮肤。HTML 标签选对了，CSS 和 JS 才好各司其职。
