在写前端的时候，我们实现的比较多的一些基础交互，比如折叠面板、弹窗、输入提示、进度条或颜色选择等等，会不得不引入 JavaScript。

但其实，HTML 自己也内置了不少功能强大的原生标签，它们开箱即用、语义清晰，还能大幅减少 JS 的代码量。

下面介绍 5 个冷门但实用的 HTML 标签。

1. <details> 和 <summary> - 可折叠内容

替代： 手风琴效果、折叠面板、FAQ部分

<details>
  <summary>点击查看详情</summary>
  <p>隐藏的内容，无需JS实现展开/收起</p>
</details>

实现效果：

使用场景

• • FAQ 折叠面板
• • 设置项分组展开
• • 移动端“查看更多”区域

注意事项

• • 默认是关闭状态；添加 open 属性可默认展开：<details open>
• • 可通过 CSS 的 details[open] 选择器定制展开样式
• • 支持键盘操作（Enter/Space 触发），无障碍友好

2. <dialog> - 原生对话框

替代：div模拟模态框 + 背景遮罩 + 关闭逻辑

<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事件 + 动态生成下拉列表

<input list="browsers" placeholder="选择或输入浏览器">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

实现效果：

使用场景

• • 搜索建议（非强制选项）
• • 表单字段预填（如城市、产品名）
• • 快速输入辅助

注意事项

• • 用户仍可输入不在列表中的值（与 <select> 不同）
• • 浏览器会自动根据输入过滤匹配项
• • 移动端会调出带建议的软键盘（部分浏览器支持）

4. <meter> & <progress> - 进度指示器

替代：div模拟进度条 + JS更新宽度

<!-- 已知范围内的标量值（如磁盘使用率） -->
<meter min="0" max="100" value="70">70%</meter>

<!-- 任务完成进度（如文件上传） -->
<progress value="50" max="100">50%</progress>

实现效果：

使用场景

• • 搜索建议（非强制选项）
• • 表单字段预填（如城市、产品名）
• • 快速输入辅助

注意事项

• • 用户仍可输入不在列表中的值（与 <select> 不同）
• • 浏览器会自动根据输入过滤匹配项
• • 移动端会调出带建议的软键盘（部分浏览器支持）

5. <input type="color"> - 颜色选择器

替代：自定义颜色选择器UI + 色值转换逻辑

<input type="color" value="#ff0000">

实现效果：

使用场景

• • 主题配色设置
• • 图表颜色配置
• • 设计工具中的拾色功能

注意事项

• • 返回值始终为 小写 7 位十六进制（如 #ff5733）
• • 移动端会调出系统级颜色选择器
• • 无法自定义 UI，但可通过 ::-webkit-color-swatch 微调样式（有限）

总结

• • <details> / <summary>：实现折叠内容
• • <dialog>：原生弹窗，自带遮罩和焦点管理
• • <datalist>：输入建议选择
• • <meter> / <progress>：进度展示无需手动计算宽度
• • <input type="color">：系统级颜色选择器开箱即用

这些原生 HTML 标签虽然不太起眼，但用好它们，不仅能省去大量 JavaScript 逻辑，还能让页面更语义化、更友好。