<mark>-高亮文本

<mark> 是 HTML5 新增的一个语义化标签，用于高亮显示文本内容。它通常用于标记文档中需要特别强调或与用户当前操作相关的部分。浏览器默认会为 <mark> 标签内的文本添加黄色背景，但可以通过 CSS 自定义样式。

<mark> 标签的基本用法

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

<p>这是一段普通的文本，其中包含<mark>高亮显示</mark>的内容。</p>

渲染效果如下：

这是一段普通的文本，其中包含<mark>高亮显示</mark>的内容。

<mark> 的语义化意义

<mark> 不仅仅是一个样式标签，它还具有语义化含义。它表示文档中与用户当前活动或搜索相关的部分。例如：

<p>在搜索结果中，您查找的关键词<mark>HTML5</mark>被高亮显示。</p>

自定义 <mark> 样式

虽然浏览器默认使用黄色背景，但我们可以通过 CSS 完全自定义其外观：

mark {
  background-color: #ffeb3b; /* 浅黄色 */
  color: #333;
  padding: 0.2em;
  border-radius: 3px;
}

mark.important {
  background-color: #f44336; /* 红色 */
  color: white;
}

mark.highlight {
  background-color: #4caf50; /* 绿色 */
  color: white;
}

使用示例：

<p>这是<mark>默认</mark>高亮，这是<mark class="important">重要</mark>内容，这是<mark class="highlight">突出</mark>显示。</p>

<mark> 的实际应用场景

1. 搜索关键词高亮

<script>
function highlightText() {
  const searchTerm = document.getElementById('search').value;
  const content = document.getElementById('content');
  const regex = new RegExp(searchTerm, 'gi');
  content.innerHTML = content.textContent.replace(regex, match => `<mark>${match}</mark>`);
}
</script>

<input type="text" id="search" placeholder="输入搜索词">
<button onclick="highlightText()">高亮</button>

<div id="content">
  这是一段示例文本，用于演示搜索高亮功能。当用户输入搜索词时，相关文本会被高亮显示。
</div>

2. 文档批注系统

<div contenteditable="true" id="editable">
  <p>这是一个可编辑的文档区域，您可以选中文本并点击按钮添加高亮批注。</p>
</div>

<button onclick="highlightSelection()">添加高亮批注</button>

<script>
function highlightSelection() {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const mark = document.createElement('mark');
    range.surroundContents(mark);
  }
}
</script>

3. 代码审查中的重点标记

<pre><code>
function calculateTotal(items) {
  let total = 0;
  <mark>// 这里可能存在数值精度问题</mark>
  for (let item of items) {
    total += item.price * item.quantity;
  }
  return total;
}
</code></pre>

<mark> 与其他类似标签的区别

HTML 中有几个标签在视觉上可能产生类似效果，但语义不同：

1. <strong> - 表示重要性，通常加粗显示
2. <em> - 表示强调，通常斜体显示
3. <b> - 仅视觉上加粗，无特定语义
4. <i> - 仅视觉上斜体，无特定语义

相比之下，<mark> 专门用于表示相关性或引用高亮。

响应式设计中的 <mark> 处理

在移动设备上，可能需要调整高亮样式以提高可读性：

@media (max-width: 768px) {
  mark {
    padding: 0.1em;
    font-size: 1.1em;
  }
}

无障碍访问考虑

虽然 <mark> 提供了视觉提示，但对于屏幕阅读器用户，可能需要额外说明：

<p>搜索结果：<mark aria-label="高亮显示的关键词">HTML5</mark>相关文档</p>

或者使用 role="note" 来表明这是一个注释：

<p>年度报告显示<mark role="note">销售额增长了15%</mark>，这是重大突破。</p>

<mark> 在表单验证中的应用

<form id="signup">
  <label for="username">用户名：</label>
  <input type="text" id="username" required>
  <div id="username-hints" hidden>
    建议：<mark>使用字母和数字组合</mark>，<mark>长度6-20个字符</mark>
  </div>
</form>

<script>
document.getElementById('username').addEventListener('focus', function() {
  document.getElementById('username-hints').hidden = false;
});
</script>

动态内容中的 <mark> 使用

结合 JavaScript 可以创建动态高亮效果：

<div id="live-text">
  实时文本内容会在这里动态更新，关键词会被自动高亮。
</div>

<script>
const keywords = ['动态', '高亮', '内容'];
const liveText = document.getElementById('live-text');

function updateLiveText() {
  let text = "这是最新的动态内容更新，包含需要高亮显示的关键词。";
  
  keywords.forEach(keyword => {
    const regex = new RegExp(keyword, 'g');
    text = text.replace(regex, `<mark>${keyword}</mark>`);
  });
  
  liveText.innerHTML = text;
}

setInterval(updateLiveText, 3000);
</script>

<mark> 在打印样式中的处理

可以专门为打印媒体设置不同的高亮样式：

@media print {
  mark {
    background-color: transparent;
    color: black;
    text-decoration: underline;
    font-weight: bold;
  }
}

性能考虑

大规模使用 <mark> 时需要注意：

1. 避免在大型文档中高亮过多文本
2. 动态高亮时考虑使用防抖(debounce)技术
3. 对于静态内容，最好在服务器端完成高亮处理

// 使用防抖优化搜索高亮
function debounce(func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, wait);
  };
}

document.getElementById('search').addEventListener('input', 
  debounce(highlightText, 300)
);

