高亮显示 HTML 内容以供参考

htmlweb developmentfront end technology更新于 2024/7/25 8:12:17

 标签用于标记或高亮显示 HTML 中的文本。它是 HTML5 中新增的标签之一。

它支持全局属性和事件属性。
我们也可以在语句之间添加  标签，例如 −

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

语法

以下是 HTML 文档中  标签的语法 −

<mark> Contents... </mark>

示例

在下面的 HTML 示例中，我们尝试使用 HTML 中的  标签打印并突出显示一些文本 -

<!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>

将 CSS 应用于 标签

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

语法

以下是 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>