<mark>-高亮文本

<mark> 标签是 HTML5 中新增的一个语义化标签，用于高亮显示文本内容。它通常用于标记文档中需要特别强调或突出的部分，比如搜索结果中的关键词匹配、用户标注的重点内容等。浏览器默认会为 <mark> 标签内的文本添加黄色背景，但样式可以通过 CSS 自定义。

<mark> 标签的基本用法

<mark> 标签的使用非常简单，只需将需要高亮的文本包裹在 <mark> 和 </mark> 之间即可。例如：

<p>这是一段普通的文本，其中包含一个<mark>高亮</mark>的词语。</p>

渲染效果如下：

这是一段普通的文本，其中包含一个<mark>高亮</mark>的词语。

<mark> 标签的语义化意义

<mark> 标签不仅仅是一个样式标签，它还具有语义化的意义。它告诉浏览器和搜索引擎，这部分文本在当前上下文中具有特殊的重要性或相关性。这与 <strong>（表示重要性）和 <em>（表示强调）有所不同。

例如，在搜索结果页面中，匹配的关键词可以用 <mark> 标签高亮：

<p>搜索结果：关于<mark>HTML5</mark>的最新特性介绍。</p>

自定义 <mark> 标签的样式

虽然浏览器默认会为 <mark> 标签添加黄色背景，但我们可以通过 CSS 完全自定义它的外观。例如：

<style>
  mark {
    background-color: #ffeb3b; /* 明亮的黄色 */
    color: #333;
    padding: 0.2em;
    border-radius: 3px;
  }

  mark.important {
    background-color: #ff5722; /* 橙色 */
    color: white;
    font-weight: bold;
  }
</style>

<p>这是<mark>默认样式</mark>的高亮文本。</p>
<p>这是<mark class="important">自定义样式</mark>的高亮文本。</p>

渲染效果：

这是<mark>默认样式</mark>的高亮文本。 这是<mark class="important" style="background-color: #ff5722; color: white; font-weight: bold;">自定义样式</mark>的高亮文本。

<mark> 标签的实际应用场景

1. 搜索关键词高亮

在搜索功能中，<mark> 标签非常适合用来高亮显示搜索关键词：

<h3>搜索结果</h3>
<ul>
  <li>关于<mark>JavaScript</mark>闭包的详细解释</li>
  <li><mark>JavaScript</mark>中的原型链机制</li>
  <li>比较<mark>JavaScript</mark>和TypeScript的差异</li>
</ul>

2. 教育内容中的重点标注

在线教育平台可以用 <mark> 标注课程重点：

<div class="lecture-content">
  <p>在CSS中，<mark>盒模型</mark>是最基础也是最重要的概念之一。它由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。</p>
</div>

3. 法律文档中的条款突出

<article>
  <h4>用户协议</h4>
  <p>用户不得<mark>反向工程</mark>、<mark>反编译</mark>或<mark>反汇编</mark>本软件的任何部分。</p>
</article>

<mark> 与其他高亮方式的比较

与 <span> + CSS 的比较

虽然可以使用 <span> 加 CSS 实现类似效果，但 <mark> 更具语义化：

<!-- 使用span实现 -->
<p>这是<span style="background-color: yellow">span实现</span>的高亮</p>

<!-- 使用mark实现 -->
<p>这是<mark>mark实现</mark>的高亮</p>

与 <strong> 和 <em> 的比较

• <strong>：表示内容的重要性
• <em>：表示语调上的强调
• <mark>：表示相关性或参考性的高亮

<p><strong>警告：</strong>操作<em>不可逆</em>，请<mark>谨慎</mark>执行。</p>

<mark> 标签的浏览器兼容性

<mark> 标签在现代浏览器中得到了广泛支持，包括：

• Chrome 6+
• Firefox 4+
• Safari 5+
• Opera 11.1+
• Edge 12+
• Internet Explorer 9+

对于不支持的旧版浏览器（主要是IE8及以下），可以通过以下方式提供兼容：

<style>
  mark {
    background-color: yellow;
    color: black;
  }
</style>
<!--[if lt IE 9]>
<script>
  document.createElement('mark');
</script>
<![endif]-->

<mark> 标签的JavaScript交互

我们可以通过JavaScript动态添加或移除 <mark> 高亮。例如，实现一个文本高亮工具：

<textarea id="textInput" rows="4" cols="50">
这是一个示例文本，可以在其中高亮特定的词语。
</textarea>
<br>
<input type="text" id="highlightText" placeholder="输入要高亮的文本">
<button onclick="highlight()">高亮</button>
<button onclick="clearHighlight()">清除</button>

