大家好，我是零一，今天給大家推薦幾個冷門但非常實用的 HTML 標籤，不只是語義化，它們都有自己的應用場景和特殊自帶功能
你見過了就略過，沒見過的就當查漏補缺~
一、center讓你實現水平居中，用這個標籤就對了，標籤名也非常得語義化
<center>零一</center>效果如下：
水平居中原理也很簡單，其實就是這個標籤自帶了 text-align: center 的樣式
二、abbrabbr 全稱是 abbreviations，意思是縮寫。應用場景也很簡單，為一些文章中的縮寫增加注釋
以前在文章中對於縮寫的解釋經常會這麼做：
DAU（DailyActiveUser），日活躍用戶數......那我們用 abbr 標籤呢？
<abbrtitle="DailyActiveUser">DAU</abbr><span>，日活躍用戶數......</span>展示的效果如下：
這個標籤就可以把全稱隱藏掉，弱化信息量，讓真正不知道該縮寫的用戶主動去獲取縮寫的具體意思，這個在 markdown 里經常會出現
三、mark<mark/> 在 markdown 中也是很常用的，用於將包裹的文本高亮展示
<mark>高亮文本</mark>效果如下：
如果全文統一高亮樣式，可以專門對 mark 標籤進行樣式重置，這樣就不用對你用的每個 div 加一個 highlight 的類名了，又不語義化，又徒增文檔大小
四、sup、sub<sup/>和<sub/>分別表示上標和下標，在 markdown 中出現得也很頻繁，比如數學公式和引用
<div>3<sup>[2]</sup></div><div>4<sub>2</sub></div>效果如下：
上標和下標的樣式原理也比較簡單，主要就是利用了 vertical-align 的 top 和 sub 屬性值，然後將字號縮小，不過有現成的標籤，幹嘛不用呢？
五、figurefigure 是用於包裹其它標籤的內容的，然後再利用另一個標籤 figcaption ，可以對包裹的內容進行一個文本描述，例如：
<figure><imgsrc="/media/cc0-images/elephant-660-480.jpg"alt="大象"><figcaption>這是一張大象的照片</figcaption></figure>效果如下：
那要是圖片掛了呢？
再友好點處理，我們把 img 標籤的 alt 屬性去掉
漂亮，終於把我一直厭煩的圖裂icon給幹掉了，樣式還巨好看
當然不止能包裹 img 標籤，其它任何都是可以的
嘿嘿，給大家在本文來個實戰👇，下面這個可以點擊，樣式也是利用了 figure 這個標籤
我是figure標籤產生的六、progress說到 <progress/> 這個標籤就很有意思了，去年有段時間我做的業務里涉及到了進度條，當時是前同事做的，然後有一些性能問題，我就在研究如何優化，減少進度條改變帶來的性能問題，當時還寫了一篇 我優化了進度條，頁面性能竟提高了70%
雖然最後問題時解決了，但是也有幸收到了張鑫旭大佬的評論，他告訴我 progress 這個標籤就足夠了，既有語義化，又有進度條的功能，性能還好，兼容性也很不錯。後來經過一番嘗試，還真是，當時是我孤陋寡聞了，也安利給大家
<!--進度條最大值為100，當前進度為60，即60%--><progressmax="100"value="60"/>瀏覽器自帶的樣式就已經很好看了，效果如下：
業務中我們也就可以通過控制 value 屬性，來改變進度條的進度了
七、areaarea 這個標籤也非常有意思，它的作用是為圖片提供點擊熱區，可以自己規定一張圖的哪些區域可點擊，且點擊後跳轉的鏈接，也可以設置成點擊下載文件，我們來舉個例子：
<imgsrc="example.png"width="100"height="100"alt=""usemap="#map"><mapname="map"><areashape="rect"coords="0,0,100,50"alt="baidu"href="https://www.baidu.com"><areashape="rect"coords="0,50,100,100"alt="sougou"href="https://www.sogou.com/"></map>area 一般要搭配 map 標籤一起使用，每個 area 標籤表示一個熱區，例如上面代碼中，我們定義了兩個熱區，熱區形狀都為rect（矩形），他們的熱區分別是：
我們都知道，默認的坐標軸是這樣的：
因此，我們劃分的兩個熱區就是:
最後再來看一下我們的實際效果：
i
八、detailsdetails 字面意思是 "詳情"，在markdown里也經常用，用該標籤包裹了的內容默認會被隱藏，只留下一個簡述的文字，我們點擊以後才會展示詳細的內容
<details><p>我是一段被隱藏的內容</p></details>效果如下：
這還沒有加任何一行的 js 代碼，我們點擊後，details 標籤上會多一個 open 的屬性，被隱藏的內容就展示出來了
默認情況下，簡要文字為 "詳情"，想要修改這個文字，要搭配 summary 標籤來使用
<details><summary>點擊查看更多</summary><p>我是一段被隱藏的內容</p></details>就搞定了
九、dialog瀏覽器自帶彈窗方法 alert、confirm、prompt，樣式固定且每個瀏覽器不同，同時還會阻塞頁面運行，除了這個還提供了一個 dialog 標籤，它的使用方式有點類似於現在各大組件庫的 Modal 組件了，瀏覽器還為該標籤提供了原生的 dom 方法：showModal、close，可以直接控制彈窗的展示和隱藏
<dialogid="dialog"><inputtype="text"><buttonid="close">ok</button></dialog><buttonid="openBtn">打開彈框</button><script>constdialog=document.getElementById('dialog')constopenBtn=document.getElementById('openBtn')constcloseBtn=document.getElementById('close')openBtn.addEventListener('click',()=>{//打開彈框dialog.showModal()})closeBtn.addEventListener('click',()=>{//隱藏彈框dialog.close()})</script>效果如下：
細心的你有沒有發現，這原生的彈框還自帶背景蒙層，點擊是關閉不掉的，但起碼它不會阻塞頁面
然後我們在彈窗展示時，也可以通過 esc 鍵來關閉彈窗
十、datalistdatalist 是用於給輸入框提供可選值的一個列表標籤，類似咱們常用的 Select 組件
我可以用其實現一個 "輸入聯想" 的功能
<label>輸入C開頭的英文單詞：</label><inputlist="c_words"/><datalistid="c_words"><optionvalue="China"><optionvalue="Click"><optionvalue="Close"><optionvalue="Const"><optionvalue="Count"></datalist>來試一試：
剛點擊時會把所有推薦的選項都列出來，然後根據後面輸入的內容，會過濾掉不匹配了的選項，比如我輸入 cl，會過濾掉不是 cl 開頭的單詞，最後只剩下 Click 和 Close 了
最後我發現，他這個下拉框有點好看啊？為啥這原生的 input 框默認樣式那麼丑，啥時候改改
十一、fieldsetfieldset 標籤是用於分組管理 form 表單內的元素的，若 fieldset 設置了 disabled 屬性，則被其包裹的所有表單元素都會被禁用置灰，且不會隨着表單一起提交上去，是的就成了擺設
什麼意思呢？看個例子：
<formaction="/example"><fieldsetdisabled><legend>被禁用區域</legend><label>ID：</label><inputtype="text"name="id"value="1"><label>郵箱：</label><inputtype="text"name="email"value="1234567@163.com"></fieldset><label>名字：</label><inputtype="text"name="name"><buttontype="submit">提交</button></form>這裡我們把 ID 和 郵箱 的表單包裹了起來，且設置了 disabled，只開放了一個 name 的輸入控件，此時界面如下：
可以看到除了 name 輸入框，其它的兩個輸入框都被禁用了，此時點提交會是什麼樣子呢？
嗯，只提交了 name 字段
十二、noscript這個標籤是在瀏覽器不支持或禁用了 javascript 時才展示的，大多用於對 js 強依賴的應用，比如現在大部分的 SPA 頁面，一旦不支持 javascript，頁面基本上什麼內容都沒了，此時可以靠這個標籤做友好提示
一般我們不需要特地去使用，大多都是在打包過程中自動插入到 html 靜態文件里去了的，例如：
//init.jsconstroot=document.getElementById('root')constbutton=document.createElement('button')button.innerText='點擊出彈窗'root.appendChild(button)<!--index.html--><scriptdefersrc="./init.js"></script><noscript>不好意思，你的瀏覽器不支持或禁用了JavaScript，請更換瀏覽器或啟用JavaScript</noscript><divid="root"></div>未禁用 javascript 時，頁面時這樣的：
禁用了 javascript 時，是這樣的：
最後希望本文對你有所幫助，若有錯誤，歡迎指正，若你有更多有意思的想法，歡迎評論區討論！
我是零一，分享技術，不止前端！
往期推薦
小程序的鼻祖在國內就這麼消亡了！
不用跑項目，組件效果所見即所得，絕了！
86張腦圖，一口氣看完 React
我是傻x，被迫看了 1 天源碼，千萬別學我！
煥然一新的 Vue3 中文文檔來了！
CSS狀態管理，玩出花了！
創作不易，加個點讚、在看支持一下哦！
留言列表