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