HTML不提供自动引导层功能，所有引导效果均依赖CSS定位（fixed/absolute）、透明遮罩、动态高亮框（基于getBoundingClientRect()计算位置）和浮动提示气泡协同实现，并需JavaScript管理状态与事件。
支持，但不是自动生效的——HTML本身不提供引导层功能，所有“引导层”效果都依赖 position: fixed 或 absolute + 透明蒙版 + 高亮框 + 浮动提示的组合实现，本质是 CSS + JavaScript 控制 DOM 层级和显示逻辑。
为什么直接写 <div class="guide-overlay"></div> 不会自动引导
HTML 标签只是静态结构容器，没有交互、定位、动画或状态管理能力。所谓“引导层”，实际是三部分协同工作：
-
tourOverlay：全屏半透明遮罩层，用z-index压在最底层，阻止用户点击其他区域 -
tourHighlight：绝对定位的镂空高亮框（常通过box-shadow或clip-path实现），套在目标元素上 -
tourTooltip：浮动气泡，带箭头和文字，位置需动态计算（如基于目标元素getBoundingClientRect()）
缺一不可。漏掉定位逻辑或未监听 click/next 事件，引导就卡死在第一步。
getBoundingClientRect() 是定位高亮框的关键
很多新手把高亮框写成固定 top: 100px; left: 200px，结果换设备或改布局就错位。真实场景必须动态读取目标元素位置：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const target = document.getElementById('username');
const rect = target.getBoundingClientRect();
document.getElementById('tourHighlight').style.cssText = `
top: ${rect.top}px;
left: ${rect.left}px;
width: ${rect.width}px;
height: ${rect.height}px;
`;注意：getBoundingClientRect() 返回的是相对于视口的坐标，如果页面有滚动，需额外处理 window.scrollY；若目标元素在 transform 容器内，也可能需要修正。
移动端适配时 pointer-events: none 容易被忽略
引导层遮罩默认会拦截所有触摸事件，导致无法滑动页面、无法点击“下一步”按钮。常见错误写法：
.tour-overlay {
pointer-events: auto; /* ❌ 错！这样整个遮罩可点，但用户会误触背景 */
}正确做法是只对高亮区域“透传”点击，其余区域拦截：
- 遮罩层设
pointer-events: none -
tourHighlight设pointer-events: auto（仅此处响应点击） - 气泡里的按钮（如“跳过”“下一步”）单独加
pointer-events: auto并提升z-index
否则 iOS Safari 下可能出现“点不动按钮”或“滑动失效”问题。
引导层真正的复杂点不在 HTML 结构，而在于状态同步：当前步数、目标元素是否已插入 DOM、用户是否跳过、是否允许返回上一步……这些都要靠 JS 显式维护，HTML 只负责承载最终渲染结果。
