纯html无法实现可拖拽、增删、持久化的便签应用，因其仅定义结构，交互、样式、状态管理分别依赖javascript和css。
纯 HTML 无法实现可拖拽、可增删、可持久化的便签应用——它必须配合 CSS 和 JavaScript 才能工作。只用 <div> + <code><p></p> 堆出几个带阴影的黄色块，不是便签应用，是静态截图。
为什么不能只靠 HTML 标签实现便签功能
HTML 是结构描述语言，不处理交互、状态、样式变换或数据存储：
<div class="note"> 只定义“这里有个容器”，不决定它能不能被鼠标拖动 <li> <code><p></p>无法响应双击编辑、回车保存、ESC 取消等行为- 没有内置机制保存用户添加的便签到本地，刷新即丢失
- 所有“便签样式”（圆角、阴影、倾斜、手写字体）都依赖 CSS，HTML 标签本身不携带这些视觉语义
- 监听
mousedown/mousemove实现拖拽：记录初始偏移、动态更新style.left和style.top - 双击进入编辑态：替换
<p></p>为<textarea></textarea>，聚焦并选中文字 - 按
Enter保存、Escape撤回：监听keydown，区分事件码 - 点击「+」新增便签：动态创建
document.createElement('div')并插入body - 关闭按钮点击：调用
element.remove()，同时从 localStorage 数据中剔除对应项 - 页面加载时读取
localStorage.getItem('stickyNotes')并渲染 DOM
核心功能必须由 JS 驱动的环节
一个真实可用的便签应用，以下动作全部需 JavaScript 实现：
CSS 决定“像不像便签”，HTML 只负责搭骨架
所谓“便签感”，全靠 CSS 拼凑。HTML 部分只需提供最小语义结构：
<div class="sticky-note" data-id="123"> <button class="close-btn">×</button> <p contenteditable="false">今天要交需求文档</p> </div>
关键点：
- 不用
<article></article>或<section></section>—— 语义过重，便签不是独立内容单元；<div> 足够且准确 <li> <code>contenteditable="false"是防误触起点，双击才设为true，避免光标乱跳 -
data-id属性必须存在，用于 JS 绑定数据与 DOM 节点，localStorage 存的是数组对象，不是 HTML 字符串 - 所有视觉效果（黄底、投影、微旋转、撕纸边缘）全在 CSS 里：
background: #fff9c4、box-shadow: 3px 3px 8px rgba(0,0,0,0.2)、transform: rotate(-1deg) -
拖拽边界失控：没限制
left/top最小值（负太多会拖出视口），也没防拖拽过快导致鼠标脱节——要用getBoundingClientRect()做边界校验 -
localStorage 存字符串而非对象数组：直接存
innerHTML，导致下次加载时 XSS 风险，且无法做字段校验（比如缺id就崩） -
多个便签共享同一个
textarea引用：编辑完 A 便签再点 B，B 的内容被 A 覆盖——每个便签必须有独立的textarea实例和事件监听器
面试时最容易被追问的三个坑
如果你写了 demo 却没考虑这些，会被立刻质疑工程能力：
便签应用的复杂度不在“画得像”，而在“状态同步是否鲁棒”。HTML 只是那个最安静的配角，连台词都没有。
