备忘录页面应使用语义化html结构：主标题用，每条备忘用包裹并以或为标题，时间用，删除按钮用。
备忘录页面该用什么HTML结构才不踩语义化坑
直接用 <div> 套 <code><div> 写备忘录，后期加筛选、导出或接入 JS 交互时会卡在 DOM 查询和可访问性上。语义化不是加分项，是后续所有功能的基础设施。<ul>
<li>标题用 <code><h2></h2>（整个页面主标题用 <h1></h1>，每条备忘用 <h3></h3> 或 <h4></h4>）
<article></article> 包裹，不是 <section></section> 或 <div> —— 它独立、可复用、自带隐含语义<li>时间信息必须用 <code><time datetime="2024-05-20">5月20日</time>，不能只写纯文本；屏幕阅读器和搜索引擎靠这个识别时效性<button type="button"></button>，别用 <a href="#"></a> —— 后者触发页面跳转、影响键盘导航怎么让备忘录支持快速添加又不重刷页面
表单提交默认刷新页面，但备忘录本质是局部状态更新。绕开 form 默认行为比强行阻止更可靠。
- 把
<form></form>的onsubmit绑定到 JS 函数，开头就写event.preventDefault() - 输入框用
<input type="text" required>，加required属性让浏览器原生校验，比 JS 判断更轻量 - 新增后清空输入框用
inputElement.value = ""，别用form.reset()—— 后者会重置所有字段（包括你可能加的隐藏字段） - 插入新
<article></article>时，用insertAdjacentHTML("afterbegin", htmlString)比innerHTML +=更安全，避免重绘整块区域
本地存储数据时 localStorage 的三个硬限制
localStorage 看似简单，但存备忘录这种高频读写场景下，边界问题立刻暴露。
- 单个域名上限约 5MB，但实际能用的远少于这个数 —— 字符串序列化后体积膨胀（比如 emoji、换行符都会占更多字节）
- 只能存字符串，数组/对象必须用
JSON.stringify()，但注意Date对象、undefined、函数会被丢弃或转成null - 写入操作是同步阻塞的，连续快速添加 10 条以上，UI 会明显卡顿；建议用防抖（debounce）合并写入，或改用
indexedDB处理超 50 条数据
响应式折叠与打印样式容易被忽略的两处细节
备忘录常需在手机查看、在电脑打印，但 CSS 媒体查询和打印样式经常漏掉关键控制点。
- 移动端折叠「完成」状态时，别只用
display: none—— 这会让屏幕阅读器也跳过，应配合aria-hidden="true"和inert属性（或用visibility: hidden+position: absolute） - 打印前清空所有背景色和图标：用
@media print { * { background: transparent !important; color: #000 !important; } }，否则用户打印出来全是黑块 - 时间戳在打印时建议显示完整格式（
2024-05-20 14:30），而屏幕显示可用相对时间（“2小时前”），两者用不同<time></time>元素分别包裹，通过screen/print媒体查询切换显隐
真正麻烦的从来不是写完第一版，而是三个月后要加个按标签筛选——那时你才会发现当初没用 <article></article>、没存标准时间格式、没考虑打印适配，到底省了多少事。
