html引导层仅是视觉容器，教学功能需手动绑定事件、动态注入文案、联动dom锚点、适配框架生命周期、处理pointer-events与z-index层级、监听懒加载及滚动，并解决关闭/刷新/缩放等边界问题。
HTML引导层本身不是教学工具，它只是视觉提示容器；真正起教学作用的是你往里面塞的内容和交互逻辑。
引导层不自动带教学功能，得手动绑定事件和文案
很多开发者以为加个半透明遮罩层（div.overlay）再叠个箭头图标就完事了，结果用户点完没反应、文案不更新、步骤跳不过去——因为引导层没和 DOM 元素联动。
-
dataset.step或data-tour-id这类属性必须手动加在目标按钮/输入框上，否则querySelector找不到锚点 - 每步的文案不能硬编码在 HTML 里，得用 JS 动态注入，否则无法适配多语言或用户操作反馈（比如“已填写邮箱”）
- 点击「下一步」后，必须显式调用
scrollIntoView({ block: 'center' })，否则新高亮区域可能被折叠菜单或固定头部挡住
新手教学容易卡在「自动触发时机」上
常见错误是把引导初始化写在 DOMContentLoaded 里，但此时 Vue/React 组件还没挂载，目标节点不存在，getElementById('submit-btn') 返回 null。
- React 用户得等
useEffect(() => { initTour() }, [])，且确保 DOM 已由组件渲染完成 - Vue 3 组合式 API 中，要在
onMounted后延迟一帧：nextTick(() => initTour()) - 如果页面有懒加载模块（如 Tab 切换后才渲染的表单），引导必须监听对应事件（如
tab-change自定义事件）再激活该步骤
pointer-events: none 和 z-index 的坑比想象中多
引导层要透出底层可点击元素，又得拦截点击防止误操作——这个平衡稍不注意就失效。
- 遮罩层设
pointer-events: none后，其子元素（如「跳过」按钮）必须单独设pointer-events: auto，否则按钮点不了 -
z-index值不能只看数字大小：若父容器用了transform或will-change，会创建新的层叠上下文，导致引导层被压在下面 - Chrome 120+ 对
position: fixed+transform组合有渲染异常，建议引导层用position: absolute并监听scroll手动更新坐标
最麻烦的不是写引导层，而是处理用户中途关闭、刷新后重复弹出、屏幕缩放导致定位偏移这些边界情况——它们不会报错，但会让新手觉得“教学功能时灵时不灵”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
