import{_ as r,c as a,a as l,o}from"./app-CsTq_I9B.js";const t={};function n(i,e){return o(),a("div",null,[...e[0]||(e[0]=[l('<p>Web（万维网）是一个基于浏览器与服务器的“信息与应用平台”。用户通过浏览器访问网站，浏览器通过 <strong>HTTP/HTTPS</strong> 与服务器交互，服务器返回页面或数据，最终在浏览器中呈现并产生交互。</p><ul><li>浏览器：渲染页面（HTML/CSS/JS）、执行脚本、发起网络请求。</li><li>服务器：处理业务逻辑、读写数据库、对外提供 API。</li><li>数据库：持久化存储（MySQL/PostgreSQL/MongoDB 等）。</li></ul><p>简而言之：浏览器负责“看与用”，服务器负责“算与存”。</p><h2 id="前端基础概念" tabindex="-1"><a class="header-anchor" href="#前端基础概念"><span>前端基础概念</span></a></h2><ul><li>HTML：结构与语义（页面“骨架”）。</li><li>CSS：表现与布局（页面“外观”）。</li><li>JavaScript：交互与逻辑（页面“大脑”）。</li><li>现代前端：模块化、构建工具、组件化框架（Vue/React/Svelte 等）。</li></ul><p>入门建议：先掌握原生 HTML/CSS/JS，再学习框架。你可以从本站文章开始：</p><ul><li>基础教程 → <code>/programming/web/basic-syntax/html-css-js/</code></li></ul><h2 id="后端基础概念" tabindex="-1"><a class="header-anchor" href="#后端基础概念"><span>后端基础概念</span></a></h2><ul><li>服务器与框架：Node.js（Express/NestJS）、Python（Flask/Django/FastAPI）、Java（Spring Boot）、Go（Gin/Fiber）。</li><li>API 风格：REST（常见）、GraphQL（灵活查询）。</li><li>数据库与 ORM：MySQL/PostgreSQL（关系型）、MongoDB（文档型）；ORM 如 Prisma/TypeORM/SQLAlchemy。</li><li>常见能力：认证授权（Session/JWT/OAuth）、文件上传、任务队列、缓存、日志与监控。</li></ul><h2 id="前后端如何协作" tabindex="-1"><a class="header-anchor" href="#前后端如何协作"><span>前后端如何协作</span></a></h2><ul><li>约定接口：路径、方法（GET/POST/PUT/DELETE）、参数与返回 JSON。</li><li>跨域与安全：CORS、CSRF/XSS/SQL 注入防护、HTTPS。</li><li>开发流程： <ol><li>需求与原型 → 2) API 设计 → 3) 前端页面与交互 → 4) 后端实现与测试 → 5) 联调与验收 → 6) 部署与监控。</li></ol></li></ul><h2 id="学习路径-从-0-到-1" tabindex="-1"><a class="header-anchor" href="#学习路径-从-0-到-1"><span>学习路径（从 0 到 1）</span></a></h2><ol><li>基础三件套：HTML + CSS + JavaScript（建议用 VSCode + Live Server）。</li><li>工具与方法：Git/GitHub、浏览器开发者工具、HTTP/REST、请求调试（Postman/Insomnia）。</li><li>进阶前端：布局（Flex/Grid）、响应式、ES6+、模块化、打包与构建（Vite/Webpack）。</li><li>后端入门：选择一种语言与框架（如 Node.js + Express），完成 CRUD 与认证。</li><li>数据库：会建表、会写基本查询；理解事务与索引。</li><li>部署与上线：Nginx 反向代理、Docker、环境变量、日志与监控。</li></ol><p>建议开发一个“待办清单 + 登录 + 数据持久化”的完整小项目，贯穿前后端与部署。</p><h2 id="推荐学习资源" tabindex="-1"><a class="header-anchor" href="#推荐学习资源"><span>推荐学习资源</span></a></h2><p>通用与入门：</p><ul><li><a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">MDN Web Docs（HTML/CSS/JS 全面权威）</a></li><li><a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp（系统课程与练习）</a></li><li><a href="https://roadmap.sh/" target="_blank" rel="noopener noreferrer">Roadmap.sh（前端/后端学习路径图）</a></li></ul><p>前端：</p><ul><li><a href="https://developer.mozilla.org/en-US/docs/Learn" target="_blank" rel="noopener noreferrer">HTML/CSS 基础（MDN）</a></li><li><a href="https://css-tricks.com/" target="_blank" rel="noopener noreferrer">CSS-Tricks（样式与布局技巧）</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" rel="noopener noreferrer">JavaScript 基础与进阶（MDN）</a></li><li><a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue 官方文档</a></li></ul><p>后端：</p><ul><li><a href="https://nodejs.org/en/docs" target="_blank" rel="noopener noreferrer">Node.js 文档</a></li><li><a href="https://expressjs.com/" target="_blank" rel="noopener noreferrer">Express</a></li><li><a href="https://docs.nestjs.com/" target="_blank" rel="noopener noreferrer">NestJS</a></li><li><a href="https://spring.io/projects/spring-boot" target="_blank" rel="noopener noreferrer">Spring Boot</a></li><li><a href="https://docs.djangoproject.com/" target="_blank" rel="noopener noreferrer">Django</a></li><li><a href="https://flask.palletsprojects.com/" target="_blank" rel="noopener noreferrer">Flask</a></li><li><a href="https://fastapi.tiangolo.com/" target="_blank" rel="noopener noreferrer">FastAPI</a></li></ul><p>数据库与 ORM：</p><ul><li><a href="https://dev.mysql.com/doc/" target="_blank" rel="noopener noreferrer">MySQL</a></li><li><a href="https://www.postgresql.org/docs/" target="_blank" rel="noopener noreferrer">PostgreSQL</a></li><li><a href="https://www.mongodb.com/docs/" target="_blank" rel="noopener noreferrer">MongoDB</a></li><li><a href="https://www.prisma.io/docs" target="_blank" rel="noopener noreferrer">Prisma（Node.js ORM）</a></li><li><a href="https://typeorm.io/" target="_blank" rel="noopener noreferrer">TypeORM</a></li></ul><p>工具：</p><ul><li><a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">VSCode</a></li><li><a href="https://www.postman.com/" target="_blank" rel="noopener noreferrer">Postman</a></li><li><a href="https://insomnia.rest/" target="_blank" rel="noopener noreferrer">Insomnia</a></li><li><a href="https://docs.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a></li></ul><h2 id="本站相关内容" tabindex="-1"><a class="header-anchor" href="#本站相关内容"><span>本站相关内容</span></a></h2><ul><li>Web 前端基础讲解 → <code>/programming/web/basic-syntax/html-css-js/</code></li><li>后续将补充：前端工程化、接口联调、部署与运维实战等专题。</li></ul>',27)])])}const p=r(t,[["render",n]]),h=JSON.parse('{"path":"/programming/web/","title":"Web 概览与学习路径","lang":"zh-CN","frontmatter":{"title":"Web 概览与学习路径","permalink":"/programming/web/","createTime":"2025/10/28 22:20:00"},"readingTime":{"minutes":2.46,"words":739},"git":{"createdTime":1761665220000,"updatedTime":1761666185000,"contributors":[{"name":"祀梦","username":"","email":"3501646051@qq.com","commits":2,"avatar":"https://gravatar.com/avatar/6406a81eeddc359cf3d3ce018797689fc6d014ff06215c27d0210b42e8f5a8ab?d=retro"}]},"filePathRelative":"notes/programming/web/README.md","headers":[]}');export{p as comp,h as data};