这 5 个冷门 HTML 标签，让我直接删了100 行 JS 代码！

在写前端的时候，我们实现的比较多的一些基础交互，比如折叠面板、弹窗、输入提示、进度条或颜色选择等等，会不得不引入 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 逻辑，还能让页面更语义化、更友好。

本文首发于公众号：程序员大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！