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