HTML怎么创建便签导出为待办事项_HTML to-do list格式转换【操作】-html教程-PHP中文网

html中用+构建待办项，需包裹于内、用id/for关联、以checked属性标记状态，禁用disabled控制完成态。

html怎么创建便签导出为待办事项_html to-do list格式转换【操作】

HTML里怎么用`<input type="checkbox">`生成待办事项结构

纯HTML本身不“导出”任何东西，但你可以用<input type="checkbox"> + <label></label>搭出可交互的待办项骨架，这是后续导出或同步的基础。关键不是样式，而是语义正确和DOM可读性。

常见错误是只写<input>不包<label></label>，导致点击文字无法触发勾选；或者用<div>模拟复选框，丧失原生可访问性和JS事件可靠性。 <ul> <li>每个待办项必须包裹在<code><li>里，父容器用<ul class="todo-list"></ul>——方便后续用CSS/JS批量识别

<input>要带id，<label></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导出。容易踩的坑：中文编码乱码、空格被过滤、日期格式不兼容。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

用document.querySelectorAll("input[type=checkbox]")遍历，检查.checked，再取兄弟<label></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清洗