<mark> 标签用于语义化高亮，表示文本与当前上下文相关，浏览器默认黄色背景，屏幕阅读器读作“marked text”；不可在 <pre><code> 中嵌套，否则破坏语法高亮结构；需严格写为 <mark>内容</mark>，不可用 <span> 模拟。
用 <mark> 标签做语义化高亮
直接包裹要高亮的文本，浏览器默认渲染为黄色背景，且带明确语义——表示“该文本与当前上下文相关”，比如搜索结果匹配项、引用重点等。
- 必须写成
<mark>内容</mark>，不能只加 class 或用<span>模拟 - 屏幕阅读器会读出“marked text”，
<span class="highlight">则完全无此能力 - 样式可自定义：
mark { background-color: #ffeb3b; color: #212121; }，但语义不变 - 别在
<pre><code>里嵌套<mark>——语法高亮库（如 highlight.js）会破坏其结构，导致解析失败
用 <span> + CSS 实现自由样式高亮
当需要多色、渐变、动画或兼容老浏览器时，<span> 是更灵活的选择，但它不传递任何语义信息。
- 必须配 CSS 才生效，例如：
.highlight { background: linear-gradient(120deg, #ff9a9e, #fad0c4); } - 动态插入时注意：若用
innerHTML = ...覆盖含<span>的内容，原有高亮会丢失，需重新运行高亮逻辑 - 避免用
document.write()或未转义的字符串拼接，否则<、>会被误解析为标签 - 如果高亮范围跨 HTML 元素（如从
<p>开始、到<em>结束），<span>无法合法包裹，此时只能操作文本节点
highlight.js 高亮代码块必须满足的三个条件
不是引入 JS 就能自动着色，90% 的“没反应”问题都卡在这三处。
- 结构必须是
<pre><code class="js">.../pre>，<p><code>或<div><code>完全无效 -
class值必须带前缀：language-python或lang-html，写成class="js"或class="code-js"会被跳过 - 脚本执行时机必须在 DOM 就绪后，且确保主题 CSS 已加载；只引
highlight.min.js不引atom-one-dark.min.css，代码能显示但无颜色
JavaScript 动态搜索并高亮页面文本
适合实现搜索框实时匹配，但要注意文本节点处理和 HTML 结构安全。
立即学习“前端免费学习笔记（深入）”；
- 必须遍历
Node.TEXT_NODE，不能直接对innerHTML正则替换，否则会把<div>当成普通字符破坏结构 - 高亮前先清除旧
<span class="highlight">，用正则/<span[^>]*class="highlight"[^>]*>(.*?)</span>/gi提取原文本再替换 - 大小写敏感需显式控制：
new RegExp(`(${searchText})`, 'g')是区分大小写，加i标志才忽略 - 用户输入空格或正则特殊字符（如
$、.）时，必须searchText.replace(/[.*+?^${}()|[]\]/g, '\$&')转义，否则报错或误匹配
<mark> 还是 <span>，它只是视觉层叠加，不影响可访问性树的结构顺序——所以搜索高亮后，焦点流、屏幕阅读器朗读顺序都不会变，这点常被当成“功能已完整”而漏测。 
