HTML5 的 标签原生不支持点击切换高亮，需用 JavaScript 通过 classList.toggle() 控制 CSS 类实现交互；推荐用事件委托绑定 click 或 touchstart，避免直接操作 DOM 结构及 XSS 风险。
HTML5 用
是 HTML5 原生语义化标签，用于高亮文本中的相关或强调内容。它本身是静态的——没有内置交互逻辑，点击不会自动切换状态，也不会自动移除或添加。想实现“点一下高亮，再点一下取消”，必须靠 JavaScript 控制 DOM 状态。
用 classList.toggle() 实现点击切换高亮样式
最轻量、兼容性好（IE10+）、语义清晰的做法：保留普通文本结构，用 CSS 类模拟 效果，JS 只负责切换单个元素的类名。
- 避免动态创建/销毁
标签，减少 DOM 操作开销 - CSS 中定义
.highlight { background-color: #ff0; }，比直接操作innerHTML更安全（防 XSS） - 绑定事件时建议用事件委托，尤其对动态生成的文本段落
示例代码片段：
这是一段可交互的文本，关键词能被点击高亮。
若坚持用真实
直接包裹/解包文本内容会改变节点树，可能破坏已有事件监听器、影响焦点管理，或与富文本编辑器、翻译插件等冲突。
立即学习“前端免费学习笔记（深入）”；
- 用
Range和document.execCommand()已被弃用，不推荐 - 用
replaceChild()或outerHTML替换节点时，需重新绑定事件或使用事件委托 - 若文本含子元素（如
、链接），包裹逻辑需递归处理，复杂度陡增
简单场景下可用，但多数时候得不偿失。
移动端点击反馈延迟？记得加 touch-action: manipulation
在 iOS Safari 或部分安卓浏览器中，纯 click 事件有约 300ms 延迟。如果标注操作需要即时响应（比如做学习标记工具），别只依赖 click。
- 给可点击的文本容器加 CSS：
touch-action: manipulation; - 或监听
touchstart并e.preventDefault()（注意别影响滚动） - 避免在
上设user-select: none，否则长按无法选中文本
真正麻烦的不是怎么标，而是标完之后要不要持久化（存 localStorage？发到后端？）、是否允许多选、是否要区分标注类型（疑问/重点/待查）——这些才是后续扩展的硬骨头。
