门
第 1 章 前端是什么，怎么学
What Is Frontend, and How to Learn It
后端同学天天跟数据库、接口、部署打交道，用户看不见你写的代码。前端恰恰相反——用户直接看到的就是前端：你打开网页第一眼看到的那个按钮、那个颜色、那个动效，全是前端写的。所以前端是互联网的门面，需求大、岗位多、迭代快，是后端工程师想转全栈时第一个要补的板块。
论前端三件套：骨架、衣服、灵魂
HTML（结构）：负责"这页有什么"。标题、段落、按钮、表单，全是 HTML 标签。相当于盖房子的钢筋骨架。
CSS（样式）：负责"长什么样"。颜色、字号、边距、布局、动画。相当于粉刷、装修、家具。
JavaScript（行为）：负责"能干什么"。点按钮弹提示、发请求拿数据、页面滚动跟着变。相当于电路和开关，让房子活起来。
后面你会发现，这三样加起来还不够：人多了代码就乱，于是有了 TypeScript（类型）、Vite（构建）、React（组件化）。但地基永远是这三件套，别一上来就框架。
前端发展简史：一句话版
| 年代 | 在干嘛 |
|---|---|
| 1990s 静态页面 | HTML 写死，改一个字要重新发布。后端 JSP/PHP 拼字符串。 |
| 2005 前后 jQuery | DOM 操作太痛苦，jQuery 把跨浏览器的坑全包了。"$("按钮").click(…)" 写了十年。 |
| 2010 前后 SPA | Angular / Backbone 出现，页面不再整页刷新，URL 变了内容局部换。单页应用（Single Page App）时代开始。 |
| 2013 React 诞生 | Facebook 提出"UI = f(state)"，虚拟 DOM + 组件化，统治至今。 |
| 2016 后 工程化 | Node / Webpack / npm 把前端从"写页面"变成"写工程"。TypeScript 上桌。 |
| 2020 后 SSR + 全栈 | Next.js 把 React 搬到服务端，解决 SEO 和首屏白屏；Vite 把启动时间从分钟级砍到毫秒级。 |
| 2024 后 AI 协同 | Vercel AI SDK、流式输出、Function Calling 把"前端 + 大模型"变成新标配。 |
推荐学习路线（别跳）
- HTML5（3 天）：看懂标签会写页面结构就行。
- CSS3（2 周）：盒模型、Flex、Grid、响应式，这是前端最磨人的部分。
- JavaScript ES2024（1 个月）：变量、函数、对象、异步、DOM。这是内功，绕不过去。
- TypeScript 5（2 周）：给 JS 加类型，大项目必备。
- 工程化（1 周）：Vite、ESLint、pnpm，知道现代项目怎么跑起来。
- React 19（1 个月）：组件、Hooks、状态，写完一个小项目。
- 进阶篇（下一册）：路由、状态管理、Next.js、Tauri、AI 协同、性能部署。
环境搭建：30 分钟搞定
三件套是浏览器直接跑的，但要写现代工程，你需要装四样东西。
| 工具 | 装它干嘛 |
|---|---|
| 现代浏览器 | Chrome / Edge / Safari 任选。F12 打开 DevTools，是前端最重要的武器。Elements 看结构、Console 看报错、Network 看请求、Performance 查卡顿。 |
| VS Code | 免费编辑器。推荐装插件：ESLint、Prettier - Code formatter、Tailwind CSS IntelliSense、Error Lens。 |
| Node.js 22 LTS | 前端构建工具都跑在 Node 上。用 nvm（mac/Linux）或 nvm-windows 装，方便切版本。终端里 node -v 看到 v22.x 就行。 |
| pnpm | 包管理器，比 npm 快、省磁盘。装完 Node 后跑 npm i -g pnpm。 |
第一个网页：建一个 index.html，双击用浏览器打开
<!-- index.html —— 浏览器把这个文件读进去，就渲染出一个网页 -->
<!DOCTYPE html> <!-- 告诉浏览器：这是 HTML5 文档 -->
<html lang="zh-CN"> <!-- 根标签，lang 给搜索引擎和读屏软件用 -->
<head>
<meta charset="UTF-8"> <!-- 字符集，不写中文会乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 手机上按屏幕宽度渲染 -->
<title>我的第一个页面</title>
</head>
<body>
<h1>你好，前端</h1>
<p>这一页是用 HTML 写的，下一段会用 CSS 让它好看一点。</p>
<button onclick="alert('你点了我')">点我</button>
</body>
</html>
保存后双击文件，浏览器里就能看到。这就是前端的全部起点——一个纯文本文件，浏览器读一遍，画给你看。