凸顯文字 <mark>
<mark>
凸顯文字元素可以在不套用 CSS 樣式的狀態下,將 HTML 的文字加上黃底,進行凸顯的效果,這篇教學會介紹 <mark>
凸顯文字元素。
認識 <mark>
HTML 的凸顯文字字元素分別是由 <mark>
標籤所構成的元素,只要是包裹在這標籤內的文字,都會自動套用「黃底黑字」的凸顯樣式。
<mark>
屬於「容器元素」,需要有「起始標籤」以及「結束標籤」,也因為是容器元素,裡頭可以放入其他的子元素。<mark>
的顯示類型為「inline 行內元素」,預設不會自動換行。
例如下方的 HTML 開啟後,會以 <mark>
凸顯部分的文字。
<p>
<mark>床前明月光</mark>,疑是地上霜,舉頭望明月,低頭思故鄉。
</p>
<p>
<mark>春眠不覺曉,處處聞啼鳥</mark>,夜來風雨聲,花落知多少。
</p>
<p>
<mark>千山鳥飛絕,萬徑人蹤滅,孤舟蓑笠翁</mark>,獨釣寒江雪。
</p>
<mark>
支援屬性
<mark>
支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」),例如下方的 HTML,會分別將三個 <mark>
加入不同的 style 屬性,讓三組凸顯文字呈現不同顏色。
<p>
<mark style="background:#f99;">床前明月光</mark>,疑是地上霜,舉頭望明月,低頭思故鄉。
</p>
<p>
<mark style="background:#99f;">春眠不覺曉,處處聞啼鳥</mark>,夜來風雨聲,花落知多少。
</p>
<p>
<mark>千山鳥飛絕,萬徑人蹤滅,孤舟蓑笠翁</mark>,獨釣寒江雪。
</p>
<mark>
預設樣式
下方是 <mark>
的預設樣式:
mark {
background-color: yellow;
color: black;
}
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~