页面加载后确保第一个元素获得焦点需用autofocus属性（仅对可聚焦元素有效）或scrollIntoView()方法（适用于非表单元素），注意时机、兼容性及移动端限制。
页面加载后如何确保第一个元素获得焦点
HTML5 本身没有“让页面第一个显示”的指令，所谓“第一个显示”，实际是用户视角下视觉焦点或滚动位置的控制问题。核心手段就两个：自动聚焦某个元素，或强制滚动到指定位置。多数情况下，你真正需要的是让关键内容（比如搜索框、主标题）第一时间进入视口并可交互。
autofocus 属性只对可聚焦元素有效
给 <input>、<textarea></textarea>、<button></button> 或带 tabindex 的元素加 autofocus，浏览器会在页面加载完成时自动把焦点设过去——但仅限于该元素在 DOM 中存在且未被 disabled。
-
autofocus在同一页面只能生效一次，多个元素都写也不会轮换 - 如果元素在
display: none或visibility: hidden状态下，autofocus会静默失败，不报错也不聚焦 - 移动端 Safari 对
autofocus支持有限，常被忽略（尤其在非用户手势触发的上下文中） - 示例：
<input type="text" autofocus placeholder="搜点什么">
用 scrollIntoView() 滚动到首屏关键元素
当首屏内容不是表单控件，而是某个 <h1></h1>、<section id="hero"></section> 或 banner 区域时，autofocus 就不管用了。这时候得靠 JS 主动滚动。
- 推荐在
DOMContentLoaded后调用：document.getElementById("hero").scrollIntoView({ behavior: "smooth" }); - 注意：如果目标元素还没渲染（比如由框架异步挂载），直接调用会报
Cannot read property 'scrollIntoView' of null -
scrollIntoView()默认行为是让元素顶部对齐视口顶部；加{ block: "start" }更可控，避免被 sticky header 遮挡 - 部分老版本 Android WebView 不支持
behavior: "smooth"，降级为默认行为更稳妥
避免 body 上设 scroll-behavior: smooth 引发意外跳转
全局开启平滑滚动看似方便，但它会让所有锚点跳转、scrollIntoView()、甚至浏览器前进/后退都变慢半拍，而且无法单独禁用。更麻烦的是：如果页面初始 URL 带 hash（如 example.com/#contact），浏览器会在 JS 执行前就尝试滚动，此时若目标元素尚未就绪，就会滚到空白处，之后 JS 再滚一次，造成“闪一下”。
立即学习“前端免费学习笔记（深入）”；
- 不要无差别在
body上写scroll-behavior: smooth - 如需平滑效果，只在明确调用
scrollIntoView()时传参控制 - 对 hash 导航，建议监听
hashchange事件，延迟一小会儿再滚动，确保 DOM 已就位
v-if 或 *ngIf，autofocus 和 scrollIntoView() 都可能失效。 
