这 12 个实用的 HTML标签（组件）建议尽早用上

深藏阁楼爱情的钟 2022-09-16 16:17 285阅读 0赞

![cda0daf5d0745a9301b06be9c4aa3065.png][]

大家好，今天给大家分享一篇阅读的文章，本篇文章主要讲了 12 个 HTML 标签（组件），通过这些标签避免你在项目中集成复杂第三方组件，比如日历组件、颜色选择、进度条等...，简单的标签就能很方便的调用系统组件。

## 一、颜色选择组件（Color Picker） ##

在项目中，你可能希望通过调色板组件动态调整颜色，这时你可以使用 `<input type="color">` 就可以轻松调用一个调色板组件，省去你在找第三方组件，示例效果如下：

![3ee4054a2588ce516b1ead16e8c21776.gif][]

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

## 二、引用标签（Blockquote） ##

在文章排版时，有时候我们需要引用一些信息，这时我们需要用特殊的样式进行强调，这时你可以使用`<blockquote>` 标签来强调你用的内容，示例效果如下所示

![5a2e5bffee3ba9dbd50fd57d8d2bda70.png][]

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

## 三、音频播放器（Audio Player） ##

如果从头写个音频播放器是一个费时费力又有挑战性的工作，但是你现在可以使用`<audio>` 标签就能很轻松的调用。系统的音频播放器，示例效果如下所示：

![38b69737449b12a687be999b0ba9317d.png][]

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

## 四、视频播放器（Video Player） ##

我们不仅能很方便的调用系统的音频组件，我们还可以使用`<video>` 标签调用视频组件，示例效果如下所示：

![c24a7c68131b409ef228098f8af060b4.png][]

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

## 五、折叠组件（Accordion） ##

折叠列表的需求也是比较常见的，点击标题展开对应的信息内容，这时 `<details>` 标签就派上用场了，示例效果如下所示：

![0ec669d7aaffcf9f5e64525161b812c1.gif][]

gif

项目地址：https://codepen.io/madarsbiss/pen/zYdOVPV

## 六、日期选择（Date Picker） ##

日期选择组件可以说是项目中必备的组件，想必大家都有自己比较常用的日期组件，如果没有复杂的样式和交互需求，使用`<input type="date">` 这个标签就能轻松的胜任，示例效果如下所示：

![dca1610ab40b63a240c6f982b953c320.png][]

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

## 七、滑块组件（Slider） ##

滑块组件也是一个比较常见的组件，主要应用在数值范围的筛选上，方便用户进行选择，这时我们可以使用 `<input type="range">` ，我们可以设置最小值、最大值以及当前值，示例效果如下所示：

![957f974c7c3f9e725d8d515d0ef05bc7.png][]

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

## 八、内容编辑（Content Editor） ##

为了让内容具有编辑性，你可以不必使用表单组件，比如 input、textarea 标签，你可以在可编辑的容器(div) 上添加 `contenteditable` 属性，就能很轻松的完成当前容器及所见即所得的编辑，示例如下所示：

![6e6eb8c943941329c63a57dffde464e4.gif][]

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

## 九、图片标签（Picture Tag） ##

有时候需要在不同的分辨率下显示不同的图片，如果你使用`<img>` 标签的话，你需要做的工作就会许多，但是使用`<picture>` 标签就能很轻松的完成在不同分辨率下显示不同图片的设置，调整浏览器的大小，就会根据窗口的大小显示不同大小的图片，示例效果如下所示：

![0f03e9a23ed32f97e4386e91248148a3.png][]

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

十、进度条（Progress Bar）

进度条组件也是个很常见的组件，你可以使用`<progress>` 标签就能轻松完成相关外观的设置，示例效果如下：

![49bda53e454f3011a6d43cec532fee29.png][]

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

## 十一、下拉组件（Dropdown） ##

如果下拉组件选项比较多，用户选择就会比较困难，用户可能希望结合输入，能很方便的定位到下拉组件的内容，这时候你可以使用 `<datalist>` 标签就能满足上述需求，示例效果如下所示：

![e45b8b70e7bfbe5342523ce34dbe92a7.gif][]

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

## 十二、提示框（Tooltip） ##

如果你需要对页面某部分进行详细介绍时，你可能需要鼠标经过此区域显示详细的提示框效果，这时我们可以使用 `title` 属性就能轻松实现，示例效果如下所示：

![6706f4b00d91614adaeb5f29ee0cd557.png][]

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

## 结束语 ##

今天的文章就分享到这里，希望在日后的项目中你能想起今天分享的这12个标签（组件），感谢你的阅读。

> 参考：https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
> 
> Madza

[cda0daf5d0745a9301b06be9c4aa3065.png]: /images/20220828/beda51ad49fa4b11a3f9aaf5742cc00b.png
[3ee4054a2588ce516b1ead16e8c21776.gif]: /images/20220828/f6e57f556990446fb9f81b3f3add92cb.png
[5a2e5bffee3ba9dbd50fd57d8d2bda70.png]: /images/20220828/0d064cdd613f4d569307326ed36584ab.png
[38b69737449b12a687be999b0ba9317d.png]: /images/20220828/7bc085c337154b608fd0d640ba33efdb.png
[c24a7c68131b409ef228098f8af060b4.png]: /images/20220828/746b7e50512843eab6c07f7e06e660aa.png
[0ec669d7aaffcf9f5e64525161b812c1.gif]: /images/20220828/a4084386609a457eb999b3ccfa472949.png
[dca1610ab40b63a240c6f982b953c320.png]: /images/20220828/ddb899a13fdc41f580476e0939b4718c.png
[957f974c7c3f9e725d8d515d0ef05bc7.png]: /images/20220828/e7a5c00539934cdcb460efada9c02d50.png
[6e6eb8c943941329c63a57dffde464e4.gif]: /images/20220828/d701fa34fd3b46f491ef61859096897c.png
[0f03e9a23ed32f97e4386e91248148a3.png]: /images/20220828/dba89b44e0c84241affdadb8f1506797.png
[49bda53e454f3011a6d43cec532fee29.png]: /images/20220828/ecc79085b5144068b76ca83f488c675e.png
[e45b8b70e7bfbe5342523ce34dbe92a7.gif]: /images/20220828/4e7c9917d0b045f895dc7b31a7058bf4.png
[6706f4b00d91614adaeb5f29ee0cd557.png]: /images/20220828/497ddc35a11f42c18e08338b7169fd6c.png