AI生成

学 前端自习室FRONTEND LAB 进入课程 →

纯原生 HTML / CSS / JS · 离线可用 · 零框架

前端 自习室 边学边写

不是静态文档，而是可以动手改的学习站。 从 HTML 地基到异步与 BOM，66 课、9 章、130+ 实验台， 改一行 CSS，立刻看见变化。

从第一课开始 查看学习路线
66课时
130+动手实验
9章节
7阶段

01 — FEATURED

四门代表课

从结构到样式，从脚本到实验台——这几门课撑起后面全部内容。往下滚，卡片会依次叠上来。

headermainarticlesection
01 · HTML 基础

语义结构，先把地基打牢

认识标签与属性、文档语义、表单与多媒体。结构对了，后面样式和脚本才有地方落。

  • 13 课
  • 语义化
  • 表单
进入章节 →
02 · CSS 基础与布局

盒模型、选择器、Flex 与 Grid

把显示与尺寸、颜色单位、层叠与 BFC、现代布局一次讲透。页面开始真正好看。

  • 31 课
  • Flex / Grid
  • 响应式
进入章节 → 
function greet() {
  return 'hello';
}
03 · JavaScript

从变量到异步，一条线走通

基础语法、DOM 与事件、作用域闭包、Promise 与事件循环。浏览器里唯一会动的语言。

  • 18 课
  • DOM
  • 异步
进入章节 →
04 · 实时实验台

改一行，350ms 内看见结果

每课都配可编辑实验台。左边改代码，右边预览自动刷新——学的是手感，不是背诵。

  • 130+ 实验
  • 即时预览
  • 离线可用
去动手 →

02 — LEARNING PATH

从零到大神 · 六阶段

一条不抄近路的自学路线：HTML/CSS 地基 → JavaScript → TypeScript → 工程化 → 运行时 → 框架。 绿色标签是新星技术，主标签是底层原理。往下滚，阶段会一层层叠上来。

01 · 已落地 4 章

地基 · HTML + CSS

语义化结构让内容被机器读得懂，CSS 布局与动画让页面好看且灵动。先把标签语义、盒模型、Flex/Grid 吃透。

  • HTML5
  • CSS 基础
  • Flex / Grid
  • CSS3 动画
HTML 基础 CSS 基础 CSS 布局 CSS3 进阶
02 · 已落地 5 章

脚本 · JavaScript

别急着背 API：事件循环 → Promise / async → 作用域闭包 → 事件与 BOM → ES 模块化。

  • ECMAScript
  • DOM / BOM
  • 事件循环
  • Promise
JS 基础 JS DOM JS 进阶 异步 事件与 BOM
03 · 待落地

类型 · TypeScript

给 JavaScript 补上静态类型：标注 → 接口与泛型 → 类型收窄。在写错之前就拦住。

  • 类型标注
  • interface
  • 泛型
  • tsconfig
TS 官方文档
04 · 待落地

工程化 · 构建与包管理

npm / pnpm / yarn、Vite / esbuild、ESM / CJS。分清开发时工具与运行时能力。

  • pnpm
  • Vite
  • ESM / CJS
pnpm Vite
05 · 待落地

运行时 · Node.js / Bun / Deno

先吃透 Node 事件循环与 npm，再看 Bun（全能更快）与 Deno（原生 TS、安全沙箱）。

  • Node.js
  • Bun
  • Deno
Node Bun Deno
06 · 待落地

框架 · React / Vue + Tailwind

把地基收拢成大规模应用。框架是脚手架——用好你之前学的 DOM、状态与构建。

  • React
  • Vue
  • Tailwind
React Vue Tailwind

03 — CURRICULUM

九章 · 六十六课

建议自上而下学：先地基，再脚本。点击进入章节目录。

  1. 01

    HTML 基础

    结构、语义、表单、多媒体
    13 课
  2. 02

    CSS 基础

    盒模型、选择器、颜色单位
    13 课
  3. 03

    CSS 布局

    Flex · Grid · BFC · 定位
    7 课
  4. 04

    CSS3 进阶

    过渡、动画、变换、滤镜
    11 课
  5. 05

    JavaScript 基础

    变量、函数、流程、对象数组
    5 课
  6. 06

    JavaScript DOM

    节点树、查询、增删改、事件
    5 课
  7. 07

    JavaScript 进阶

    作用域、闭包、this、原型
    4 课
  8. 08

    异步与 WebAPI

    事件循环、Promise、async、Fetch
    4 课
  9. 09

    事件与 BOM

    事件流、高频事件、BOM、模块化
    4 课

04 — LIVE LAB

学习站的核心是实验台

输入框与预览 iframe 联动，约 350ms 自动刷新。随便改、随时恢复——把试错变成最短路径。

  • 即时 编辑后预览几乎无感延迟
  • 可逆 刷新即恢复示例代码
  • 可传 每课独立 HTML，离线双击即开
去互动练习
experiment.html LIVE 
.card {
  transform: translateY(24px);
  opacity: 0;
  transition: all .6s
    cubic-bezier(.16, 1, .3, 1);
}
.card.in {
  transform: none;
  opacity: 1;
}

05 — BEGIN

准备好了吗 从 HTML 第一课 开始动手

纯原生、离线可用、零构建。打开第一课，边改边学。

进入章节目录 第一课