一、center

零一

效果如下：

鼓樓網站建設公司成都創(chuàng)新互聯(lián)公司,鼓樓網站設計制作，有大型網站制作公司豐富經驗。已為鼓樓上千多家提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿營銷網站建設要多少錢，請找那個售后服務好的鼓樓做網站的公司定做！

水平居中

原理也很簡單，其實就是這個標簽自帶了 text-align: center 的樣式

二、abbr

abbr 全稱是 abbreviations ，意思是縮寫。應用場景也很簡單，為一些文章中的縮寫增加注釋

以前在文章中對于縮寫的解釋經常會這么做：

DAU（Daily Active User），日活躍用戶數(shù) ......

那我們用 abbr 標簽呢？

    DAU

，日活躍用戶數(shù) ......

展示的效果如下：

這個標簽就可以把全稱隱藏掉，弱化信息量，讓真正不知道該縮寫的用戶主動去獲取縮寫的具體意思，這個在 markdown 里經常會出現(xiàn)

三、mark

 在 markdown 中也是很常用的，用于將包裹的文本高亮展示

高亮文本

效果如下：

如果全文統(tǒng)一高亮樣式，可以專門對 mark 標簽進行樣式重置，這樣就不用對你用的每個 div 加一個 highlight 的類名了，又不語義化，又徒增文檔大小

四、sup、sub

 ^{和  _{分別表示上標和下標，在 markdown 中出現(xiàn)得也很頻繁，比如數(shù)學公式和引用}}

3[2]

42

效果如下：

上標和下標的樣式原理也比較簡單，主要就是利用了 vertical-align 的 top 和 sub 屬性值，然后將字號縮小，不過有現(xiàn)成的標簽，干嘛不用呢？

五、figure

figure 是用于包裹其它標簽的內容的，然后再利用另一個標簽 figcaption ，可以對包裹的內容進行一個文本描述，例如：

             alt="大象">
    

效果如下：

那要是圖片掛了呢？

再友好點處理，我們把 img 標簽的 alt 屬性去掉

漂亮，終于把我一直厭煩的圖裂icon給干掉了，樣式還巨好看

當然不止能包裹 img 標簽，其它任何都是可以的

嘿嘿，給大家在本文來個實戰(zhàn):point_down:，下面這個可以點擊，樣式也是利用了 figure 這個標簽

我是figure標簽產生的

六、progress

說到  這個標簽就很有意思了，去年有段時間我做的業(yè)務里涉及到了進度條，當時是前同事做的，然后有一些性能問題，我就在研究如何優(yōu)化，減少進度條改變帶來的性能問題，當時還寫了一篇 我優(yōu)化了進度條，頁面性能竟提高了70%

雖然最后問題時解決了，但是也有幸收到了張鑫旭大佬的評論，他告訴我 progress 這個標簽就足夠了，既有語義化，又有進度條的功能，性能還好，兼容性也很不錯。后來經過一番嘗試，還真是，當時是我孤陋寡聞了，也安利給大家

瀏覽器自帶的樣式就已經很好看了，效果如下：

業(yè)務中我們也就可以通過控制 value 屬性，來改變進度條的進度了

七、area

area 這個標簽也非常有意思，它的作用是為圖片提供點擊熱區(qū)，可以自己規(guī)定一張圖的哪些區(qū)域可點擊，且點擊后跳轉的鏈接，也可以設置成點擊下載文件，我們來舉個例子：

area 一般要搭配 map 標簽一起使用，每個 area 標簽表示一個熱區(qū)，例如上面代碼中，我們定義了兩個熱區(qū)，熱區(qū)形狀都為 rect （矩形），他們的熱區(qū)分別是：

• 坐標 (0,0) 到 坐標 (100,50) 的一個矩形
• 坐標 (0,50) 坐標 (100,100) 的一個矩形

我們都知道，默認的坐標軸是這樣的：

因此，我們劃分的兩個熱區(qū)就是:

最后再來看一下我們的實際效果：

八、details

details 字面意思是 "詳情"，在markdown里也經常用，用該標簽包裹了的內容默認會被隱藏，只留下一個簡述的文字，我們點擊以后才會展示詳細的內容

  
我是一段被隱藏的內容

效果如下：

這還沒有加任何一行的 js 代碼，我們點擊后， details 標簽上會多一個 open 的屬性，被隱藏的內容就展示出來了

默認情況下，簡要文字為 "詳情" ，想要修改這個文字，要搭配 summary 標簽來使用

  
點擊查看更多

  
我是一段被隱藏的內容

就搞定了

九、dialog

瀏覽器自帶彈窗方法 alert 、 confirm 、 prompt ，樣式固定且每個瀏覽器不同，同時還會阻塞頁面運行，除了這個還提供了一個 dialog 標簽，它的使用方式有點類似于現(xiàn)在各大組件庫的 Modal 組件了，瀏覽器還為該標簽提供了原生的 dom 方法： showModal 、 close ，可以直接控制彈窗的展示和隱藏

    
    ok

打開彈框

效果如下：

細心的你有沒有發(fā)現(xiàn)，這原生的彈框還自帶背景蒙層，點擊是關閉不掉的，但起碼它不會阻塞頁面

然后我們在彈窗展示時，也可以通過 esc 鍵來關閉彈窗

十、datalist

datalist 是用于給輸入框提供可選值的一個列表標簽，類似咱們常用的 Select 組件

我可以用其實現(xiàn)一個 "輸入聯(lián)想" 的功能

 輸入C開頭的英文單詞：

來試一試：

剛點擊時會把所有推薦的選項都列出來，然后根據(jù)后面輸入的內容，會過濾掉不匹配了的選項，比如我輸入 cl ，會過濾掉不是 cl 開頭的單詞，最后只剩下 Click 和 Close 了

最后我發(fā)現(xiàn)，他這個下拉框有點好看啊？為啥這原生的 input 框默認樣式那么丑，啥時候改改

十一、fieldset

fieldset 標簽是用于分組管理 form 表單內的元素的，若 fieldset 設置了 disabled 屬性，則被其包裹的所有表單元素都會被禁用置灰，且不會隨著表單一起提交上去，是的就成了擺設

什么意思呢？看個例子：

  

    
被禁用區(qū)域

    ID：
    
    郵箱：
    
  

  名字：
  
  提交

這里我們把 ID 和 郵箱 的表單包裹了起來，且設置了 disabled ，只開放了一個 name 的輸入控件，此時界面如下：

可以看到除了 name 輸入框，其它的兩個輸入框都被禁用了，此時點提交會是什么樣子呢？

嗯，只提交了 name 字段

十二、noscript

這個標簽是在瀏覽器不支持或禁用了 javascript 時才展示的，大多用于對 js 強依賴的應用，比如現(xiàn)在大部分的 SPA 頁面，一旦不支持 javascript ，頁面基本上什么內容都沒了，此時可以靠這個標簽做友好提示

一般我們不需要特地去使用，大多都是在打包過程中自動插入到 html 靜態(tài)文件里去了的，例如：

// init.js
const root = document.getElementById('root')
const button = document.createElement('button')
button.innerText = '點擊出彈窗'
root.appendChild(button)

未禁用 javascript 時，頁面時這樣的：

禁用了 javascript 時，是這樣的：

? ?

分享題目：12個可能你沒見過，但非常實用的HTML標簽
分享地址：http://uogjgqi.cn/article/dhepico.html