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