为参考目的突出显示 HTML 内容


<mark> 标记用于标记或突出显示 HTML 中的文本。它是 HTML5 中使用的新标记之一。

  • 它支持全局和事件属性。

  • 我们还可以在语句之间包含 <mark> 标记,如下所示 −

<p>I play with <mark> Coding</mark> </p>

语法

以下是 HTML 文档中 <mark> 标记的语法 −

<mark> Contents... </mark>

示例

在以下 HTML 示例中,我们尝试打印一些文本并使用 HTML 中的 <mark> 标记将其突出显示 -

<!DOCTYPE html>
<html>
<body>
   <h1 style="color: blue;">TutorialsPoint</h1>
   <h2>Using Mark Tags</h2>
   <p>
      <mark>TutorialsPoint:</mark> is a leading <mark>Ed Tech company</mark> Where all computer related Courses are provided.
   </p>
</body>
</html>

向 <mark> 标记应用 CSS

许多浏览器通过应用一些默认值来显示 <mark> 元素。

语法

以下是 HTML 中样式的语法 −

mark { 
   background-color: orange;
   color: black;
}

示例

在这个示例中,我们尝试使用 CSS 在文档中标记内容 −

<!DOCTYPE html>
<html>
<head>
   <style>
      mark {
         background-color: orange;
         color: black;
      }
   </style>
</head>
<body>
   <p>A mark Display's Like This:</p>
   <mark>TutorialsPoint:</mark> is a leading <mark>Ed Tech company</mark>
   <p>Where all computer related Courses are provided.</p>
   <p>TO see effects, <mark>change the default CSS settings.</mark></p>
</body>
</html>

示例

以下是另一个示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      mark.orange {
         background-color: orange;
         color: white;
      }

      mark.pink {
         background-color: pink;
      }

      mark.lime {
         background-color: lime;
      }
   </style>
</head>
<body>
   <p>A mark Display's Like This:</p>
   <mark class="pink">TutorialsPoint:</mark> is a leading <mark class="orange">Ed Tech company</mark>
   <p>Where all computer related Courses are provided.</p>
   <p>TO see effects, <mark class="lime">change the default CSS settings</mark>. </p>
</body>
</html>

更新日期:2023-10-10

250 浏览量

开始你的 职业生涯

完成课程即可获得认证

开始操作
广告