HTML本身无内置批注功能，需JavaScript+DOM+存储实现；data-note+CSS悬停最轻量，适用于静态提示；window.getSelection()捕获选区是Word式划词关键；localStorage适合单人离线，IndexedDB或后端API支撑协作；禁用contenteditable内联comment，应采用浮层独立输入框。
HTML 本身没有内置的“文档评论批注”功能，所谓“像 Word 那样选中文字 → 右键添加批注”，必须靠 JavaScript + DOM 操作 + 存储机制组合实现；纯 HTML 注释 <!-- --> 只对开发者可见，用户完全感知不到。
用 data-note + CSS 悬停实现最轻量批注
适合静态页面、无需保存、仅作提示用途。核心是把批注内容存在属性里，用伪元素弹出。
- 给目标元素加
data-note属性：<p data-note="此处需核对原始凭证">报销金额</p> - CSS 中写：
[data-note] { position: relative; } [data-note]::after { content: attr(data-note); visibility: hidden; opacity: 0; transition: .2s; background: #333; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 12px; } - 再加悬停触发：
[data-note]:hover::after { visibility: visible; opacity: 1; } - 注意：不支持换行、不能编辑、移动端 hover 失效（得改用
click或focus）
用 window.getSelection() 捕获选区并包裹批注节点
这是实现“Word 式划词批注”的关键一步，但跨浏览器兼容细节多，容易漏掉边界情况。
- 监听
mouseup（桌面）或touchend（移动端），调用window.getSelection() - 用
getRangeAt(0)获取选区范围，再用range.cloneContents()或range.surroundContents()包裹选中文本 - 推荐用
range.extractContents()+ 插入自定义<span class="postil" data-id="p-1"></span>，避免破坏原有结构 - 常见坑：
surroundContents()要求选区必须完全在单个元素内，否则抛InvalidStateError；移动端getSelection()有时返回空，需加防抖和 fallback
批注数据存哪？localStorage vs IndexedDB vs 后端 API
本地存还是上服务端，取决于协作需求和生命周期要求。
立即学习“前端免费学习笔记（深入）”；
-
localStorage：适合单人离线标注，如教学材料预习。键名建议用文档 URL + 哈希锚点拼接，例如comment_https://a.com/doc.html#sec2 -
IndexedDB：需要支持多条批注、附件、时间戳、用户标识时更稳妥，但开发成本比localStorage高一倍 - 后端 API：多人实时协作、审核流、权限控制（谁可删/改）必须走这路；注意批注 target 必须带稳定锚点（如元素
id或基于文本哈希的定位），不能只靠 DOM 顺序索引——重排版后就失效 - 别用
cookie存批注：4KB 限制太紧，且每次请求都发，不安全也不合理
为什么不能直接用 contenteditable + 内联 comment 标签？
因为 HTML5 已废弃 <comment> 元素，且 contenteditable 会干扰原生事件流和光标定位。
- 浏览器根本不识别
<comment>，它会被当作文本节点渲染出来，变成页面上可见的“<comment>xxx</comment>” -
contenteditable="true"开启后，selection行为变得不可预测：双击可能选中整块、回车插入<div>而非<br>，导致批注锚点漂移 - 真正可行的是：保持原文本只读，用绝对定位浮层 + 独立输入框承载批注编辑逻辑，不污染主文档 DOM
- 若强行用
contenteditable，务必监听input和compositionend，防止中文输入法中途打断批注提交
最易被忽略的一点：批注 UI 的 z-index 和 pointer-events 设置。浮动面板若没设 pointer-events: auto，点击输入框会穿透；若父容器有 transform 或 will-change，可能造成定位偏移，必须用 getBoundingClientRect() 动态算位置，不能只靠鼠标坐标。
