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

1. mark標(biāo)簽：高亮文本，不用再寫CSS

以前想高亮文本，還要專門寫CSS樣式控制背景色，步驟繁瑣還容易和其他樣式?jīng)_突。而mark標(biāo)簽原生自帶高亮功能，一鍵就能實(shí)現(xiàn)文本強(qiáng)調(diào)，還能自由自定義樣式，省時(shí)又省心。

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

關(guān)鍵要點(diǎn)：默認(rèn)是黃色背景，可通過CSS自定義顏色；語義明確，屏幕閱讀器會(huì)識(shí)別為“高亮文本”，提升可訪問性；適合教程標(biāo)注、搜索結(jié)果、文章重點(diǎn)突出等場(chǎng)景。

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

2. details標(biāo)簽：原生折疊面板，告別JavaScript

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

<details>
  <summary>FAQ: What is HTML?</summary>
  <p>HTML是網(wǎng)頁的標(biāo)記語言，用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。</p></details>

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

3. meter標(biāo)簽：快速可視化數(shù)據(jù)，替代繁瑣進(jìn)度條

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

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

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

4. progress標(biāo)簽：任務(wù)進(jìn)度展示，支持動(dòng)態(tài)更新

文件上傳、任務(wù)加載等場(chǎng)景，需要展示進(jìn)度條，很多人會(huì)用div模擬，還要寫JS動(dòng)態(tài)更新寬度。progress標(biāo)簽原生就是進(jìn)度條，支持JS動(dòng)態(tài)更新值，操作簡單且兼容性好。

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

關(guān)鍵要點(diǎn)：max屬性設(shè)置進(jìn)度最大值，value屬性設(shè)置當(dāng)前進(jìn)度；可通過JavaScript動(dòng)態(tài)更新value值；支持CSS自定義樣式；屏幕閱讀器會(huì)實(shí)時(shí)播報(bào)進(jìn)度，無障礙友好；適合文件上傳、任務(wù)加載、流程進(jìn)度等場(chǎng)景。

// 動(dòng)態(tài)更新進(jìn)度示例
document.querySelector('progress').value += 10;

5. time標(biāo)簽：機(jī)器可讀日期，提升SEO和可訪問性

文章發(fā)布時(shí)間、活動(dòng)時(shí)間等場(chǎng)景，很多人直接用文本寫日期，搜索引擎無法識(shí)別，屏幕閱讀器也無法正確解讀。time標(biāo)簽?zāi)芙o日期賦予語義，讓機(jī)器和人都能清晰識(shí)別，還能提升SEO權(quán)重。

<p>活動(dòng)時(shí)間：<time datetime="2025-08-10T20:00">2025年8月10日 20:00</time></p>

關(guān)鍵要點(diǎn)：datetime屬性設(shè)置機(jī)器可讀的日期時(shí)間格式（ISO 8601），文本內(nèi)容可寫人類易讀的格式；搜索引擎能識(shí)別并抓取日期，提升文章相關(guān)性；屏幕閱讀器可正確播報(bào)日期；適合文章發(fā)布時(shí)間、活動(dòng)時(shí)間、日程安排等場(chǎng)景。

6. ruby標(biāo)簽：文本注音/注釋，適配多語言和教育場(chǎng)景

做multilingual內(nèi)容、教育類內(nèi)容（如漢字注音、外文注釋）時(shí)，很多人會(huì)用復(fù)雜的CSS布局實(shí)現(xiàn)注音效果，操作繁瑣且兼容性差。ruby標(biāo)簽原生支持文本注音，結(jié)構(gòu)清晰，適配多語言場(chǎng)景。

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

關(guān)鍵要點(diǎn)：ruby標(biāo)簽包裹需要注音的文本，rt標(biāo)簽包裹注音內(nèi)容；常見于東亞語言（中文、日語、韓語）的注音場(chǎng)景；屏幕閱讀器會(huì)同時(shí)播報(bào)文本和注音；適合教育類內(nèi)容、multilingual網(wǎng)站、文化類文章等場(chǎng)景。

7. optgroup標(biāo)簽：整理下拉選項(xiàng)，讓表單更易用

下拉選擇框（select）選項(xiàng)過多時(shí)，會(huì)顯得雜亂無章，用戶難以快速找到需要的選項(xiàng)。optgroup標(biāo)簽?zāi)軐⑾吕x項(xiàng)分組，結(jié)構(gòu)清晰，提升表單易用性，無需額外寫CSS。

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

