'<mark>'标签的作用与使用场景

<mark>标签是HTML5中一个语义化元素，用于高亮显示文本中的特定部分。它通常用于标识与用户当前操作或搜索关键词相关的内容，视觉上表现为黄色背景。下面详细探讨其作用、使用场景及实际应用示例。

<mark>标签的基本作用

<mark>的核心功能是突出显示文本片段，其默认样式为黄色背景（类似荧光笔效果），但可通过CSS自定义。与<strong>（表示重要性）或<em>（表示强调）不同，<mark>的语义更偏向“相关性”而非“重要性”。

<p>在搜索结果中，<mark>HTML5</mark>的相关文档被高亮显示。</p>

典型使用场景

1. 搜索关键词高亮

在搜索引擎或站内搜索功能中，<mark>常用于标记匹配用户查询的关键词：

<!-- 搜索结果示例 -->
<div class="search-result">
  <h3>HTML5新特性</h3>
  <p>...<mark>HTML5</mark>引入了<mark>语义化标签</mark>如header、footer...</p>
</div>

2. 用户操作反馈

当用户选中文本或进行交互时，动态标记相关内容：

// 高亮用户选中的文本
document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  if (selection.toString().trim()) {
    const range = selection.getRangeAt(0);
    const mark = document.createElement('mark');
    range.surroundContents(mark);
  }
});

3. 教育/注释系统

在在线学习平台或文档系统中标记重点内容：

<blockquote>
  CSS盒模型包含：margin、border、padding、<mark>content</mark>。
  <footer>——摘自《Web开发基础》</footer>
</blockquote>

样式自定义

虽然默认样式为黄底黑字，但可通过CSS完全覆盖：

mark {
  background-color: #ffeb3b; /* 默认黄色 */
  color: #333;
  padding: 0.2em;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  mark {
    background-color: #fdd835;
    color: black;
  }
}

/* 自定义主题 */
mark.important {
  background: linear-gradient(to right, #ff4081, #ff9100);
  color: white;
}

与其他标签的对比

动态内容处理示例

结合JavaScript实现实时高亮：

<input type="text" id="searchInput" placeholder="输入关键词">
<article id="content">
  <p>HTML5的语义化标签包括section、article、nav等。</p>
</article>

<script>
  document.getElementById('searchInput').addEventListener('input', (e) => {
    const text = e.target.value.trim();
    const content = document.getElementById('content');
    if (!text) {
      content.querySelectorAll('mark').forEach(m => m.replaceWith(m.textContent));
      return;
    }
    
    const regex = new RegExp(text, 'gi');
    content.innerHTML = content.innerHTML.replace(
      regex, 
      match => `<mark>${match}</mark>`
    );
  });
</script>

无障碍访问建议

1. ARIA属性补充：对于动态生成的高亮内容，建议添加aria-live="polite"：

   <mark aria-live="polite">HTML5</mark>
   

2. 颜色对比度：确保自定义背景色与文字颜色符合WCAG 2.1 AA标准（至少4.5:1）
3. 键盘导航：如果高亮内容可交互，需支持tabindex="0"

浏览器兼容性注意事项

所有现代浏览器均支持<mark>，但需注意：

• IE9+支持，但部分旧版本可能需要重置样式
• 打印时默认高亮背景可能不显示，需通过CSS打印样式修复：

  @media print {
    mark {
      background-color: yellow;
      color: black;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
  

高级应用：代码语法高亮

虽然通常使用专用库，但可通过<mark>实现简单关键词标记：

<pre><code>
function <mark>add</mark>(a, b) {
  return a + <mark>b</mark>;
}
</code></pre>

<style>
  pre mark {
    background-color: rgba(255, 235, 59, 0.3);
    border-bottom: 1px dashed #ffc107;
  }
</style>