在写前端的时候，我们实现的比较多的一些基础交互，比如折叠面板、弹窗、输入提示、进度条或颜色选择等等，会不得不引入 JavaScript。
但其实，HTML 自己也内置了不少功能强大的原生标签，它们开箱即用、语义清晰，还能大幅减少 JS 的代码量。
下面介绍 5 个冷门但实用的 HTML 标签。
1. <details> 和 <summary> - 可折叠内容
替代： 手风琴效果、折叠面板、FAQ部分
html
<details>
<summary>点击查看详情</summary>
<p>隐藏的内容，无需JS实现展开/收起</p>
</details>实现效果：
使用场景
- FAQ 折叠面板
- 设置项分组展开
- 移动端"查看更多"区域
注意事项
- 默认是关闭状态；添加
open属性可默认展开：<details open> - 可通过 CSS 的
details[open]选择器定制展开样式 - 支持键盘操作（Enter/Space 触发），无障碍友好
2. <dialog> - 原生对话框
替代：div模拟模态框 + 背景遮罩 + 关闭逻辑
html
<dialog id="modal">
<p>这是原生弹窗</p>
<button onclick="document.getElementById('modal').close()">关闭</button>
</dialog>
<button onclick="document.getElementById('modal').showModal()">打开弹窗</button>实现效果：
使用场景
- 确认提示框
- 登录/注册弹窗
- 临时信息展示
注意事项
.showModal()会自动创建半透明遮罩（可通过::backdrop自定义）.show()是非模态显示（不锁定背景）- 聚焦自动管理：打开时聚焦第一个可聚焦元素，关闭后焦点返回触发按钮
- 兼容性：Chrome/Firefox/Edge 支持良好；Safari 15.4+ 支持；IE 不支持
3. <datalist> - 输入建议列表
替代：监听input事件 + 动态生成下拉列表
html
<input list="browsers" placeholder="选择或输入浏览器">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>实现效果：
使用场景
- 搜索建议（非强制选项）
- 表单字段预填（如城市、产品名）
- 快速输入辅助
注意事项
- 用户仍可输入不在列表中的值（与
<select>不同） - 浏览器会自动根据输入过滤匹配项
- 移动端会调出带建议的软键盘（部分浏览器支持）
4. <meter> & <progress> - 进度指示器
替代：div模拟进度条 + JS更新宽度
html
<!-- 已知范围内的标量值（如磁盘使用率） -->
<meter min="0" max="100" value="70">70%</meter>
<!-- 任务完成进度（如文件上传） -->
<progress value="50" max="100">50%</progress>实现效果：
使用场景
- 搜索建议（非强制选项）
- 表单字段预填（如城市、产品名）
- 快速输入辅助
注意事项
- 用户仍可输入不在列表中的值（与
<select>不同） - 浏览器会自动根据输入过滤匹配项
- 移动端会调出带建议的软键盘（部分浏览器支持）
5. <input type="color"> - 颜色选择器
替代：自定义颜色选择器UI + 色值转换逻辑
html
<input type="color" value="#ff0000">实现效果：
使用场景
- 主题配色设置
- 图表颜色配置
- 设计工具中的拾色功能
注意事项
- 返回值始终为 小写 7 位十六进制 （如
#ff5733） - 移动端会调出系统级颜色选择器
- 无法自定义 UI，但可通过
::-webkit-color-swatch微调样式（有限）
总结
<details>/<summary>：实现折叠内容<dialog>：原生弹窗，自带遮罩和焦点管理<datalist>：输入建议选择<meter>/<progress>：进度展示无需手动计算宽度<input type="color">：系统级颜色选择器开箱即用
这些原生 HTML 标签虽然不太起眼，但用好它们，不仅能省去大量 JavaScript 逻辑，还能让页面更语义化、更友好。
本文首发于公众号：程序员大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！