HTML中用<input type="checkbox">+<label>构建待办项，需包裹于<li>内、用id/for关联、以checked属性标记状态，禁用disabled控制完成态。
HTML里怎么用<input type="checkbox">生成待办事项结构
纯HTML本身不“导出”任何东西，但你可以用<input type="checkbox"> + <label>搭出可交互的待办项骨架，这是后续导出或同步的基础。关键不是样式，而是语义正确和DOM可读性。
常见错误是只写<input>不包<label>，导致点击文字无法触发勾选；或者用<div>模拟复选框，丧失原生可访问性和JS事件可靠性。
- 每个待办项必须包裹在
<li>里，父容器用<ul class="todo-list">——方便后续用CSS/JS批量识别 -
<input>要带id，<label>用for属性关联，比如<input id="task-1">+<label for="task-1">买咖啡</label> - 别用
disabled或readonly控制完成态，用checked属性 + CSS类（如completed）分离状态与样式
如何把HTML便签内容转成标准todo.txt格式（纯文本）
todo.txt是通用待办协议，格式极简：(A) 2024-05-20 买牛奶 @超市 +购物。HTML转它，核心是提取<input checked>状态、文本内容、优先级/项目/上下文等元信息。
浏览器里无法直接“保存为todo.txt”，必须靠JS导出。容易踩的坑：中文编码乱码、空格被过滤、日期格式不兼容。
立即学习“前端免费学习笔记（深入）”；
- 用
document.querySelectorAll("input[type=checkbox]")遍历，检查.checked，再取兄弟<label>的.textContent - 优先级用
data-priority="A"写在<input>上，避免解析文本前缀（如(A)），更稳定 - 导出时用
new Blob([content], {type: "text/plain;charset=utf-8"})，否则中文会变 - 示例片段：
const lines = []; todos.forEach(cb => { if (cb.checked) { const text = cb.nextElementSibling.textContent.trim(); const prio = cb.dataset.priority || ""; lines.push(`(${prio}) ${text}`); } });
为什么不能直接用localStorage存HTML结构当待办数据？
有人把整个<li><input>...</li>字符串塞进localStorage，短期能回显，但很快崩：DOM结构变化后解析失败、跨设备同步时标签被过滤、无法做搜索/排序/统计。
真正该存的是结构化数据——不是HTML，是数组对象。哪怕只是[{"text":"修bug","done":true,"priority":"B"}]，也比存HTML强十倍。
-
localStorage.setItem("todos", JSON.stringify(todos))，每次读取后JSON.parse()重建DOM，而不是innerHTML = storedHtml - 如果用户手动编辑了HTML源码（比如删掉某个
<input>），基于DOM遍历的逻辑会漏项；而JSON数据只要字段存在就安全 - 导出为
todo.txt或同步到其他App时，JSON可直接映射字段，HTML还得先用正则或DOMParser清洗
导出按钮点击后没反应？检查download属性和Blob URL生命周期
用<a download="todos.txt" href="blob:...">触发下载是最轻量方案，但blob: URL有严格时效性：创建后必须立刻点击，延迟超过几秒就失效。
典型错误是把URL.createObjectURL(blob)结果存变量，然后在setTimeout里点链接；或者用location.href跳转而非<a>模拟点击。
- 必须在生成Blob URL后**立即**调用
link.click()，中间不能有异步等待 - 记得
URL.revokeObjectURL(url)在点击后清理，否则内存泄漏（尤其频繁导出时） - 不要用
target="_blank"，新窗口打不开blob URL；也不要依赖href属性静态写死，它必须是动态生成的URL - 兼容性注意：Safari对
download属性支持有限，iOS需用saveAs库或提示“长按保存”
alert或toast兜底，而不是默认它一定成功。 
