Frontend Lab · 界面实验室 | 星雨笔录
完全使用原生 HTML、CSS 和 JavaScript 构建的前端学习工作台，集合可运行实验、代码与效果对照、技术速查、开发手册和学习进度。
项目介绍
前端初学者常能复制代码，却难以解释代码与界面的关系。这个项目把真实运行效果、源码、知识解释和动手修改放在同一工作台中，让观察、修改和验证形成连续学习流程。
核心功能
实验与路线 263 个实验覆盖 HTML、CSS、JavaScript、网页布局与综合实践，配合前置知识、观察重点和练习。 编辑运行 切换 HTML/CSS/JS，修改源码并运行，查看控制台反馈，在电脑、平板和手机宽度之间切换。 逐条对照 将元素、CSS 声明、计算样式、实际尺寸和 JavaScript 阅读顺序与预览画面联系起来。 学习与导出 本地保存草稿、收藏和进度；导出可独立打开的完整 HTML，按需加载开发手册。
使用流程
从学习路线选择实验 → 阅读目标与源码 → 修改参数或代码 → 运行并观察页面、控制台和测量结果 → 完成自测 → 收藏、记录进度或导出页面。
技术栈
HTML
CSS
JavaScript
iframe Sandbox
LocalStorage
Playwright
关键实现
采用数据与界面分离的原生脚本组织课程；运行器使用 iframe srcdoc 与 sandbox 隔离，不授予同源权限，并限制外部网络。控制台消息校验来源和运行 token。草稿与进度保存在当前浏览器，手册章节按需加载。
项目成果
可运行实验 263 个 学习章节 24 章 技术速查 283 条
验证与交付
2026-10-15 整理版本通过 263 个实验的初始运行及整站浏览器回归，覆盖草稿、错误提示、收藏、进度、自测、导出、响应式和直接打开文件。手册检查覆盖 1,009 份教学数据，另有 24 章教学规则检查。
源码位于 AI Coding 作品集合的独立目录，运行方法与依赖以项目 README 为准。
当前阶段与使用边界
不提供后端账户或跨设备同步，不自动判断任意开放练习的正确性。运行器中的存储、剪贴板和网络能力受隔离限制。手册保留第三方课程和官方资料来源，不把所有来源材料标为原创。
界面与效果
源码与文档
查看项目源码 GitHub 集合中的独立项目目录 运行与使用说明 依赖、启动、测试和项目边界