<script>
  function highlight() {
    const text = document.getElementById('textInput').value;
    const highlightText = document.getElementById('highlightText').value;
    if (!highlightText) return;
    
    const regex = new RegExp(highlightText, 'gi');
    const highlighted = text.replace(regex, match => `<mark>${match}</mark>`);
    document.getElementById('textInput').value = highlighted;
  }
  
  function clearHighlight() {
    const text = document.getElementById('textInput').value;
    const unhighlighted = text.replace(/<\/?mark>/g, '');
    document.getElementById('textInput').value = unhighlighted;
  }
</script>

<mark> 标签的可访问性考虑

虽然 <mark> 标签本身具有语义，但对于屏幕阅读器等辅助技术，可能需要额外说明。可以通过 aria-label 提供更多信息：

<p>最新研究表明，<mark aria-label="重要发现">咖啡因</mark>对认知能力有显著影响。</p>

<mark> 标签的打印样式

在打印页面时，可能需要调整 <mark> 的样式以确保可读性：

@media print {
  mark {
    background-color: transparent;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: yellow;
    text-decoration-thickness: 0.2em;
  }
}

<mark> 标签的嵌套使用

<mark> 标签可以与其他内联元素嵌套使用：

<p>这是<mark><strong>既高亮又重要</strong></mark>的文本。</p>
<p>这是<mark><em>既高亮又强调</em></mark>的文本。</p>
<p>这是<mark><a href="#">可点击的高亮链接</a></mark>。</p>

<mark> 标签的动画效果

可以通过CSS为 <mark> 添加动画效果，使其更加醒目：

<style>
  mark.pulse {
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% { background-color: #ffeb3b; }
    50% { background-color: #ffc107; }
    100% { background-color: #ffeb3b; }
  }
</style>

<p>请注意这个<mark class="pulse">闪烁的</mark>重要提示。</p>

<mark> 标签在表单中的应用

可以在表单验证中使用 <mark> 高亮错误字段：

<form>
  <label for="email">邮箱：</label>
  <input type="email" id="email" required>
  <button type="submit">提交</button>
</form>

<script>
  document.querySelector('form').addEventListener('submit', function(e) {
    const email = document.getElementById('email');
    if (!email.validity.valid) {
      e.preventDefault();
      email.style.border = '2px solid red';
      const label = document.querySelector('label[for="email"]');
      label.innerHTML = label.innerHTML.replace('邮箱：', '<mark>邮箱：</mark>');
    }
  });
</script>

<mark> 标签的SEO影响

从SEO角度来看，<mark> 标签不会直接影响排名，但它可以帮助搜索引擎理解页面内容的重点部分。合理使用 <mark> 可以：

1. 突出显示与搜索查询相关的内容
2. 标记文档中的关键信息
3. 增强内容的可读性和用户体验

<mark> 标签的创意用法

1. 渐进式高亮

<style>
  mark.fade-in {
    background-color: rgba(255, 235, 59, 0);
    animation: fadeIn 2s forwards;
  }
  
  @keyframes fadeIn {
    to { background-color: rgba(255, 235, 59, 1); }
  }
</style>

<p>阅读时<mark class="fade-in">逐步高亮</mark>的关键内容。</p>

2. 多色高亮系统

<style>
  mark.yellow { background-color: #fff176; }
  mark.blue { background-color: #81d4fa; }
  mark.green { background-color: #a5d6a7; }
  mark.pink { background-color: #f8bbd0; }
</style>

<p>可以使用不同颜色<mark class="yellow">分类</mark>标记<mark class="blue">不同</mark>类型的<mark class="green">重点</mark>内容，就像<mark class="pink">荧光笔</mark>一样。</p>

3. 高亮笔记系统

<div class="note">
  <p>会议记录：</p>
  <ul>
    <li><mark data-note="重要">项目截止日期提前到周五</mark></li>
    <li><mark data-note="疑问">预算是否需要调整？</mark></li>
    <li><mark data-note="行动项">联系设计团队获取新素材</mark></li>
  </ul>
</div>

<style>
  mark[data-note="重要"] { background-color: #ffcdd2; }
  mark[data-note="疑问"] { background-color: #bbdefb; }
  mark[data-note="行动项"] { background-color: #c8e6c9; }
  
  mark::after {
    content: attr(data-note);
    font-size: 0.7em;
    vertical-align: super;
    margin-left: 0.3em;
    color: #666;
  }
</style>