更新時間：2024-06-06 16:13:54作者：佚名
1. 縮寫
abbr的全稱是，應(yīng)用場景也很簡單，對一些文章中的縮寫添加注解。
以往對文章中縮寫的解釋往往是這樣的：
DAU（Daily Active User），日活躍用戶數(shù) ......
那么使用 abbr 標(biāo)簽怎么樣？
DAU
，日活躍用戶數(shù) ......
顯示效果如下：
這個標(biāo)簽可以隱藏全稱，弱化信息量caption是什么意思，讓真正不知道縮寫的用戶主動去獲取縮寫的具體含義，這在 中經(jīng)常出現(xiàn)。
2. 馬克
它也常用于，用于突出顯示換行的文本。
高亮文本
效果如下：
如果想讓整個文本使用統(tǒng)一的高亮樣式，可以專門重新設(shè)置 mark 標(biāo)簽的樣式。這樣就不用給每個使用的 div 添加 class 名，這樣做不具備語義，只會增加文檔大小。
3. supcaption是什么意思，sub
和 分別代表上標(biāo)和下標(biāo)，在中文中經(jīng)常出現(xiàn)，例如數(shù)學(xué)公式和引用文。
3[2]
42
效果如下：
上標(biāo)和下標(biāo)的樣式原理也比較簡單，主要是利用-align的top和sub屬性值，然后縮小字體大小。不過有現(xiàn)成的標(biāo)簽，何必不用呢？
四、
它用于包裹其他標(biāo)簽的內(nèi)容，然后使用另一個標(biāo)簽對包裹的內(nèi)容給出文字描述，例如：
這是一張大象的照片
效果如下：
如果圖片掛了怎么辦？
為了使其更加友好，我們可以刪除img標(biāo)簽的alt屬性。
漂亮，終于擺脫了我一直惱火的圖標(biāo)破裂的問題了，而且風(fēng)格也很漂亮。
當(dāng)然，它可以包裝的不僅僅是 img 標(biāo)簽，其他任何東西都是可能的。
嘿嘿，這篇文章給大家舉個實際的例子，下面這個可以點擊，樣式也是用了這個標(biāo)簽。
我被標(biāo)簽所創(chuàng)造
五，
說起
這個標(biāo)簽很有意思，去年有一段時間我做的業(yè)務(wù)涉及到一個進(jìn)度條，是當(dāng)時以前的同事做的英語作文，出現(xiàn)了一些性能問題，當(dāng)時在研究怎么優(yōu)化，減少進(jìn)度條變化帶來的性能問題。
雖然最后問題解決了，但是還是很幸運的收到了張鑫旭的評論，說這個標(biāo)簽就夠了，兼具語義和進(jìn)度條功能，性能好，兼容性也好，嘗試了幾次之后，發(fā)現(xiàn)確實是當(dāng)時自己孤陋寡聞了，所以推薦給大家。
瀏覽器自身的樣式已經(jīng)很好看了，效果如下：
在業(yè)務(wù)中我們還可以通過控制value屬性來改變進(jìn)度條的進(jìn)度。
6. 面積
area標(biāo)簽也挺有意思的，用來給圖片提供點擊熱點，可以定義圖片的哪些區(qū)域是可以點擊的，點擊后跳轉(zhuǎn)的鏈接也可以設(shè)置下載文件，我們來舉個例子：
Area 通常和 map 標(biāo)簽一起使用，每個 area 標(biāo)簽代表一個熱區(qū)，例如上面的代碼中我們定義了兩個熱區(qū)，熱區(qū)的形狀都是 rect（長方形），它們的熱區(qū)分別是：
我們都知道默認(rèn)的坐標(biāo)軸是這樣的：
因此我們劃分的兩個熱區(qū)為：
最后我們來看看我們的實際結(jié)果：
七，
字面意思就是“詳細(xì)信息”，經(jīng)常用在 中，被該標(biāo)簽包裹的內(nèi)容會默認(rèn)被隱藏，只留下簡單的說明，我們點擊之后才會顯示詳細(xì)內(nèi)容。
我是一段被隱藏的內(nèi)容
效果如下：
還沒有添加一行js代碼，我們點擊之后，會給標(biāo)簽添加一個open屬性，隱藏的內(nèi)容就會顯示出來。
默認(rèn)情況下，簡要文字為“詳細(xì)信息”，如果要修改此文字，需要配合標(biāo)簽使用。
點擊查看更多
我是一段被隱藏的內(nèi)容
就是這樣！
八，
瀏覽器自帶了alert、close等彈窗方法，樣式都是固定的，每個瀏覽器都不一樣，也會阻塞頁面運行。除此之外，還提供了一個標(biāo)簽，它的用法有點類似各大組件庫的Modal組件，瀏覽器也為這個標(biāo)簽提供了原生的DOM方法：close，可以直接控制彈窗的顯示與隱藏。
<script>
const dialog = document.getElementById('dialog')
const openBtn = document.getElementById('openBtn')
const closeBtn = document.getElementById('close')
openBtn.addEventListener('click', () => {
// 打開彈框
dialog.showModal()
})
closeBtn.addEventListener('click', () => {
// 隱藏彈框
dialog.close()
})
</script>
效果如下：
仔細(xì)的大家有沒有注意到，這個原生的彈窗也是帶有背景遮罩的，雖然無法通過點擊關(guān)閉，但至少不會遮擋頁面。
那么當(dāng)彈窗顯示出來的時候，我們也可以通過按Esc鍵來關(guān)閉彈窗。
九，
它是一個用于為輸入框提供可選值的列表標(biāo)簽，類似于我們常用的組件。
我可以用它來實現(xiàn)一個“輸入聯(lián)想”功能。
試一試吧：
第一次點擊的時候會列出所有推薦的選項，然后根據(jù)后面輸入的內(nèi)容，過濾掉不匹配的選項。比如我輸入cl，不以cl開頭的單詞都會被過濾掉，只剩下Click和Close。
最后發(fā)現(xiàn)這個下拉框挺好看的，這個原生輸入框默認(rèn)樣式怎么這么丑啊，什么時候改啊
十，
該標(biāo)簽用于對表單內(nèi)的元素進(jìn)行分組管理，如果設(shè)置了該屬性，那么被它包裹的表單元素全部會被禁用，并且變灰，不會隨表單一起提交，是的，它會變成一個擺設(shè)。
這是什么意思？以下是一個例子：
這里我們將ID和email的表單進(jìn)行包裝，并設(shè)置只打開一個name的輸入控件，界面如下：
可以看到除了姓名輸入框之外，其他兩個輸入框都被禁用了，這時候點擊提交會是什么樣子的呢？
嗯，只提交了姓名字段。
十一，
此標(biāo)簽僅在瀏覽器不支持或者被禁用時顯示，多用于對js依賴較大的應(yīng)用中，比如現(xiàn)在大部分SPA頁面，一旦不支持，頁面基本就沒什么內(nèi)容了，此時此標(biāo)簽可以起到友好提示的作用。
一般我們不需要特意去使用它，大部分都是在打包過程中自動插入到HTML靜態(tài)文件中的，例如：
// init.js
const root = document.getElementById('root')
const button = document.createElement('button')
button.innerText = '點擊出彈窗'
root.appendChild(button)
<script defer src="./init.js"></script>
當(dāng)沒有禁用時，頁面如下：
禁用時，它看起來像這樣：