高亮顯示 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>

將 CSS 應用到 <mark> 標記

許多瀏覽器會應用一些預設值來顯示 <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 次瀏覽

職業起步

完成課程以獲得認證

開始
廣告