引导页应置于内作为临时覆盖物，高亮区需动态计算位置并防抖重绘，localstorage标记须显式判断'=== true'且用try...catch包裹存储操作。
引导页不是首页的简化版，它只对新用户存在，结构必须轻量、可跳过、不阻断主流程。
用 <main></main> 包住引导层，别塞进 <header></header> 或 <footer></footer>
引导层本质是临时覆盖物，语义上不属于页面头部或页脚。硬塞进 <header></header> 会导致屏幕阅读器误判为导航入口，也容易被 CSS 的 overflow: hidden 截断高亮区域。
-
<main></main>是唯一合法的顶层内容容器，搜索引擎和辅助技术都把它当主体信号 - 把整个引导遮罩（比如
<div class="intro-overlay">）直接放在 <code><main></main>开头，用position: fixed叠上去 - 不要嵌套在
<section></section>或<article></article>里——这些标签表示「可独立分发的内容」，而引导页显然不是 - 用
element.getBoundingClientRect()拿目标元素（比如document.querySelector('#btn-submit')）的视口坐标 - 把高亮层（
<div class="intro-highlight">）挂到 <code>document.body下，绕过父级overflow: hidden裁剪 - 监听
window.resize和window.scroll，重新计算位置；但注意防抖，避免频繁重绘 - 移动端要加
pointer-events: none到遮罩层，再给高亮层单独设pointer-events: auto，否则点击穿透失效 - 检查逻辑写成：
if (localStorage.getItem('seenIntro') !== 'true') { showIntro() } - 写入时机选在用户点「开始使用」或「跳过」后，执行
localStorage.setItem('seenIntro', 'true') - 用
try...catch包裹存储操作——私密模式下localStorage可能直接抛错 - 别依赖
sessionStorage做首次访问判断，关掉标签页就丢了
目标高亮区必须动态计算位置，别写死 top/left 值
静态定位在响应式页面里几乎必然失效：字体缩放、横竖屏切换、动态加载内容都会让偏移错位。真实项目中，高亮框偏移后用户点不到按钮，是最常被投诉的问题。
localStorage 标记必须显式判断 === 'true'，别用 !localStorage.seenIntro
未设置时 localStorage.getItem('seenIntro') 返回 null，不是 undefined 或 false。直接取反会把 null 当成 true，导致老用户反复看到引导页。
最易被忽略的是状态同步边界：用户清缓存、跨设备登录、PWA 离线重载……这些情况会让 localStorage 失效或不同步。真要健壮，得配合后端埋点或设备指纹做兜底，前端单靠 localStorage 只能覆盖常规场景。
