HTML5推出的Mark元素是专门用于标记或高亮文本的原生语义化标签，它的核心作用是突出显示与当前用户操作或上下文相关的文本片段，相比传统用span配合CSS实现高亮的方式，Mark元素自带语义且使用更简单，是前端开发中文本高亮的优选方案。
Mark元素的基本语法
Mark元素属于行内元素，使用方式非常简单，直接把需要高亮的文本包裹在<mark>标签内部即可，不需要额外的属性配置。基本语法如下：
<!-- 基础Mark元素使用示例 --> <p>今天我们需要重点学习的内容是<mark>HTML5语义化标签</mark>，其中<mark>Mark元素</mark>是文本高亮的核心标签。</p>
上述代码渲染后，被<mark>包裹的“HTML5语义化标签”和“Mark元素”文本会默认显示为黄色背景，以此实现高亮效果。
Mark元素的默认样式
浏览器对Mark元素有默认的样式设定，不同浏览器的默认表现基本一致，核心样式为：
- 背景颜色：默认为黄色（具体色值为rgb(255, 255, 0)）
- 文本颜色：继承父元素的文本颜色，默认是黑色
- 内边距：部分浏览器会添加少量内边距，让高亮背景和文本之间有留白
如果需要查看或修改默认样式，可以通过浏览器的开发者工具选中Mark元素，查看对应的计算样式。
自定义Mark元素的高亮样式
默认的黄色背景不一定符合所有页面的设计需求，我们可以通过CSS自定义Mark元素的高亮样式，修改背景色、文本色、边框等属性。
基础样式自定义
通过标签选择器直接设置<mark>的样式，会影响页面中所有的Mark元素：
/* 自定义所有Mark元素的样式 */
mark {
background-color: #e6f7ff; /* 浅蓝色背景 */
color: #1890ff; /* 蓝色文本 */
padding: 2px 4px; /* 调整内边距 */
border-radius: 3px; /* 圆角效果 */
}
局部样式自定义
如果只想让某个区域的Mark元素使用特定样式，可以给父元素添加类名，再通过后代选择器限定作用范围：
/* 仅对class为search-result内的Mark元素生效 */
.search-result mark {
background-color: #fff7e6; /* 浅橙色背景 */
color: #fa8c16; /* 橙色文本 */
}
<div class="search-result">
<p>搜索结果中包含关键词<mark>前端开发</mark>的内容共有12条。</p>
</div>
Mark元素的典型应用场景
搜索结果关键词高亮
在搜索功能中，高亮显示搜索关键词是最常用的场景，通过Mark元素可以快速实现这个效果，结合JavaScript动态包裹关键词即可：
// 搜索关键词高亮函数
function highlightKeyword(text, keyword) {
if (!keyword) return text;
// 使用正则替换关键词为Mark包裹的形式
const reg = new RegExp(keyword, 'g');
return text.replace(reg, `<mark>${keyword}</mark>`);
}
// 使用示例
const content = "HTML5 Mark元素是高亮文本的好工具，学习HTML5需要掌握Mark元素的使用";
const keyword = "HTML5";
const highlightedContent = highlightKeyword(content, keyword);
console.log(highlightedContent);
重点内容标注
在技术文档、教程类页面中，可以用Mark元素标注核心知识点、注意事项等内容，让用户快速捕捉重点：
<p>使用Mark元素时<mark>不需要额外引入JavaScript库</mark>，它是HTML5的原生标签，兼容性覆盖所有现代浏览器。</p>
使用Mark元素的注意事项
- Mark元素是语义化标签，仅用于需要高亮的文本，不要把它当作普通的样式标签滥用，避免影响页面的语义结构。
- 不要嵌套使用Mark元素，即不要在<mark>标签内部再放置<mark>标签，浏览器可能无法正确渲染嵌套效果。
- 如果需要高亮的文本包含HTML特殊字符，需要先对内容进行转义，避免标签解析错误，比如要显示<div>这样的文本并高亮，需要写成<mark><div></mark>。
- Mark元素不会改变文本的语义权重，搜索引擎不会因为它认为高亮内容更重要，高亮仅作用于用户视觉体验。
兼容说明
Mark元素是HTML5新增的标签，所有现代浏览器（Chrome、Firefox、Safari、Edge等）都完全支持，如果需要兼容非常老旧的浏览器（如IE8及以下），可以通过CSS添加 fallback 样式：
/* 兼容老旧浏览器的Mark元素样式 */
mark {
background-color: yellow;
color: black;
}
/* IE8及以下不支持Mark元素，通过类名模拟 */
.mark-highlight {
background-color: yellow;
color: black;
}
对于不支持Mark元素的浏览器，也可以用span标签配合类名实现相同的视觉效果，保证功能降级可用。