前端板块
前端是浏览器里能看到、能点到的一切——网页的排版、按钮、动画、弹窗，甚至和服务器交换数据，都属于前端的范畴。本板块按技术栈组织，从骨架（HTML）到灵魂（JavaScript）逐个击破，每篇都配可直接在浏览器里运行的示例，零基础也能看懂、动手跑。
🧪 想直接动手不装软件？打开 前端在线运行场：一个代码区随手写，点「运行」立刻看效果。
技术栈
| 技术栈 | 核心内容 | 一句话介绍 | 状态 | 推荐先修 | 预计学时 |
|---|---|---|---|---|---|
| HTML | 标签、结构、表单、多媒体 | 网页的骨架，8 篇在线运行教程 | ✅ 全 8 章 | 无 | 4–6 小时 |
| CSS | 选择器、盒模型、Flex、Grid | 网页的皮肤，让页面好看 | ✅ 全 8 章 | HTML | 4–6 小时 |
| JavaScript | 变量、函数、DOM、事件 | 网页的灵魂，让页面动起来 | ✅ 全 6 章（在线运行） | HTML | 6–10 小时 |
| jQuery | 选择器、DOM、事件、动画、AJAX | 简洁高效的 JS 库，写更少代码做更多事 | ✅ 全 8 章 | JavaScript | 4–6 小时 |
| JSON | 语法、parse/stringify、嵌套取值、排错 | 前后端传数据的通用格式 | ✅ 全 6 章 | JavaScript | 2–3 小时 |
| AJAX | fetch、渲染数据、POST、async/await | 用 fetch 把数据真正请求回来 | ✅ 全 6 章 | JavaScript、JSON | 3–5 小时 |
| Bootstrap 5 | 栅格、组件、表单、工具类、JS 插件 | 加类名就好看的组件库，快速拼响应式页面 | ✅ 全 8 章 | HTML、CSS | 4–6 小时 |
| Vue | 模板、响应式、组件、通信 | 数据驱动的现代框架 | ✅ 全 8 章 | JavaScript | 6–8 小时 |
| React | JSX、useState/useEffect、props | 全球最流行的前端库 | ✅ 全 8 章 | Vue（建议） | 6–8 小时 |
| Electron | 主进程、渲染进程、IPC、打包 | 用前端技术写跨平台桌面应用 | ✅ 全 8 章 | HTML、CSS、JavaScript | 6–8 小时 |
学习路线
HTML（结构）→ CSS（皮肤）→ JavaScript（交互）→ jQuery（高效交互）→ JSON / AJAX（数据交互）→ Bootstrap 5（组件库）→ Vue / React（框架）→ Electron（桌面应用）建议顺序：先 HTML 搭骨架，再 CSS 穿上皮肤，接着 JavaScript 让页面"动"起来，jQuery 帮你用更少的代码做更多的事；然后 JSON 学会读数据、AJAX 把数据请求回来，打通前后端；Bootstrap 5 用现成组件快速拼出响应式页面；最后进 Vue / React 感受框架的自动化；想让作品离开浏览器变成能双击打开的软件，再学 Electron。跳着学容易懵，建议按章节顺序。
前端三件套（速览）
| 成分 | 比喻 | 职责 |
|---|---|---|
| HTML | 骨架 | 定义网页有什么：文字、图片、按钮、表单 |
| CSS | 皮肤 | 定义网页长什么样：颜色、字体、布局 |
| JavaScript | 灵魂 | 定义网页怎么动：点击、弹窗、请求数据 |
本板块目前涵盖 HTML、CSS、JavaScript、jQuery、JSON、AJAX、Bootstrap 5、Vue、React 与 Electron：三件套打底，JSON / AJAX 打通前后端数据交互，Bootstrap 给页面套上现成组件，再往后进 Vue / React 框架，最后用 Electron 把前端技术带出浏览器、写出桌面应用。
本板块的学习约定
- 每篇都要动手：右侧运行框（RunBox）里的代码，改一改、跑一跑，看效果立刻变化
- 不用背标签：用多了自然记住，忘了就回来查
- 顺序学习：章节是递进的，跳着看容易懵
- 在线即可：HTML 和 JS 示例都能直接在浏览器里运行，无需安装任何环境
快速入口
- 零基础从 HTML 是什么 开始，理解网页的本质
- 想让页面好看，去 CSS 是什么，给页面穿上皮肤
- 已有 HTML 基础，直接去 JavaScript 是什么，让页面动起来
- 学完 JS 想提高效率，去 jQuery 是什么，体验写更少代码做更多事
- 想让页面连上服务器，去 JSON 是什么 和 AJAX 是什么，学会请求与渲染数据
- 不想手写 CSS 也要页面好看，去 Bootstrap 5 是什么，加类名就能拼出响应式页面
- 想用前端技术做桌面软件，去 Electron 是什么，写一个能双击打开的应用
准备好了？从 HTML 是什么 开始 🐸