<mark>标签本质是语义化高亮，表示需突出显示的文本，非视觉装饰；它支持辅助技术、可CSS定制，但须注意IE9+兼容性、内联元素限制及HTML转义安全。
mark 标签的本质是语义化高亮，不是视觉装饰
<mark> 是 HTML5 原生语义标签，表示“文档中需要突出显示或标记的文本”，比如搜索结果中的关键词、引用中的重点句。它不等于 <span style="background: yellow">——浏览器默认会给它一个浅黄色背景和内联样式，但它的价值在于告诉辅助技术（如读屏器）“这段文字被特意标出”，也方便后续用 CSS 精准控制所有高亮行为。
直接使用 mark 标签时要注意的三个兼容性细节
- IE9+ 开始支持
<mark>，IE8 及更早版本会忽略该标签（内容仍可见，但无语义、无默认样式） - 某些旧版 Android WebView（如 4.3 及之前）对
mark的默认背景色渲染不一致，建议始终显式重置或覆盖background-color -
<mark>是**内联元素**，不能直接包裹块级内容（如<p>、<div>），否则 HTML 验证失败；若需高亮整段，应把<mark>放在段落内部，或用 CSS 改变其display（但会削弱语义）
自定义 mark 样式时必须重写 background-color 和 color
浏览器默认样式类似：background-color: #ff0; color: #000;。但不同浏览器略有差异（Safari 有时偏橙，Firefox 在深色模式下可能不可读），所以生产环境务必显式声明：
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0.1em 0.2em;
border-radius: 2px;
}
注意：padding 和 border-radius 可以安全添加，但避免用 margin（内联元素不响应垂直 margin）；如果要加上下间距，改用 line-height 或包裹容器控制。
与 JavaScript 动态高亮结合时，别忘了 escape HTML 内容
常见场景：用户搜索关键词，JS 把匹配文本包上 <mark>。错误做法是直接字符串拼接：
立即学习“前端免费学习笔记（深入）”；
// ❌ 危险：可能注入 script 标签 element.innerHTML = text.replace(keyword, '<mark>$&</mark>');
正确做法是先创建文本节点，再插入 <mark>：
function highlight(text, keyword) {
const parts = text.split(new RegExp(`(${keyword})`, 'gi'));
return parts.map(part =>
part.toLowerCase() === keyword.toLowerCase()
? <mark>${escapeHtml(part)}</mark>
: escapeHtml(part)
).join('');
}
function escapeHtml(str) {
return str.replace(/[<>'"`]/g, c => ({
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'`': '`'
}[c]));
}
否则用户输入 <script>alert(1)</script> 就会执行脚本——这是 <mark> 实际使用中最容易被忽略的安全盲点。
