Files
SiMengWebSite_Notes/docs/notes/programming/web
Kawaxxxsaki 2391018d79 chore: 更新mermaid依赖至11.12.1并删除过时文档
删除html2.md文档并简化html-tags-attributes.md内容
2025-11-02 19:59:19 +08:00
..

title, permalink, createTime
title permalink createTime
Web 概览与学习路径 /programming/web/ 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.jsExpress/NestJS、PythonFlask/Django/FastAPI、JavaSpring Boot、GoGin/Fiber
  • API 风格REST常见、GraphQL灵活查询
  • 数据库与 ORMMySQL/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、环境变量、日志与监控。

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

推荐学习资源

通用与入门:

前端:

后端:

数据库与 ORM

工具:

本站相关内容

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