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） - 绑定事件时建议用事件委托，尤其对动态生成的文本段落
示例代码片段：
这是一段可交互的文本，关键词能被点击高亮。
若坚持用真实
直接包裹/解包文本内容会改变节点树，可能破坏已有事件监听器、影响焦点管理，或与富文本编辑器、翻译插件等冲突。
立即学习“前端免费学习笔记（深入）”；
