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。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 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 手动更新坐标

最麻烦的不是写引导层，而是处理用户中途关闭、刷新后重复弹出、屏幕缩放导致定位偏移这些边界情况——它们不会报错，但会让新手觉得“教学功能时灵时不灵”。