如何使用 HTML5 的 mark 标签高亮显示文本？

推荐答案

使用 <mark> 标签可以将文本高亮显示。例如：

<p>这是一段包含 <mark>需要高亮</mark> 的文本。</p>

这将使得 "需要高亮" 这几个字以浏览器默认的高亮样式显示（通常是黄色背景）。

本题详细解读

mark 标签的作用

mark 标签是 HTML5 中引入的语义化标签，主要用于在 HTML 文档中标记或突出显示与当前上下文相关的文本。它的作用是让用户更容易注意到文档中重要的部分，例如搜索结果中的关键词，或者文章中的关键信息。

默认样式和自定义样式

• 默认样式: 浏览器通常会使用黄色背景色和黑色文字来显示 mark 标签内的文本，但这可能会因浏览器和用户配置而异。

• 自定义样式: 你可以使用 CSS 来自定义 mark 标签的样式，例如更改背景颜色、文字颜色、字体大小等。

  <style>
      mark {
        background-color: lightblue;
        color: black;
        font-weight: bold;
      }
  </style>
  <p>这是一段包含 <mark>需要高亮</mark> 的文本。</p>

  在这个例子中， mark 标签的背景颜色被设置为浅蓝色，文字颜色为黑色，并且使用了粗体。

语义化考虑

虽然可以使用其他方式实现文本高亮，例如使用 span 标签并添加 CSS 样式，但 mark 标签的优势在于其语义化。它明确告诉浏览器和搜索引擎该文本在上下文中是需要突出显示的，有助于提高页面的可访问性和搜索引擎优化（SEO）。

与其他高亮方式的区别

• strong 和 em 标签: strong 标签用于强调文本的重要性，而 em 标签用于强调文本的语气或重点。它们虽然也会在视觉上有所变化（strong 通常会加粗，em 通常会倾斜），但它们的含义和 mark 标签不同。

• 使用 span 和 CSS: 虽然使用 span 标签并添加 CSS 样式也可以实现高亮效果，但 mark 标签具有明确的语义，能更准确地表达文本高亮的目的。

最佳实践

• 合理使用: 不要过度使用 mark 标签，只在你认为确实需要突出显示的文本上使用。
• 考虑用户体验: 确保高亮颜色与背景颜色有足够的对比度，以便用户能够轻松阅读。
• 使用语义化的标签: 尽量使用 mark 标签来表示高亮，而不是使用 span 标签并添加样式。