這 12 個(gè)實(shí)用的 HTML標(biāo)簽（組件）建議盡早用上

大家好，今天給大家分享一篇閱讀的文章，本篇文章主要講了 12 個(gè) HTML 標(biāo)簽（組件），通過這些標(biāo)簽避免你在項(xiàng)目中集成復(fù)雜第三方組件，比如日歷組件、顏色選擇、進(jìn)度條等...，簡單的標(biāo)簽就能很方便的調(diào)用系統(tǒng)組件。

一、顏色選擇組件（Color Picker）

在項(xiàng)目中，你可能希望通過調(diào)色板組件動(dòng)態(tài)調(diào)整顏色，這時(shí)你可以使用 就可以輕松調(diào)用一個(gè)調(diào)色板組件，省去你在找第三方組件，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX

二、引用標(biāo)簽（Blockquote）

在文章排版時(shí)，有時(shí)候我們需要引用一些信息，這時(shí)我們需要用特殊的樣式進(jìn)行強(qiáng)調(diào)，這時(shí)你可以使用

標(biāo)簽來強(qiáng)調(diào)你用的內(nèi)容，示例效果如下所示

示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd

三、音頻播放器（Audio Player）

如果從頭寫個(gè)音頻播放器是一個(gè)費(fèi)時(shí)費(fèi)力又有挑戰(zhàn)性的工作，但是你現(xiàn)在可以使用 標(biāo)簽就能很輕松的調(diào)用。系統(tǒng)的音頻播放器，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/oNevrEb

四、視頻播放器（Video Player）

我們不僅能很方便的調(diào)用系統(tǒng)的音頻組件，我們還可以使用 標(biāo)簽調(diào)用視頻組件，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ

五、折疊組件（Accordion）

折疊列表的需求也是比較常見的，點(diǎn)擊標(biāo)題展開對(duì)應(yīng)的信息內(nèi)容，這時(shí)

標(biāo)簽就派上用場了，示例效果如下所示：

項(xiàng)目地址：https://codepen.io/madarsbiss/pen/zYdOVPV

六、日期選擇（Date Picker）

日期選擇組件可以說是項(xiàng)目中必備的組件，想必大家都有自己比較常用的日期組件，如果沒有復(fù)雜的樣式和交互需求，使用 這個(gè)標(biāo)簽就能輕松的勝任，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE

七、滑塊組件（Slider）

滑塊組件也是一個(gè)比較常見的組件，主要應(yīng)用在數(shù)值范圍的篩選上，方便用戶進(jìn)行選擇，這時(shí)我們可以使用 ，我們可以設(shè)置最小值、最大值以及當(dāng)前值，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv

八、內(nèi)容編輯（Content Editor）

為了讓內(nèi)容具有編輯性，你可以不必使用表單組件，比如 input、textarea 標(biāo)簽，你可以在可編輯的容器(div) 上添加 contenteditable 屬性，就能很輕松的完成當(dāng)前容器及所見即所得的編輯，示例如下所示：

示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB

九、圖片標(biāo)簽（Picture Tag）

有時(shí)候需要在不同的分辨率下顯示不同的圖片，如果你使用 標(biāo)簽的話，你需要做的工作就會(huì)許多，但是使用 標(biāo)簽就能很輕松的完成在不同分辨率下顯示不同圖片的設(shè)置，調(diào)整瀏覽器的大小，就會(huì)根據(jù)窗口的大小顯示不同大小的圖片，示例效果如下所示：

十、進(jìn)度條（Progress Bar）

進(jìn)度條組件也是個(gè)很常見的組件，你可以使用 標(biāo)簽就能輕松完成相關(guān)外觀的設(shè)置，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/oNevKdp

十一、下拉組件（Dropdown）

如果下拉組件選項(xiàng)比較多，用戶選擇就會(huì)比較困難，用戶可能希望結(jié)合輸入，能很方便的定位到下拉組件的內(nèi)容，這時(shí)候你可以使用 標(biāo)簽就能滿足上述需求，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ

十二、提示框（Tooltip）

如果你需要對(duì)頁面某部分進(jìn)行詳細(xì)介紹時(shí)，你可能需要鼠標(biāo)經(jīng)過此區(qū)域顯示詳細(xì)的提示框效果，這時(shí)我們可以使用 title 屬性就能輕松實(shí)現(xiàn)，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE

結(jié)束語

今天的文章就分享到這里，希望在日后的項(xiàng)目中你能想起今天分享的這12個(gè)標(biāo)簽（組件），感謝你的閱讀。