HTML5中的<mark>标签用于高亮文本

翻滚的胖子
2023-09-01 11:32:33
前端技术
HTML CSS JavaScript

HTML5中的标签是一种用于高亮文本的标签，它可以让特定的文本在页面中变得更加醒目。在本文中，我们将深入研究标签的用法和功能，并通过一些简单的代码示例来演示如何使用它。

什么是标签？

标签是HTML5中的一种新标签，它用于突出显示文本。通过将标签应用于特定的文本，您可以使这些文本在页面上更加显眼，从而吸引读者的注意力。

如何使用标签

要使用标签，只需在要高亮的文本周围包裹标签即可。例如：

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

在上面的代码中，我们将标签应用于“高亮文本”，这样该文本就会以不同的颜色或样式在页面上突出显示。

除了默认样式之外，您还可以通过CSS自定义标签的样式，使其适应您的页面设计。例如，您可以通过以下方式更改高亮文本的背景颜色：

mark {
    background-color: yellow;
}

在上面的代码中，我们使用CSS选择器“mark”来选择所有的标签，并将其背景颜色设置为黄色。

代码演示

下面是一个简单的示例，演示了如何使用标签高亮文本：

<!DOCTYPE html>
<html>
<head>
    <title>使用标签高亮文本</title>
    <style>
        mark {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h2>欢迎来到我的网站！</h2>
    <p>这是一段需要高亮的文本：<mark>这是需要高亮的文本</mark></p>
</body>
</html>

在上面的代码中，我们使用了标签将“这是需要高亮的文本”高亮显示，并使用CSS将其背景颜色设置为黄色。