<mark> 标签用于表达“因当前上下文被主动标出”的语义，而非仅视觉高亮；必须用于承载内容意图的场景（如搜索匹配、法律条款焦点），禁用于纯装饰性状态标识。
mark 标签不是“加个黄底”的快捷样式工具，而是向浏览器、屏幕阅读器和搜索引擎明确传递「这段文字因当前上下文被主动标出」的语义信号。用错地方，等于在 HTML 里写了一句错别字——表面能看，但解析逻辑全乱。
什么时候必须用 mark，而不是 span + CSS？
判断只有一条：高亮是否承载内容意图，而非仅服从视觉设计。
- ✅ 搜索页返回结果中，用户输入的
"React"在段落里被包裹 —— 因为它和查询行为强绑定，辅助技术会读出 “mark” 角色，帮助视障用户快速定位匹配项 - ✅ 法律文档引用条款时，把本次裁量所依据的具体款项用
mark包裹 —— 表示“此处是焦点”，不是装饰 - ❌ 导航栏当前激活项加黄色背景 —— 应该用
class="nav-item active"+ CSS，状态标识不依赖上下文相关性 - ❌ 文章标题旁加个“热”徽章 —— 属于状态标签，用
aria-label或带role="status"的容器更合适
mark 的默认渲染和可访问性硬约束
浏览器默认给 mark 加黄色背景 + 黑色文字，这不是“样式建议”，而是 UA（User Agent）层面对语义的强制表达。覆盖它时，必须守住三条底线：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 别设
background-color: transparent或background: none—— 这等于主动抹除语义，屏幕阅读器仍会播报 “mark”，但用户看不到任何视觉反馈 - WCAG 要求文字与背景对比度 ≥ 4.5:1，黄底白字（
#ffff00+#ffffff）直接不达标，务必校验 - Safari 渲染
mark时默认带轻微内阴影，若统一视觉，加box-shadow: none更稳妥
动态插入 mark 时最容易翻车的三个点
服务端渲染或 JS 动态高亮关键词时，mark 很容易变成 XSS 入口或语义断裂点。
立即学习“前端免费学习笔记（深入）”；
- React/Vue 中避免直接拼接字符串再用
dangerouslySetInnerHTML插入<mark>xxx</mark>—— 若xxx来自用户输入且未转义，会执行脚本 - 正则替换做高亮时，注意边界：用
/\b(react)\b/gi比/(react)/gi更安全，避免把"reaction"误标成<mark>react</mark>ion - IE 完全不支持
mark，若需兼容，得用document.createElement('mark')检测 + fallback 到<span role="mark">，不能只靠 CSS 模拟
真正难的从来不是怎么写 <mark>xxx</mark>，而是每次敲下这行标签前，得确认：这段文字，是否真的值得被上下文“认领”？语义一旦错配，后续所有样式、可访问性、SEO 修复成本，都远高于一开始多想两秒。