<mark> 与其他技术的结合

与 Vue.js 结合

<div id="app">
  <input v-model="searchTerm" placeholder="搜索...">
  <p v-html="highlightedText"></p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref, computed } = Vue;

createApp({
  setup() {
    const searchTerm = ref('');
    const originalText = '这是一个演示Vue高亮功能的文本示例';
    
    const highlightedText = computed(() => {
      if (!searchTerm.value) return originalText;
      const regex = new RegExp(searchTerm.value, 'gi');
      return originalText.replace(regex, match => `<mark>${match}</mark>`);
    });
    
    return { searchTerm, highlightedText };
  }
}).mount('#app');
</script>

与 React 结合

import { useState } from 'react';

function Highlighter() {
  const [searchTerm, setSearchTerm] = useState('');
  const text = '这是一个演示React高亮功能的文本示例';
  
  const highlightedText = () => {
    if (!searchTerm) return text;
    const parts = text.split(new RegExp(`(${searchTerm})`, 'gi'));
    return parts.map((part, i) => 
      part.toLowerCase() === searchTerm.toLowerCase() 
        ? <mark key={i}>{part}</mark> 
        : part
    );
  };
  
  return (
    <div>
      <input 
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="搜索..."
      />
      <p>{highlightedText()}</p>
    </div>
  );
}

<mark> 的嵌套使用

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

<p>
  这是<mark><strong>重要且需要高亮</strong></mark>的内容，
  也可以<mark><a href="#"><em>高亮链接</em></a></mark>。
</p>

浏览器兼容性

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

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

对于不支持 <mark> 的旧版浏览器，可以通过以下方式提供回退：

mark {
  background-color: yellow;
  color: black;
}

/* 对于不支持 mark 的 IE8 */
article mark, section mark {
  background-color: yellow;
  color: black;
}

<mark> 在技术文档中的最佳实践

1. 适度使用，避免过度高亮导致重点不突出
2. 保持高亮风格一致
3. 考虑色盲用户的可视性
4. 为编程代码中的高亮添加说明

<pre>
<code>
// <mark>安全警告</mark>: 以下代码需要输入验证
function processInput(input) {
  return eval(input); // <mark>避免使用eval</mark>
}
</code>
</pre>

<mark> 在在线教育平台的应用

<div class="quiz-question">
  <p>问题：以下哪个标签用于<mark>语义化高亮</mark>文本？</p>
  <ul>
    <li><code>&lt;b&gt;</code></li>
    <li><code>&lt;strong&gt;</code></li>
    <li><code>&lt;mark&gt;</code></li>
    <li><code>&lt;highlight&gt;</code></li>
  </ul>
  <p><mark>提示</mark>: HTML5新增的语义化标签。</p>
</div>

<mark> 与文本选择交互

可以通过 JavaScript 增强 <mark> 的交互性：

<p id="interactive-text">
  这段文本中的<mark data-info="这是额外信息">高亮部分</mark>可以交互。
</p>

<script>
document.querySelectorAll('mark[data-info]').forEach(mark => {
  mark.addEventListener('click', function() {
    alert(this.dataset.info);
  });
  mark.style.cursor = 'pointer';
});
</script>

<mark> 在数据分析可视化中的应用

<div class="data-analysis">
  <p>年度销售趋势：</p>
  <ul>
    <li>第一季度: $120,000</li>
    <li>第二季度: $145,000 <mark>(+20.8%)</mark></li>
    <li>第三季度: $98,000 <mark>(-32.4%)</mark></li>
    <li>第四季度: $210,000 <mark>(+114.3%)</mark></li>
  </ul>
</div>

<mark> 的动画效果

可以为 <mark> 添加动画吸引注意力：

@keyframes pulse {
  0% { background-color: #fff176; }
  50% { background-color: #ffd54f; }
  100% { background-color: #fff176; }
}

mark.animated {
  animation: pulse 1.5s infinite;
}

<p>请注意这个<mark class="animated">动画高亮</mark>效果。</p>

<mark> 在对比分析中的使用

<table>
  <tr>
    <th>特性</th>
    <th>HTML4</th>
    <th>HTML5</th>
  </tr>
  <tr>
    <td>高亮标签</td>
    <td>无专门标签</td>
    <td><mark>&lt;mark&gt;</mark></td>
  </tr>
  <tr>
    <td>语义化</td>
    <td>有限</td>
    <td><mark>增强</mark></td>
  </tr>
</table>

<mark> 的多语言支持

在不同语言环境下，高亮可能需要调整：

<p lang="en">This is <mark>highlighted</mark> text.</p>
<p lang="zh">这是<mark>高亮</mark>文本。</p>
<p lang="ja">これは<mark>ハイライト</mark>されたテキストです。</p>

<style>
:lang(ja) mark {
  background-color: #ffcdd2; /* 日文使用不同高亮色 */
}
</style>

<mark> 在代码文档中的高级应用

<div class="api-docs">
  <h3>highlightText(text, keywords)</h3>
  <p>
    功能: <mark>高亮显示</mark>文本中的关键词
    <mark class="param">参数</mark>:
    <mark>text</mark> - 要处理的字符串
    <mark>keywords</mark> - 关键词数组
    <mark class="return">返回</mark>: 处理后的HTML字符串
  </p>
</div>

<style>
.api-docs mark.param { background-color: #bbdefb; }
.api-docs mark.return { background-color: #c8e6c9; }
</style>