是 html5 专为语义化高亮设计的标签，用于标记上下文相关的重要文本，需配合 css 控制样式并适配深色模式，不可用于语法高亮或嵌套在 中，且动态高亮应避免 innerhtml.replace() 而用 treewalker 安全处理。
用 <mark></mark> 标签做语义化高亮
<mark></mark> 是 HTML5 唯一专为“上下文相关高亮”设计的原生标签，不是视觉装饰工具，而是告诉浏览器、屏幕阅读器和搜索引擎：“这段文本在此处被标记为重要或相关”。比如搜索结果页中用户输入的关键词，就该用它。
直接包裹即可生效：<p>核心算法基于<mark>动态规划</mark>实现。</p> 浏览器默认给它黄色背景，但别依赖这个——不同 UA、深色模式、打印样式下表现不一。
- 必须显式写 CSS：例如
mark { background-color: #ffeb3b; color: #212121; padding: 0.1em 0.3em; border-radius: 3px; } - 务必加暗色模式适配：
@media (prefers-color-scheme: dark) { mark { background-color: #ffca28; color: #121212; } } - 不能嵌套在
<pre class="brush:php;toolbar:false;"></pre>或<code>内部做语法高亮——那是highlight.js的职责，<mark></mark>只处理纯文本语义
为什么不用 <font></font> 或内联 style
<font></font> 标签自 HTML5 起已被完全废弃，W3C 明确不支持。它没有语义，无法被辅助技术识别，也不响应系统偏好（如深色模式），更没法被 CSS 变量或媒体查询控制。
而手动写 <span style="background:#ff0">文本</span> 看似灵活，实则埋坑：
- 所有高亮样式散落在 HTML 中，主题切换时需全局搜索替换
- 缺乏语义，SEO 和可访问性（a11y）评分直接受损
- 与
<mark></mark>的键盘导航行为（如按 Tab 可聚焦）不一致
动态高亮关键词必须避开 innerHTML.replace()
用户输入关键词后想高亮页面内容？千万别用 element.innerHTML = element.innerHTML.replace(...)。这行代码会触发三重风险：
- XSS：用户搜
<script>alert(1)</script>，字符串拼接后直接执行 - HTML 结构破坏：在
@@##@@里搜logo，变成@@##@@logo.png">，图片挂掉 - 字符转义失效：关键词含
&、"、时，整个 innerHTML 解析失败
正确做法是用 TreeWalker 只遍历文本节点：document.createTreeWalker(root, NodeFilter.SHOW_TEXT)，对每个 node.textContent 做正则匹配，再用 document.createElement('mark') 安全插入——不碰 HTML 标签结构，也不拼字符串。
代码块高亮必须用 <pre class="brush:php;toolbar:false;"><code></code> + <code>highlight.js</code></pre>
想高亮一段 Python 或 JavaScript 代码？<mark></mark> 不适用，<span style="color:red"></span> 更不行。必须走标准语法高亮路径：
- 结构必须是
<pre class="brush:php;toolbar:false;"><code class="py">print("hello")</code></pre>—— 单独<code>不会被highlight.js扫描 - class 名必须是
language-xxx（如language-js），写成js或javascript无效 - 调用时机必须在 DOM 就绪后：
document.addEventListener('DOMContentLoaded', () => hljs.highlightAll()) - HTML 特殊字符（如
）要提前转义，或改用 <code><script type="text/plain"></script>包裹原始代码再提取
真正容易被忽略的是：高亮逻辑和语义高亮（<mark></mark>）属于两个完全不同的层级——前者解析词法结构，后者标记语义重点。混用或互相替代，都会让可维护性和可访问性崩塌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
