mark标签的用途是什么？高亮文本怎么设置？
在网页开发与内容排版中，我们经常需要引起用户对某段文字的注意。传统的加粗或斜体往往不足以达到视觉上的突出效果，而HTML5中引入的<mark>标签，则为高亮文本提供了原生的语义化支持。本文将详细解析<mark>标签的用途，并介绍如何设置和自定义高亮文本样式。
一、mark标签的用途
<mark>标签的主要用途是表示由于其相关性而被标记或高亮的文本。它不仅仅是一个视觉修饰标签，更带有明确的语义。常见的应用场景包括：
搜索结果高亮：在站内搜索中，将用户搜索的关键词在结果摘录中用
<mark>包裹，帮助用户快速定位所需内容。引文标注：在引用他人文章时，作者原本没有强调，但引用者为了引起注意而特别标记的部分。
代码审查或文本批注：标记需要关注、修改或审查的特定文本片段。
需要注意的是，<mark>标签与<strong>和<em>存在语义上的区别：
<strong>：表示文本重要性很高（如警告信息）。<em>：表示文本语气上的强调（如重读的词）。<mark>：表示文本在当前上下文中具有相关性（如搜索匹配词）。
二、mark标签的基础用法
使用<mark>标签非常简单，只需要将需要高亮的文本包裹在其中即可。在主流浏览器中，<mark>标签默认带有黄色背景的样式。
<p>在今天的会议中，我们重点讨论了<mark>项目进度延迟</mark>的问题。</p>
上述代码在浏览器中渲染时，“项目进度延迟”这几个字将会呈现出黄色背景的高亮效果。
三、如何自定义高亮文本样式
虽然<mark>默认的黄色背景在大多数情况下很适用，但为了契合网站的整体设计风格，我们经常需要自定义高亮的颜色和样式。这可以通过CSS轻松实现。
1. 全局修改mark标签样式
你可以直接在CSS中为<mark>标签重写样式，比如修改背景色、文字颜色，或者添加内边距和圆角。
mark {
background-color: #4CAF50; /* 设置为绿色背景 */
color: #ffffff; /* 设置文字为白色 */
padding: 0 4px; /* 添加左右内边距 */
border-radius: 3px; /* 添加圆角 */
}2. 使用CSS类实现不同风格的高亮
如果页面中需要多种颜色或风格的高亮，可以为<mark>标签添加不同的类名。
<p>这是<mark class="highlight-red">红色高亮</mark>的文本。</p> <p>这是<mark class="highlight-blue">蓝色高亮</mark>的文本。</p>
.highlight-red {
background-color: #ffebee;
color: #c62828;
border-bottom: 2px solid #c62828; /* 添加下划线效果 */
}
.highlight-blue {
background-color: #e3f2fd;
color: #1565c0;
}四、使用span标签结合CSS设置高亮
除了使用原生的<mark>标签，有时候为了兼容老旧浏览器，或者高亮内容并不具备“相关性”的语义（纯粹为了视觉装饰），我们也会使用<span>标签配合CSS来设置高亮文本。
<p>这是一段普通的文本，其中包含了<span class="custom-highlight">自定义样式的高亮</span>部分。</p>
.custom-highlight {
background: linear-gradient(to bottom, transparent 50%, #ffeb3b 50%); /* 实现类似荧光笔的半行高亮 */
font-weight: bold;
}上述CSS利用线性渐变实现了一个只覆盖文字下半部分的荧光笔效果，这是<mark>默认样式无法直接做到的，展示了CSS自定义高亮的灵活性。
五、JavaScript动态高亮文本
在实际开发中，高亮往往是动态的，比如搜索功能。我们可以使用JavaScript结合<mark>标签，动态替换页面中的关键词。
function highlightKeyword(containerId, keyword) {
const container = document.getElementById(containerId);
if (!container || !keyword) return;
// 获取容器内部文本
const content = container.innerHTML;
// 使用正则表达式全局匹配关键词，并替换为mark标签包裹
const regex = new RegExp('(' + keyword + ')', 'gi');
container.innerHTML = content.replace(regex, '<mark>$1</mark>');
}
// 调用示例：在id为content的元素中，高亮显示"前端"两个字
// highlightKeyword('content', '前端');这段代码通过正则表达式匹配指定的关键词，并将其替换为带有<mark>标签的HTML结构，从而实现了基于用户输入的动态高亮。
总结
<mark>标签是HTML5中用于文本高亮的语义化标签，它表示内容的相关性突出，而非重要性强调。默认的黄色背景适合多数场景，而结合CSS则可以实现丰富多彩的高亮效果。在实际开发中，推荐根据语义需求合理使用<mark>，搭配CSS和JavaScript，打造体验优良的交互与视觉呈现。