From 09ce0b7b78bc28908a012455b99b7c2e1004418c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=80=E6=A2=A6?= <3501646051@qq.com>
Date: Tue, 28 Oct 2025 23:43:05 +0800
Subject: [PATCH] =?UTF-8?q?docs(web):=20=E6=9B=B4=E6=96=B0Web=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E5=AD=A6=E4=B9=A0=E7=AC=94=E8=AE=B0=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E4=B8=8E=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构README文档，扩展Web开发概览内容并添加学习路径
- 重新组织文档结构，增加基础概念解释
- 添加前后端协作流程说明
- 提供详细学习路径与资源推荐
- 更新创建时间与标题以反映内容变化
---
 docs/notes/programming/web/README.md | 89 +++++++++++++++++++++++++++-
 1 file changed, 87 insertions(+), 2 deletions(-)

diff --git a/docs/notes/programming/web/README.md b/docs/notes/programming/web/README.md
index 73ee2b3..6903f09 100644
--- a/docs/notes/programming/web/README.md
+++ b/docs/notes/programming/web/README.md
@@ -1,5 +1,90 @@
 ---
-title: Web 开发学习笔记
-createTime: 2025/10/28 21:23:18
+title: Web 概览与学习路径
 permalink: /programming/web/
+createTime: 2025/10/28 22:20:00
 ---
+
+# Web 是什么？
+
+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 全面权威）](https://developer.mozilla.org/)
+- [freeCodeCamp（系统课程与练习）](https://www.freecodecamp.org/)
+- [Roadmap.sh（前端/后端学习路径图）](https://roadmap.sh/)
+
+前端：
+- [HTML/CSS 基础（MDN）](https://developer.mozilla.org/en-US/docs/Learn)
+- [CSS-Tricks（样式与布局技巧）](https://css-tricks.com/)
+- [JavaScript 基础与进阶（MDN）](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [Vue 官方文档](https://vuejs.org/)
+
+后端：
+- [Node.js 文档](https://nodejs.org/en/docs)
+- [Express](https://expressjs.com/)
+- [NestJS](https://docs.nestjs.com/)
+- [Spring Boot](https://spring.io/projects/spring-boot)
+- [Django](https://docs.djangoproject.com/)
+- [Flask](https://flask.palletsprojects.com/)
+- [FastAPI](https://fastapi.tiangolo.com/)
+
+数据库与 ORM：
+- [MySQL](https://dev.mysql.com/doc/)
+- [PostgreSQL](https://www.postgresql.org/docs/)
+- [MongoDB](https://www.mongodb.com/docs/)
+- [Prisma（Node.js ORM）](https://www.prisma.io/docs)
+- [TypeORM](https://typeorm.io/)
+
+工具：
+- [VSCode](https://code.visualstudio.com/)
+- [Postman](https://www.postman.com/)
+- [Insomnia](https://insomnia.rest/)
+- [Docker](https://docs.docker.com/)
+
+## 本站相关内容
+
+- Web 前端基础讲解 → `/programming/web/basic-syntax/html-css-js/`
+- 后续将补充：前端工程化、接口联调、部署与运维实战等专题。