HTML 高亮文本

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在 HTML 中,<mark> 标签用于高亮或标记文本的一部分,以显示文本的重要性。在本实验中,我们将学习如何使用 <mark> 标签来创建高亮文本。

注意:你可以在 index.html 中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。



Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70796{{"`HTML 高亮文本`"}} html/head_elems -.-> lab-70796{{"`HTML 高亮文本`"}} html/lang_decl -.-> lab-70796{{"`HTML 高亮文本`"}} html/text_head -.-> lab-70796{{"`HTML 高亮文本`"}} html/para_br -.-> lab-70796{{"`HTML 高亮文本`"}} html/layout -.-> lab-70796{{"`HTML 高亮文本`"}} html/inter_elems -.-> lab-70796{{"`HTML 高亮文本`"}} end

设置 HTML 文件

首先,创建一个 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>

添加 CSS 样式以更改默认颜色

默认情况下,高亮文本的背景颜色为黄色,文本颜色为黑色。你可以通过为 <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 样式,你可以轻松地吸引读者注意文本中的重要部分。

您可能感兴趣的其他 HTML 教程