button标签可通过autofocus属性实现页面加载后自动聚焦，仅限一个元素生效且仅初始加载触发；移动端兼容性有限，建议配合JS focus()方法及无障碍优化使用。
在 HTML 中，button 标签可以直接使用 autofocus 属性，让页面加载完成后自动获得焦点（即光标定位到该按钮上，支持键盘操作如回车触发点击）。
基本用法
只需在 <button> 标签中添加 autofocus 属性（布尔属性，无需赋值）：
注意事项
- 一个页面中**最多只能有一个元素**拥有
autofocus属性；若多个元素都写了，只有第一个生效（浏览器行为，非标准强制，但实际表现如此） - 该属性仅在页面**初始加载时触发一次**，刷新后重新生效，用户手动失焦后不会自动恢复
- 移动端（尤其是 iOS Safari）对
autofocus支持有限，可能被忽略或需用户交互后才允许聚焦表单类元素（<button>相对兼容性较好，但仍建议实测） -
autofocus不会触发focus事件的冒泡（但能监听到），若需执行额外逻辑，可结合addEventListener('focus', ...)
配合 JavaScript 的补充方案（更可控）
如果 autofocus 失效或需要延迟/条件聚焦，可用 JS 显式调用 .focus()：
<script>
// 确保 DOM 加载完成后再聚焦
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('myBtn').focus();
});
</script>
无障碍与用户体验提示
自动聚焦虽方便快捷键用户，但也可能干扰屏幕阅读器或打断用户当前操作。建议：
立即学习“前端免费学习笔记（深入）”；
- 仅对主操作按钮（如模态框中的“确定”、表单首按钮）使用 autofocus
- 避免在页面顶部有 banner 或导航栏时，把焦点落在靠下的按钮上，导致页面意外滚动
- 确保聚焦样式可见（如默认的蓝色外框），必要时用 CSS 自定义
:focus样式
