高亮文本标签 - <mark>

什么是 <mark> 标签？

<mark> 是HTML5引入的语义化标签，用于定义需要突出显示或标记的文本。它通常用于在文本中标记搜索结果、引用中的重要部分或需要用户特别注意的内容。

基本语法

<mark>需要高亮的文本</mark>

典型用法

搜索结果高亮

<p>搜索结果：</p>
<p>这是一段包含 <mark>关键词</mark> 的文本，<mark>关键词</mark> 会被高亮显示。</p>

引用中的重点部分

<blockquote>
  <p>这是一段引用文本，其中 <mark>这部分内容</mark> 是需要特别注意的重点。</p>
  <footer>— 引用来源</footer>
</blockquote>

说明或注释

<p>在使用这个函数时，<mark>参数必须为正数</mark>，否则会返回错误。</p>

文档中的重要提示

<p>安装步骤：</p>
<ol>
  <li>下载安装包</li>
  <li><mark>确保系统满足最低要求</mark></li>
  <li>运行安装程序</li>
  <li>完成安装</li>
</ol>

与其他标签的区别

<mark> vs <strong>

• <mark> 用于视觉上突出显示文本，通常是临时的或上下文相关的
• <strong> 用于表示文本的重要性，具有更强的语义含义

<mark> vs <em>

• <mark> 用于视觉突出
• <em> 用于表示文本的强调，通常会影响语气

<mark> vs CSS 样式

• <mark> 提供了语义化的高亮表示
• CSS background-color 只是视觉样式，没有语义含义

全局属性

<mark> 标签支持所有HTML全局属性：

样式自定义

默认情况下，<mark> 标签会将文本背景设置为黄色。可以使用CSS自定义其样式：

mark {
  background-color: #ff9800;
  color: #fff;
  padding: 2px 4px;
  border-radius: 3px;
}

最佳实践

1. 语义化使用：仅在需要语义化高亮时使用 <mark>，不要仅仅为了视觉效果而使用

2. 适当使用：不要过度使用 <mark>，否则会失去其突出显示的效果

3. 提供上下文：确保高亮的文本在上下文中有明确的意义

4. 可访问性考虑：对于需要强调的内容，考虑结合使用 <strong> 或 <em> 等标签

浏览器兼容性

• Chrome 6+
• Firefox 4+
• Safari 5+
• Opera 11.1+
• IE 9+

总结

<mark> 标签是HTML5中一个有用的语义化标签，它提供了文本高亮的语义表示，有助于：

• 提高文本的可读性，突出重要内容
• 增强搜索结果的用户体验
• 改善文档的导航性，帮助用户快速找到关键信息
• 提供清晰的语义结构，便于未来的开发和维护