标签的核心语义是“上下文关联性”，分动态高亮（依赖实时交互与运行时状态）和静态引用（源于作者意图与文档结构），二者均须满足“与当前语境相关”这一底线，否则即为误用。
<mark></mark> 标签在动态高亮与静态引用中，表面都是“加背景”，但语义逻辑完全不同——不是用法差异，而是上下文意图是否可变、是否依赖用户行为或当前场景。
动态高亮：语义绑定于实时交互，强调“命中”而非“重要”
这是 <mark></mark> 最核心、不可替代的使用场景。它的存在完全依赖外部动作（如搜索、跳转、筛选），一旦上下文消失，标记就应移除。
- 用户在页面内搜索 “Vue”，所有匹配文本被
<mark>Vue</mark>包裹 → 表示“此处正被你查找的内容命中” - 代码编辑器中高亮当前光标所在变量名 → 表示“这是你此刻关注的焦点”
- 点击目录跳转到
<h2> <mark>第4章</mark> 响应式原理</h2>→ 表示“该标题是本次导航的目标锚点”
关键特征：
- 标记是临时性的：刷新页面或清除搜索，
<mark></mark>就不该存在 - 语义由运行时状态驱动：服务端渲染需带
q=参数才插入；客户端 JS 必须监听输入并重绘 - 辅助技术会识别为“当前相关片段”，读屏器可能播报“高亮文本”或触发提示音
静态引用：语义绑定于文档结构，强调“被指出”而非“被找到”
这类用法不随用户操作变化，而是作者在撰写时就明确指定某段内容需在当前语境下被特别标出。
- 教程中写：“请修改 `
package.json中的 dependencies 字段” → 表示“本段说明所指的具体字段名” - 法律条文页引用：“依据《条例》第12.3条……” → 表示“此处引用的条款编号是本次论述的关键依据”
- 技术文档示例代码里：
const config = {<mark>timeout: 5000</mark>, retries: 3};→ 表示“这行配置项是本次示例要重点说明的部分”
关键特征：
- 标记是固有且稳定的：即使不搜索、不交互，它也始终存在
- 语义由作者意图定义：和
<strong></strong>不同，它不宣称“这个更重要”，而是说“这个在此处被专门指出” - 不依赖 JS 或参数：通常由 CMS 或静态生成器在构建时注入，无需运行时干预
两者共通底线：都必须满足“上下文相关性”，否则就是误用
- ❌ 把
<mark>立即下单</mark>放在按钮上 → 没有上下文依赖，只是 UI 装饰，该用<strong></strong>+ CSS - ❌ 在独立 banner 里写
<mark>限时优惠</mark>→ 无引用对象、无当前语境，属于视觉强调，非语义高亮 - ✅ 同一段文字，在搜索页是动态高亮，在教程页是静态引用 —— 同样内容，因语境不同，
<mark></mark>的合理性完全不同
本质上，<mark></mark> 的语义不是“黄底黑字”，而是“这段文字，此刻/在此处，被关联、被指出、被命中”。
它不回答“有多重要”，只回答“和什么有关”。
