# Web 概览与学习路径 | 仲夏夜之梦
爱与回忆的小世界，记录生活中的每一份温暖与感动

Skip to content

# Web 概览与学习路径

约 739 字大约 2 分钟

2025-10-28

Web（万维网）是一个基于浏览器与服务器的“信息与应用平台”。用户通过浏览器访问网站，浏览器通过 HTTP/HTTPS 与服务器交互，服务器返回页面或数据，最终在浏览器中呈现并产生交互。

- 浏览器：渲染页面（HTML/CSS/JS）、执行脚本、发起网络请求。
- 服务器：处理业务逻辑、读写数据库、对外提供 API。
- 数据库：持久化存储（MySQL/PostgreSQL/MongoDB 等）。

简而言之：浏览器负责“看与用”，服务器负责“算与存”。

## 前端基础概念

- HTML：结构与语义（页面“骨架”）。
- CSS：表现与布局（页面“外观”）。
- JavaScript：交互与逻辑（页面“大脑”）。
- 现代前端：模块化、构建工具、组件化框架（Vue/React/Svelte 等）。

入门建议：先掌握原生 HTML/CSS/JS，再学习框架。你可以从本站文章开始：

- 基础教程 → `/programming/web/basic-syntax/html-css-js/`

## 后端基础概念

- 服务器与框架：Node.js（Express/NestJS）、Python（Flask/Django/FastAPI）、Java（Spring Boot）、Go（Gin/Fiber）。
- API 风格：REST（常见）、GraphQL（灵活查询）。
- 数据库与 ORM：MySQL/PostgreSQL（关系型）、MongoDB（文档型）；ORM 如 Prisma/TypeORM/SQLAlchemy。
- 常见能力：认证授权（Session/JWT/OAuth）、文件上传、任务队列、缓存、日志与监控。

## 前后端如何协作

- 约定接口：路径、方法（GET/POST/PUT/DELETE）、参数与返回 JSON。
- 跨域与安全：CORS、CSRF/XSS/SQL 注入防护、HTTPS。
- 开发流程：
  1. 需求与原型 → 2) API 设计 → 3) 前端页面与交互 → 4) 后端实现与测试 → 5) 联调与验收 → 6) 部署与监控。

## 学习路径（从 0 到 1）

1. 基础三件套：HTML + CSS + JavaScript（建议用 VSCode + Live Server）。
2. 工具与方法：Git/GitHub、浏览器开发者工具、HTTP/REST、请求调试（Postman/Insomnia）。
3. 进阶前端：布局（Flex/Grid）、响应式、ES6+、模块化、打包与构建（Vite/Webpack）。
4. 后端入门：选择一种语言与框架（如 Node.js + Express），完成 CRUD 与认证。
5. 数据库：会建表、会写基本查询；理解事务与索引。
6. 部署与上线：Nginx 反向代理、Docker、环境变量、日志与监控。

建议开发一个“待办清单 + 登录 + 数据持久化”的完整小项目，贯穿前后端与部署。

## 推荐学习资源

通用与入门：

- MDN Web Docs（HTML/CSS/JS 全面权威）
- freeCodeCamp（系统课程与练习）
- Roadmap.sh（前端/后端学习路径图）

前端：

- HTML/CSS 基础（MDN）
- CSS-Tricks（样式与布局技巧）
- JavaScript 基础与进阶（MDN）
- Vue 官方文档

后端：

- Node.js 文档
- Express
- NestJS
- Spring Boot
- Django
- Flask
- FastAPI

数据库与 ORM：

- MySQL
- PostgreSQL
- MongoDB
- Prisma（Node.js ORM）
- TypeORM

工具：

- VSCode
- Postman
- Insomnia
- Docker

## 本站相关内容

- Web 前端基础讲解 → `/programming/web/basic-syntax/html-css-js/`
- 后续将补充：前端工程化、接口联调、部署与运维实战等专题。