这 5 个冷门的 HTML 标签，能让你少写 100 行 JS

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣
各人好!😁。
Code Review 的时间，我最怕看到什么？
不是复杂的算法，也不是什么正则。而是显着一个 HTML 标签就能搞定的事，有人非要写几百行 JS + CSS 去重新发明轮子 。
前几天，我看到一个新同砚为了写一个折叠面板（Accordion），引入了一个重型的第三方库，还写了一堆 useState、onClick 和动画逻辑。
我冷静地把他的代码全删了，换成了 3 行 。他看我的眼神，仿佛在看一个外星人🤣。
在 2025 年的本日，欣赏器原生 HTML 的本领早已今是昨非。许多我们风俗用 JS 去模仿的交互，现在不光有原生支持，而且性能更好、兼容性更强、无停滞（a11y）更完满。
本日，我就来盘货 5 个被严厉低估的HTML标签👇。
& ：折叠组件

你是不是还在写如许的 React 代码？

1. // JS 模拟版
2. const [isOpen, setIsOpen] = useState(false);
3. return (
4.   
5.      setIsOpen(!isOpen)}>
6.       点击展开 {isOpen ? '⬆️' : '⬇️'}
7.    
8.     {isOpen && ...}
9.   
10. );

复制代码

为了这个功能，你还得写 CSS 动画，还得处理处罚键盘事故（Tab 键能不能选到？回车能不能睁开？等等）。
HTML 原生写法：

1. <details>
2.   <summary>点击展开</summary>
3.   
4.     这里是展开后的内容，原生支持 Ctrl+F 页内搜索！
5.   
6. </details>

复制代码

• 没有任何JS：自带点击睁开/收起交互。
  
• 无停滞（a11y）满分：屏幕阅读器能完善辨认，Tab 键、回车键原生支持。
  
• 页内搜刮：这是 JS 模仿版最大的痛点。假如内容被 JS 埋伏了（display: none），欣赏器的 Ctrl+F 通常搜不到。但  里的内容，纵然折叠，欣赏器也能搜到并主动睁开！
  

 共同 CSS 👇

1. details {
2.   border: 1px solid #ccc;
3.   border-radius: 6px;
4.   padding: 8px;
5. }
7. summary {
8.   cursor: pointer;
9.   font-weight: bold;
10. }
12. /* 包住内容，让它能动画高度 */
13. details > .content {
14.   overflow: hidden;
15.   max-height: 0;
16.   opacity: 0;
17.   transition: max-height .45s ease, opacity .3s ease;
18. }
20. /* details 处于 open 状态时 */
21. details[open] > .content {
22.   max-height: 200px; /* 你内容高度大概多少设多少，足够大即可 */
23.   opacity: 1;
24. }

复制代码

依然可以做动画。
：弹窗组件

写模态框（Modal）是前端最大的坑之一。你必要思量：

• z-index 层级会不会被遮挡？
  
• 点击遮罩层关闭？
  
• Focus Trap（焦点锁定） ：打开弹窗后，Tab 键不能跑到底层页面去。
  
• 按下 Esc 键关闭？
  

为了办理这些，我们通常会引入 Antd Modal 大概 React Portal。但在轻量级场景下，原生  才是神🫅。
HTML 原生

1. <dialog id="myModal">
2.   <form method="dialog">
3.     <p>这是一个原生模态框</p>
4.     <button>关闭（自动）</button>
5.   </form>
6. </dialog>
8. <button onclick="myModal.showModal()">打开弹窗⏏</button>

复制代码

• Top Layer（顶层特性） ：欣赏器会把它渲染在全部 DOM 的最上层，彻底无视父元素的 z-index 和 overflow: hidden。
  
• ::backdrop 伪元素：直接用 CSS 定制遮罩层样式。
  

1. /* 背景遮罩 */
2. dialog::backdrop {
3.     background: rgba(0, 0, 0, 0.45);
4.     backdrop-filter: blur(3px);
5.     transition: opacity .3s ease;
6. }

复制代码

• 原生交互：自带 Esc 关闭，自带焦点管理，表单提交主动关闭。
  

：搜刮主动补全

当产物司理要求做一个带搜刮发起的输入框时，你的第一反应是不是：“快！引入 Select2 大概 Antd AutoComplete！😖
且慢。假如只是简朴的发起列表，几 KB 的 JS 库都显得太重了。
HTML 原生版：

1. <label>选择你喜欢的框架：</label>
2. <input list="frameworks" />
4. <datalist id="frameworks">
5.   <option value="React">
6.   <option value="Vue">
7.   <option value="Svelte">
8.   <option value="Angular">
9.   <option value="Solid">
10. </datalist>

复制代码

• 暗昧搜刮：欣赏器原生支持暗昧匹配（打 u 会出来 Vue）。
  
• 相应式：在手机上，它会调用体系原生的下拉选择 UI，体验比网页模仿的更顺滑。
  
• 解耦：它只是一个发起列表，用户依然可以输入列表里没有的值（这点和 Select 差别）。
  

& disabled：一键禁用整个表单

场景：用户点击提交按钮后，为了防止重复提交，我们必要禁用表单里的全部输入框。
JS 笨办法：

1. // 还要一个个去拿 DOM，或者维护一个 loading 状态传给所有组件
2. inputs.forEach(input => input.disabled = true);
3. buttons.forEach(btn => btn.disabled = true);

复制代码

HTML 原生写法：

1. <form>
2.   <fieldset disabled id="login-group">
3.     <legend>登录</legend>
4.     <input type="text" placeholder="用户名">
5.     <input type="password" placeholder="密码">
6.     <button>提交</button>
7.   </fieldset>
8. </form>

复制代码

 
这是一个极好的分组头脑。通过给  设置 disabled，欣赏器会主动禁用内部全部的 , , 。不消写循环，不消维护复杂的 State。
：H5 调用手机相机

场景：业务必要用户上传一张照片，可以是相册选的，也可以是当场拍的。
许多新手的反应是：是不是要接微信 JSSDK？是不是要写个 Bridge 调原生 App 本领？
答案是不必要！
HTML 原生：
[code][/code]只要加上 capture 属性，在移动端（iOS/Android）点击上传时，体系会直接拉起相机，而不是让你去选文件。拍完照后，你拿到的就是一个尺度的 File 对象。
不必要什么 JS SDK，实现原生级体验👍。
我总是夸大 最好的代码，是没有代码！
假如对您有所资助，欢迎您点个关注，我会定时更新技能文档，各人一起讨论学习，一起进步。

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.