原生交互标签是提升可访问性与维护性的基础手段。①<details>比手写JS折叠更可靠，自带语义、键盘支持和状态同步；②<button>须显式声明type属性以防误提交；③<label>绑定失效常见于for/id不匹配、嵌套错误或id重复；④推荐用data-属性配合事件委托替代内联onclick。
原生交互标签不是“可选技巧”，而是减少JS依赖、提升可访问性和维护性的基础手段。用错或不用，迟早会遇到键盘焦点异常、屏幕阅读器读不出、移动端行为不一致等问题。
为什么<details>比手写JS折叠更可靠
很多团队用div + onclick模拟展开收起，但默认不支持键盘操作（Enter/Space）、不暴露状态给辅助技术、也不自动管理aria-expanded。
-
<details>自带语义：浏览器原生识别为“可切换内容块”，屏幕阅读器会读出“已展开”或“已折叠” - 键盘支持开箱即用：聚焦
<summary>后按空格或回车即可切换，无需额外监听keydown - 状态同步自动完成：
open属性变更时，aria-expanded和视觉状态同步更新，不用手动维护 - 注意：不要给
<summary>加tabindex="0"——它默认可聚焦，加了反而破坏原生行为
<button>必须显式声明type属性
省略type的<button>在<form>内默认触发提交，这是最常被忽略的表单陷阱之一。
-
<button>提交</button>→ 触发submit事件，即使没写onclick -
<button type="button">取消</button>→ 纯交互按钮，无默认行为 -
<button type="submit">保存</button>→ 明确声明提交意图，便于后续绑定逻辑或埋点 - 别用
<div onclick="...">替代<button>：缺失语义、不可键盘聚焦、不响应Enter键
<label>绑定失效的三个常见原因
点击文字无法聚焦输入框，通常不是JS问题，而是HTML结构或属性配置错误。
立即学习“前端免费学习笔记（深入）”；
-
for值与id不完全匹配（大小写、空格、特殊字符）：<label for="email-input"></label>必须对应<input id="email-input">，不能是emailInput或email_input - 嵌套方式错误：
<label>邮箱<input></label>合法，但若中间插入span等非透明元素（如<label>邮箱<span><input></span></label>），部分浏览器会中断绑定 - 动态生成的
input未设置id，或id重复：每个id必须唯一，否则for指向不可预期
用data-属性代替内联onclick的实操要点
保留HTML干净、便于统一管控行为，但必须配合正确的事件委托和上下文处理。
- 只用
data-action类钩子：<button data-action="open-modal" data-target="login">登录</button> - 监听
document而非单个元素，避免重复绑定：document.addEventListener('click', e => { if (e.target.dataset.action === 'open-modal') { ... } }) - 箭头函数里
this不指向触发元素，改用e.target或e.currentTarget - 禁止混合使用：
onclick="doSomething()"和data-action共存会导致行为不可控，上线前必须清理
真正难的不是记住这些标签，而是在写第一行HTML时就决定：这里该用原生语义，还是绕道JS。一旦跳过这步，后面补可访问性、适配键盘、兼容屏幕阅读器，成本会指数级上升。
