# HTML5中mark怎么用
HTML5引入了許多語義化標簽來增強網頁內容的可讀性和結構化，`<mark>`標簽便是其中之一。它主要用于高亮顯示文本中的特定部分，類似于我們在紙質書上用熒光筆標記重點的效果。本文將詳細介紹`<mark>`標簽的用法、應用場景及實際示例。
## 一、mark標簽的基本語法
`<mark>`是HTML5新增的語義化內聯元素，使用方式非常簡單：
```html
<p>這是一段包含<mark>高亮內容</mark>的文本。</p>
默認情況下，瀏覽器會為<mark>內容添加黃色背景（具體樣式因瀏覽器而異），開發者可以通過CSS自定義樣式。
當用戶在頁面內搜索時，可以用<mark>動態標記匹配項：
// 搜索高亮示例
function highlightText(keyword) {
const content = document.getElementById('content');
content.innerHTML = content.innerText.replace(
new RegExp(keyword, 'gi'),
match => `<mark>${match}</mark>`
);
}
適合標記文檔中的重點知識或術語：
<article>
<h2>光合作用</h2>
<p>植物通過<mark>葉綠素</mark>吸收光能，將二氧化碳和水轉化為有機物。</p>
</article>
在比較兩個版本時，可以用不同顏色的<mark>區分變化：
<p>原句：HTML4沒有語義化標簽</p>
<p>修改后：<mark style="background: lightgreen">HTML5</mark>新增了語義化標簽</p>
默認黃色背景可能不符合設計需求，可以通過CSS修改：
/* 基礎樣式 */
mark {
background-color: #ffeb3b; /* 默認黃色 */
color: black;
padding: 0.2em;
}
/* 深色模式適配 */
@media (prefers-color-scheme: dark) {
mark {
background-color: #fdd835;
color: #212121;
}
}
/* 特殊場景樣式 */
mark.important {
background: linear-gradient(120deg, #ff0 0%, #f80 100%);
}
<mark>內容，但過度使用可能適得其反<!DOCTYPE html>
<html>
<head>
<style>
mark {
background: rgba(255,255,0,0.5);
border-radius: 3px;
box-shadow: 0 0 2px #ccc;
}
mark.red {
background: #ffcdd2;
}
</style>
</head>
<body>
<h1>會議紀要</h1>
<p>本次項目<mark>截止日期</mark>調整為<mark class="red">12月15日</mark>，請各部門注意進度安排。</p>
<script>
// 自動高亮長單詞
document.querySelectorAll('p').forEach(p => {
p.innerHTML = p.innerHTML.replace(/\b[\w]{8,}\b/g, '<mark>$&</mark>');
});
</script>
</body>
</html>
結合JavaScript可以實現更動態的效果：
// 隨機高亮段落中的20%文字
document.addEventListener('DOMContentLoaded', () => {
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => {
const words = p.innerText.split(' ');
p.innerHTML = words.map(word =>
Math.random() < 0.2 ? `<mark>${word}</mark>` : word
).join(' ');
});
});
通過合理使用<mark>標簽，可以顯著提升內容的可讀性和交互性。記住要始終以增強用戶體驗為目標，而非單純追求視覺效果。
“`
這篇文章包含了： 1. 基礎語法說明 2. 主要使用場景 3. 樣式自定義方法 4. 使用注意事項 5. 完整代碼示例 6. 擴展應用建議 總字數約750字，采用Markdown格式，可以直接用于技術博客或文檔。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
