mark标签语义是高亮与上下文相关的内容，浏览器默认黄色背景黑色文字；不改变语义层级或屏幕阅读器行为，不可嵌套，需避免HTML混入和正则未转义等问题。
mark 标签在 HTML5 中的语义和默认行为
mark 是 HTML5 原生语义化标签，专用于标记文档中“需要引起注意的、与当前上下文相关的高亮部分”，比如搜索结果中的关键词、引用中的强调段落。它不是装饰性标签，浏览器默认会用黄色背景（background-color: yellow）+ 黑色文字渲染，但样式可覆盖。
关键点：它不改变文本结构或语义层级（不像 strong 表示强重要性），也不影响屏幕阅读器的朗读方式（多数读作普通文本，不加“强调”提示），所以别指望它自动提升 SEO 权重或无障碍表现。
直接使用 mark 标签的典型场景和注意事项
最常见用途是服务端/客户端搜索高亮：用户搜“React”，返回内容中所有 “React” 字符串被包裹成 <mark>React</mark>。
- 必须确保内容是纯文本片段——如果里面混有 HTML 标签（如
<span>React</span>），直接套mark会导致标签错乱甚至 DOM 解析失败 - 不要嵌套
mark——<mark>React<mark>Native</mark></mark>是无效 HTML，浏览器会自动修正为两个独立mark - 若需多关键词高亮，得逐个匹配并避免重叠；比如 “JavaScript” 和 “Script” 同时存在时，先匹配长词再短词，否则 “Script” 可能被截断进已闭合的
mark内
用 JavaScript 动态高亮关键词时容易踩的坑
常见做法是用 innerHTML.replace() 或正则匹配后插入 mark，但直接操作易出问题：
立即学习“前端免费学习笔记（深入）”；
- 未转义正则特殊字符（如用户搜
[a-z]），导致new RegExp(keyword)报错或误匹配 —— 必须先对keyword做keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 忽略大小写但没加
i标志，或用了i却没在替换时保持原大小写（可用String.prototype.localeCompare()或捕获组还原） - 对富文本（含内联元素）直接
replace()，会破坏原有标签结构 —— 正确做法是遍历文本节点（node.nodeType === 3），只在纯文本节点里做替换，并用document.createElement('mark')插入
简单安全的单关键词高亮示例（仅处理纯文本容器）：
function highlightText(element, keyword) {
const escaped = keyword.replace(/[.*+?^${}()|[]\]/g, '\$&');
const regex = new RegExp(`(${escaped})`, 'gi');
element.innerHTML = element.innerHTML.replace(regex, '<mark>$1</mark>');
}
样式定制和兼容性要点
mark 在所有现代浏览器中都支持，IE9+ 也支持，但 IE 默认样式是浅黄底+黑字，且不支持 mark::marker 伪元素（无实际用途）。定制时注意：
- 建议显式重置
background-color和color，因为不同浏览器默认值略有差异（Safari 有时用略深的黄） - 若要圆角或内边距，加
padding即可，但避免设display: inline-block—— 它会破坏行内流布局，导致换行或对齐异常 - 移动端点击
mark区域可能触发系统高亮（iOS 长按选中），可通过user-select: none禁用，但会同时禁用用户复制 —— 更稳妥的是只对非交互区域用mark，交互控件用span+ class
真正麻烦的是语义混淆：有人把 mark 当成“加粗”或“重点”来用，结果在无障碍测试中被指出不符合 WCAG 1.3.1（信息关系不能仅靠颜色传达）。这时候就得换思路——用 strong + CSS 背景，或者加 aria-label 补充说明。
