介绍
在 HTML 中,<mark>
标签用于高亮或标记文本的一部分,以显示文本的重要性。在本实验中,我们将学习如何使用 <mark>
标签来创建高亮文本。
注意:你可以在
index.html
中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
在 HTML 中,<mark>
标签用于高亮或标记文本的一部分,以显示文本的重要性。在本实验中,我们将学习如何使用 <mark>
标签来创建高亮文本。
注意:你可以在
index.html
中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
首先,创建一个 index.html
文件并设置 HTML 文件的基本结构。插入以下代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Highlighted Text with Mark Tag</title>
</head>
<body></body>
</html>
在 <body>
标签之间添加一些文本。在这个例子中,我们将高亮句子中的文本 "Brown fox"。
<body>
<p>The quick <mark>brown fox</mark> jumped over the lazy dog.</p>
</body>
默认情况下,高亮文本的背景颜色为黄色,文本颜色为黑色。你可以通过为 <mark>
标签添加 CSS 来更改这些颜色。例如,要将高亮背景颜色更改为红色,文本颜色更改为白色,可以添加以下 CSS 样式:
<style>
mark {
background-color: red;
color: white;
}
</style>
如果你在页面中有多个高亮文本实例,并且希望以相同的方式为它们设置样式,可以为 <mark>
标签添加一个类,并使用 CSS 类选择器进行样式设置。在以下示例中,我们将为 <mark>
标签添加一个名为 highlight
的类,然后使用 CSS 对其进行样式设置。
<body>
<p>
The quick <mark class="highlight">brown fox</mark> jumped over the lazy dog.
</p>
<p>The <mark class="highlight">sun</mark> is a star.</p>
</body>
<style>
.highlight {
background-color: green;
color: white;
}
</style>
就是这样!你已经学会了如何在 HTML 中使用 <mark>
标签创建高亮文本。通过使用 <mark>
标签和一些 CSS 样式,你可以轻松地吸引读者注意文本中的重要部分。