语义化元素-mark标签-标记文本的样式-前端-HTML5-书闪BookChips

175 - 语义化元素 - mark标签 - 标记文本的样式

作者：

贺及楼

成为作者

更新日期：2025-02-27 13:25:01

语义化元素 - mark 标签 - 标记文本的样式

在 HTML5 的语义化元素大家庭中，mark 标签是一个十分实用且有趣的成员。它就像是一支高亮笔，能够帮助我们在文本中标记出那些需要特别关注的部分。下面，我们就来深入了解一下 mark 标签的相关知识。

1. `mark` 标签的基本概念

mark 标签是 HTML5 新增的语义化标签，其主要用途是标记或高亮显示文档中需要引起用户注意的文本。在默认情况下，浏览器会将 mark 标签内的文本背景颜色设置为黄色，这就如同我们用黄色高亮笔在纸质文档上标记重点内容一样。

2. 基本语法

mark 标签是一个行内元素，使用方式非常简单，只需要将需要标记的文本放在 <mark> 和 </mark> 标签之间即可。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mark 标签示例</title>
</head>
<body>
    <p>在 HTML 中，<mark>mark 标签</mark> 可以用来标记重要的文本内容。</p>
</body>
</html>

在上述代码中，“mark 标签” 被 <mark> 标签包裹，在浏览器中打开该页面，你会看到 “mark 标签” 的背景颜色变为黄色，以此来突出显示这部分文本。

3. 实际应用场景

3.1 搜索结果高亮

在搜索引擎的搜索结果页面中，经常会使用 mark 标签来高亮显示搜索关键词。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索结果高亮示例</title>
</head>
<body>
    <h1>搜索结果：HTML</h1>
    <p>HTML（<mark>HyperText Markup Language</mark>）是用于创建网页的标准标记语言。</p>
</body>
</html>

在这个示例中，搜索关键词 “HyperText Markup Language” 被 <mark> 标签标记，用户可以很容易地在搜索结果中找到相关关键词。

3.2 学习资料重点标记

在学习资料中，我们可以使用 mark 标签来标记重点知识。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习资料重点标记示例</title>
</head>
<body>
    <h2>JavaScript 基础知识</h2>
    <p>JavaScript 中有几种基本数据类型，包括 <mark>Number</mark>、<mark>String</mark>、<mark>Boolean</mark> 等。</p>
</body>
</html>

通过使用 mark 标签，我们可以将重点的基本数据类型突出显示，方便学习者快速抓住重点。

4. 自定义 `mark` 标签的样式

虽然浏览器默认将 mark 标签内的文本背景颜色设置为黄色，但我们可以通过 CSS 来自定义其样式。以下是一个自定义样式的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义 Mark 标签样式</title>
    <style>
        mark {
            background-color: lightgreen;
            color: black;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>这是一段包含 <mark>自定义样式标记</mark> 的文本。</p>
</body>
</html>

在上述代码中，我们通过 CSS 样式将 mark 标签的背景颜色设置为浅绿色，文字颜色设置为黑色，并将文字加粗。这样，标记的文本就会以我们自定义的样式显示。

5. `mark` 标签与其他标签的对比

标签	用途	示例
`mark`	标记需要引起用户注意的文本	`<p>这里有 <mark>重点内容</mark>。</p>`
`strong`	表示文本具有重要性，通常以加粗显示	`<p><strong>重要提示</strong>：请按时完成任务。</p>`
`em`	表示文本的强调语气，通常以斜体显示	`<p>你应该 <em>认真</em> 对待这个问题。</p>`

从对比中可以看出，mark 标签更侧重于视觉上的突出显示，而 strong 和 em 标签更侧重于语义上的强调。

总结

mark 标签是 HTML5 中一个非常实用的语义化元素，它为我们在文本中标记重点内容提供了便利。通过简单的使用方法和可自定义的样式，我们可以在各种场景下使用 mark 标签来吸引用户的注意力。无论是搜索结果高亮还是学习资料重点标记，mark 标签都能发挥出它的作用。希望大家在今后的前端开发中能够充分利用这个有趣的标签。