纯HTML无法实现增删改交互，必须配合JavaScript处理事件、动态操作DOM，并用localStorage持久化数据，CSS负责样式与状态反馈，三者缺一不可。
怎么用纯 HTML 搭出一个能看、能写、不刷新就增删的待办看板
纯 HTML 本身做不到交互——它只是骨架。真要“搭看板”，必须配合 JavaScript 处理添加、勾选、删除，再用 CSS 控制布局和视觉反馈。否则你只能写死几条静态任务，连打个勾都要手动改代码。
常见错误是把 index.html 当成完整应用：只写 <ul><li>买牛奶</li></ul>，结果发现无法新增、不能标记完成、删了没反应。这不是设计问题，是漏掉了行为层。
- HTML 负责结构：输入框、按钮、任务列表容器
- CSS 负责分区与状态样式（比如
.completed加灰线-through） - JavaScript 负责监听按钮点击、读取输入值、动态插入
<li>、切换 class、移除 DOM 节点
输入框回车提交 + 按钮点击双触发怎么统一处理
用户习惯按回车，也习惯点“添加”按钮。两个动作得走同一段逻辑，否则容易漏掉一种，或者重复执行两次。
关键不是写两套事件，而是把核心逻辑抽成函数，再分别绑定：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
function addTodo() {
const input = document.getElementById('todo-input');
const text = input.value.trim();
if (!text) return;
// ... 创建 li、追加到 ul、清空 input
input.value = '';
}
document.getElementById('add-btn').onclick = addTodo;
document.getElementById('todo-input').onkeypress = (e) => {
if (e.key === 'Enter') addTodo();
};
- 务必检查
input.value.trim()，空格或换行会生成空白项 - 回车触发后要手动
e.preventDefault()吗？不用——<input>在<form>外时，回车默认不提交；但如果包了<form>，就必须加e.preventDefault() - 别在
onkeypress里用keyCode，已废弃，统一用e.key === 'Enter'
勾选任务后怎么持久化、又不依赖后端
页面刷新就丢数据？不是非得接 API。浏览器自带 localStorage 就够用，存的是字符串，所以得 JSON.stringify() 再存，读的时候 JSON.parse()。
但要注意：只在关键节点存，别每勾一下就写一次磁盘（性能差），建议统一在增删/完成切换后调用保存函数：
function saveTodos(todos) {
localStorage.setItem('todos', JSON.stringify(todos));
}
function loadTodos() {
const saved = localStorage.getItem('todos');
return saved ? JSON.parse(saved) : [];
}
- 初始渲染时先
loadTodos()，再逐条生成 DOM - 每次勾选变更状态，更新内存里的数组，再调
saveTodos() - localStorage 有大小限制（通常 5MB），但几百条待办完全够用；超过会静默失败，可加
try/catch包一层 - 别存 DOM 元素，只存纯对象数组，例如
[{id:1,text:'买牛奶',done:true}]
为什么用 data-id 不用 id 或数组下标定位任务
删第 3 条，然后新增一条，再删第 3 条——如果靠数组下标或 li:nth-child(3)，第二轮删的其实是新任务。真实业务里，顺序会变，唯一标识不能靠位置。
data-id 是标准做法：创建时生成唯一值（比如 Date.now() 或递增计数器），存在 DOM 上也存在数据对象里，删的时候通过这个 ID 找到对应项：
<li data-id="1698765432100"><input type="checkbox"> 买牛奶</li>
- 不要用
id="todo-1"，全局唯一 ID 容易冲突，且难批量管理 - 别用
index当 ID——列表排序、过滤后下标全乱 - 删除操作应同时从 DOM 和内存数组里移除，再调
saveTodos()，三者不同步就会出现“界面删了，刷新还在”
真正麻烦的不是写几行 HTML，而是让每个交互动作都闭环：用户操作 → 状态更新 → 视图同步 → 数据落盘。漏掉任意一环，看板就“不听话”。
