mark标签是唯一语义正确、可访问且被读屏器和搜索引擎识别的高亮方式，必须显式声明background-color和color以确保在暗色模式、高对比度等场景下符合wcag aa对比度要求，并通过treewalker安全操作文本节点避免xss与dom破坏。
mark 标签是唯一语义正确、可访问且被读屏器和搜索引擎识别的高亮方式，不是“加个黄底”的视觉技巧，而是明确传达“这段文本与当前上下文（如搜索、引用）强相关”。只靠浏览器默认样式交付，在暗色模式、高对比度或打印场景下大概率失效。
为什么必须显式写 CSS 覆盖 mark 默认样式
浏览器给 mark 设的默认背景（如 #ff0）不参与 CSS 层叠，且在以下情况会彻底消失或不可读：
- 用户启用系统级暗色模式，Chrome/Firefox 可能将其变为透明或灰黄
- Windows 高对比度模式强制重置所有未声明的
background-color - 打印样式表中未覆盖时，
mark可能渲染为黑底白字甚至完全隐形 - 深色主题下默认黄底黑字对比度低于 WCAG AA 标准（实测约 1.4:1，要求 ≥ 4.5:1）
必须写：
mark {
background-color: #ffeb3b; /* 不用 #ff0，更稳 */
color: #212121;
padding: 1px 4px;
border-radius: 2px;
}
动态高亮关键词时，innerHTML.replace() 为什么危险
直接对 innerHTML 做字符串替换，会在三类场景中翻车：
- 用户搜
[a-z]这类含正则元字符的词 →new RegExp(keyword)报错，需先转义：keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 原文是
React，用户搜react→ 必须用new RegExp(`(${escaped})`, 'gi')+ 捕获组还原大小写 - 目标容器含 HTML，如
<strong>Vue</strong>→replace()会撕开标签，生成无效 DOM（如<strong><mark>Vue</mark></strong>变成<strong>Vue</strong>）
安全做法是遍历文本节点：
const walker = document.createTreeWalker(
element,
NodeFilter.SHOW_TEXT,
{ acceptNode: node => node.textContent.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT }
);
while (walker.nextNode()) {
const text = walker.currentNode.textContent;
const parts = text.split(new RegExp(`(${escapedKeyword})`, 'gi'));
// ……用 document.createElement('mark') 插入，不拼字符串
}
mark 和 span 的本质区别在哪
视觉上都能高亮，但语义和可访问性天差地别：
-
span是纯容器，无任何语义；读屏器不会特殊播报，搜索引擎不提取其内容 -
mark在辅助技术中会被明确读作“高亮文本”，盲人用户能立刻感知搜索命中 - 服务端返回带
mark的 HTML，SEO 工具可能单独抓取其中内容用于摘要生成 - 滥用
span替代mark，等于主动放弃语义层的可访问性与结构化能力
嵌套 mark（如 <mark>Java<mark>Script</mark></mark>）会导致语义断裂——浏览器虽自动修正为两个独立标签，但样式错位、DOM 结构混乱，且无法通过 querySelector('mark') 稳定获取。
最易被忽略的一点：样式声明必须同时包含 background-color 和 color。只设背景色，在深色主题或高对比度模式下文字可能完全不可见；只设文字色，背景仍可能被系统强制重置为透明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
