原生交互元素
原生交互元素把浏览器已经实现的键盘、焦点、状态和提交行为带到页面中。优先使用正确元素，可以少写脚本，也能减少自定义控件遗漏的状态同步和无障碍问题。
链接、按钮和表单控件不是同一种东西
html
<a href="/account">查看账户</a>
<button type="button" id="refresh">刷新数据</button>
<details>
<summary>显示高级选项</summary>
<p>这些选项默认收起。</p>
</details>链接改变资源位置，按钮触发当前页面动作，details 与 summary 提供浏览器管理的展开状态。button 在表单内默认可能是提交按钮，因此只用于普通动作时应明确写 type="button"。把按钮写成链接或反过来，会让键盘、历史记录、默认提交和用户预期彼此冲突。
dialog 可以表达对话框，但关闭、焦点返回、模态状态和不支持环境的回退仍需要检查。原生元素减少工作量，不代表可以跳过状态和生命周期设计。
变化一个条件观察边界
把按钮放进 form，不写 type，点击它可能触发表单提交。把 details 内容用 display: none 永久隐藏，会破坏它本来要表达的开关状态。把 button 换成 div 后，视觉仍可用，但需要自行补齐焦点、Enter/Space 键、禁用状态和语义角色。
运行实验
- 在表单中放入两个按钮，一个显式写
type="submit"，另一个写type="button"，记录点击后的事件。 - 只用键盘操作
a、button和summary，记录焦点顺序与激活按键。 - 用
div替换按钮，先不补脚本，记录丢失的默认行为；再说明需要补哪些契约。 - 检查
details的open状态，观察展开和收起是否能被脚本与辅助技术识别。
常见错误
- 用
div绑定 click 代替按钮。 - 表单内按钮不声明
type。 - 只实现鼠标交互，遗漏键盘和焦点。
- 自定义弹窗只显示视觉层，没有关闭、返回焦点和背景交互规则。
- 用 ARIA 角色掩盖元素本身职责选错的问题。
练习
实现一个包含“打开设置”“保存设置”和“展开高级选项”的小页面。使用原生链接、按钮和 details，验证键盘操作、表单提交和状态变化。随后故意用 div 替换保存按钮，列出它需要补回的行为，并说明为什么优先恢复原生元素。
继续阅读
下一篇进入表格，学习如何表达真正的行列关系：表格的正确用法。