這10個HTML標簽并非什么高深技術，都是原生自帶、無需額外引入插件，卻被90%的前端人忽略。每一個標簽都附帶具體代碼、使用場景和關鍵要點，新手也能快速上手，復制粘貼就能直接用到項目中。

1. mark標簽：高亮文本，不用再寫CSS

以前想高亮文本，還要專門寫CSS樣式控制背景色，步驟繁瑣還容易和其他樣式沖突。而mark標簽原生自帶高亮功能，一鍵就能實現文本強調，還能自由自定義樣式，省時又省心。

<p>搜索結果 for "coding": <mark>Coding</mark> is fun!</p>

關鍵要點：默認是黃色背景，可通過CSS自定義顏色；語義明確，屏幕閱讀器會識別為“高亮文本”，提升可訪問性；適合教程標注、搜索結果、文章重點突出等場景。

mark {
  background-color: #73ff3b; /* 自定義高亮背景色 */
  color: #333; /* 自定義文本顏色 */
}

2. details標簽：原生折疊面板，告別JavaScript

做FAQ、 spoilers提示或可選內容時，很多人會用JavaScript寫折疊/展開功能，既要寫腳本又要調交互，還容易出現兼容性問題。details標簽原生支持折疊面板，無需一行JS，瀏覽器自帶切換功能。

<details>
  <summary>FAQ: What is HTML?</summary>
  <p>HTML是網頁的標記語言，用于定義網頁的結構和內容。</p></details>

關鍵要點：無需JavaScript，原生支持折疊/展開；可通過CSS美化summary標簽（折疊面板標題）；支持鍵盤操作和屏幕閱讀器，適配無障礙需求；適合FAQ、 spoilers、可選說明等場景。

3. meter標簽：快速可視化數據，替代繁瑣進度條

需要展示評分、電池電量、配額使用情況等 scalar 數據時，很多人會自定義進度條，代碼冗余且視覺效果不一。meter標簽原生支持數據可視化，只需簡單設置屬性，就能生成美觀的計量儀表。

<meter min="0" max="100" value="75">75%</meter>

關鍵要點：支持min（最小值）、max（最大值）、value（當前值）、low（低值閾值）、high（高值閾值）、optimum（最佳值）等屬性；瀏覽器原生渲染，視覺統一；可通過CSS自定義樣式；適合評分、電池電量、配額顯示等場景。

4. progress標簽：任務進度展示，支持動態更新

文件上傳、任務加載等場景，需要展示進度條，很多人會用div模擬，還要寫JS動態更新寬度。progress標簽原生就是進度條，支持JS動態更新值，操作簡單且兼容性好。

<progress max="100" value="60">60%</progress>

關鍵要點：max屬性設置進度最大值，value屬性設置當前進度；可通過JavaScript動態更新value值；支持CSS自定義樣式；屏幕閱讀器會實時播報進度，無障礙友好；適合文件上傳、任務加載、流程進度等場景。

// 動態更新進度示例
document.querySelector('progress').value += 10;

5. time標簽：機器可讀日期，提升SEO和可訪問性

文章發布時間、活動時間等場景，很多人直接用文本寫日期，搜索引擎無法識別，屏幕閱讀器也無法正確解讀。time標簽能給日期賦予語義，讓機器和人都能清晰識別，還能提升SEO權重。

<p>活動時間：<time datetime="2025-08-10T20:00">2025年8月10日 20:00</time></p>

關鍵要點：datetime屬性設置機器可讀的日期時間格式（ISO 8601），文本內容可寫人類易讀的格式；搜索引擎能識別并抓取日期，提升文章相關性；屏幕閱讀器可正確播報日期；適合文章發布時間、活動時間、日程安排等場景。

6. ruby標簽：文本注音/注釋，適配多語言和教育場景

做multilingual內容、教育類內容（如漢字注音、外文注釋）時，很多人會用復雜的CSS布局實現注音效果，操作繁瑣且兼容性差。ruby標簽原生支持文本注音，結構清晰，適配多語言場景。

<ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>

關鍵要點：ruby標簽包裹需要注音的文本，rt標簽包裹注音內容；常見于東亞語言（中文、日語、韓語）的注音場景；屏幕閱讀器會同時播報文本和注音；適合教育類內容、multilingual網站、文化類文章等場景。

7. optgroup標簽：整理下拉選項，讓表單更易用