關(guān)鍵要點(diǎn)：label屬性設(shè)置分組名稱，每組選項(xiàng)包裹在optgroup標(biāo)簽內(nèi)；結(jié)構(gòu)清晰，用戶可快速定位選項(xiàng)；可通過CSS自定義分組樣式；適合選項(xiàng)較多的下拉表單（如地區(qū)選擇、分類選擇等）。

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

長URL、專業(yè)術(shù)語、外文長單詞等，在移動(dòng)端顯示時(shí)容易溢出容器，破壞頁面布局。很多人會(huì)用CSS強(qiáng)制換行，卻容易導(dǎo)致文本錯(cuò)亂。wbr標(biāo)簽?zāi)苤付ㄎ谋镜目蛇x換行點(diǎn)，瀏覽器會(huì)根據(jù)容器寬度自動(dòng)換行，不影響視覺效果。

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

關(guān)鍵要點(diǎn)：wbr標(biāo)簽是“可選換行點(diǎn)”，只有當(dāng)文本超出容器寬度時(shí)，瀏覽器才會(huì)在此處換行；無視覺影響，不換行時(shí)和普通文本一致；無需CSS輔助，原生適配響應(yīng)式布局；適合長URL、專業(yè)術(shù)語、外文長單詞等場(chǎng)景。

9. figure標(biāo)簽：規(guī)范媒體布局，讓圖文更協(xié)調(diào)

插入圖片、圖表、代碼片段等媒體內(nèi)容時(shí)，很多人會(huì)直接用img標(biāo)簽，再用div包裹標(biāo)題，結(jié)構(gòu)混亂，語義不明確。figure標(biāo)簽?zāi)軐⒚襟w內(nèi)容和標(biāo)題（figcaption）綁定，語義清晰，布局更規(guī)范。

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

關(guān)鍵要點(diǎn)：figure標(biāo)簽包裹媒體內(nèi)容（img、code等），figcaption標(biāo)簽作為媒體標(biāo)題；語義明確，搜索引擎能識(shí)別媒體與標(biāo)題的關(guān)聯(lián)；可通過CSS統(tǒng)一控制媒體和標(biāo)題的布局；適合圖片、圖表、代碼片段、引用內(nèi)容等場(chǎng)景。

10. bdi標(biāo)簽：處理混合方向文本，避免布局錯(cuò)亂

做國際化網(wǎng)站、多語言評(píng)論區(qū)時(shí)，經(jīng)常會(huì)遇到混合方向的文本（如英文中插入阿拉伯文、希伯來文），容易出現(xiàn)文本錯(cuò)亂、排版異常的問題。bdi標(biāo)簽?zāi)芨綦x不同方向的文本，確保排版正確。

<p>用戶：<bdi>????</bdi> 發(fā)布了英文內(nèi)容。</p>

關(guān)鍵要點(diǎn)：bdi標(biāo)簽隔離不同方向（LTR左到右、RTL右到左）的文本；避免混合方向文本導(dǎo)致的排版錯(cuò)亂；屏幕閱讀器會(huì)正確識(shí)別文本方向；適合多語言網(wǎng)站、用戶評(píng)論區(qū)、國際化內(nèi)容等場(chǎng)景。

辯證分析：這些冷門標(biāo)簽，真的適合所有場(chǎng)景嗎？

不可否認(rèn)，這10個(gè)冷門HTML標(biāo)簽?zāi)軜O大提升前端開發(fā)效率，簡化代碼、提升可訪問性，是前端人必備的“效率神器”。但凡事沒有絕對(duì)，它們并非適合所有場(chǎng)景，盲目使用反而會(huì)適得其反。

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

另一方面，語義化是這些標(biāo)簽的核心優(yōu)勢(shì)，但如果濫用，反而會(huì)破壞頁面的語義結(jié)構(gòu)。比如mark標(biāo)簽用于強(qiáng)調(diào)“相關(guān)內(nèi)容”，如果隨便用它高亮文本，不僅會(huì)讓頁面視覺雜亂，還會(huì)讓屏幕閱讀器無法正確識(shí)別重點(diǎn)；optgroup標(biāo)簽適合選項(xiàng)較多的下拉框，如果只有兩三個(gè)選項(xiàng)，強(qiáng)行分組反而會(huì)增加用戶操作成本。

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