下拉選擇框（select）選項過多時，會顯得雜亂無章，用戶難以快速找到需要的選項。optgroup標簽能將下拉選項分組，結構清晰，提升表單易用性，無需額外寫CSS。

<select>
  <optgroup label="水果">
    <option>蘋果</option>
    <option>香蕉</option>
  </optgroup>
  <optgroup label="蔬菜">
    <option>胡蘿卜</option>
    <option>菠菜</option>
  </optgroup>
</select>

關鍵要點：label屬性設置分組名稱，每組選項包裹在optgroup標簽內；結構清晰，用戶可快速定位選項；可通過CSS自定義分組樣式；適合選項較多的下拉表單（如地區選擇、分類選擇等）。

8. wbr標簽：控制文本換行，解決長文本溢出問題

長URL、專業術語、外文長單詞等，在移動端顯示時容易溢出容器，破壞頁面布局。很多人會用CSS強制換行，卻容易導致文本錯亂。wbr標簽能指定文本的可選換行點，瀏覽器會根據容器寬度自動換行，不影響視覺效果。

<p>Super<wbr>califragilistic<wbr>expialidocious</p>

關鍵要點：wbr標簽是“可選換行點”，只有當文本超出容器寬度時，瀏覽器才會在此處換行；無視覺影響，不換行時和普通文本一致；無需CSS輔助，原生適配響應式布局；適合長URL、專業術語、外文長單詞等場景。

9. figure標簽：規范媒體布局，讓圖文更協調

插入圖片、圖表、代碼片段等媒體內容時，很多人會直接用img標簽，再用div包裹標題，結構混亂，語義不明確。figure標簽能將媒體內容和標題（figcaption）綁定，語義清晰，布局更規范。

<figure>
  <img src="photo.jpg" alt="自然風景">
  <figcaption>美麗的自然景觀</figcaption>
</figure>

關鍵要點：figure標簽包裹媒體內容（img、code等），figcaption標簽作為媒體標題；語義明確，搜索引擎能識別媒體與標題的關聯；可通過CSS統一控制媒體和標題的布局；適合圖片、圖表、代碼片段、引用內容等場景。

10. bdi標簽：處理混合方向文本，避免布局錯亂

做國際化網站、多語言評論區時，經常會遇到混合方向的文本（如英文中插入阿拉伯文、希伯來文），容易出現文本錯亂、排版異常的問題。bdi標簽能隔離不同方向的文本，確保排版正確。

<p>用戶：<bdi>????</bdi> 發布了英文內容。</p>

關鍵要點：bdi標簽隔離不同方向（LTR左到右、RTL右到左）的文本；避免混合方向文本導致的排版錯亂；屏幕閱讀器會正確識別文本方向；適合多語言網站、用戶評論區、國際化內容等場景。

辯證分析：這些冷門標簽，真的適合所有場景嗎？

不可否認，這10個冷門HTML標簽能極大提升前端開發效率，簡化代碼、提升可訪問性，是前端人必備的“效率神器”。但凡事沒有絕對，它們并非適合所有場景，盲目使用反而會適得其反。

一方面，這些標簽都是HTML原生標簽，兼容性較好（支持主流瀏覽器），但如果項目需要適配極其老舊的瀏覽器（如IE11及以下），部分標簽（如details、meter、progress）會出現兼容性問題，此時就需要搭配降級方案，反而增加了開發成本。比如details標簽在IE11中無法正常顯示，需要額外寫JS模擬折疊功能，這時就不如直接用傳統的CSS+JS方案更高效。

另一方面，語義化是這些標簽的核心優勢，但如果濫用，反而會破壞頁面的語義結構。比如mark標簽用于強調“相關內容”，如果隨便用它高亮文本，不僅會讓頁面視覺雜亂，還會讓屏幕閱讀器無法正確識別重點；optgroup標簽適合選項較多的下拉框，如果只有兩三個選項，強行分組反而會增加用戶操作成本。

更值得思考的是：前端開發的核心是“解決問題”，而不是“炫技”。很多人看到這些冷門標簽，就盲目跟風使用，哪怕簡單的div+CSS就能搞定的需求，也非要用冷門標簽，反而讓代碼變得晦澀難懂，后續維護困難。真正專業的前端人，會根據項目需求、兼容性要求、維護成本，選擇最合適的方案——冷門標簽好用，但不必強行使用。