前端开发知识地图
AI 应用开发者的差异化竞争力：从 HTML/CSS/JS 基础三件套，到 jQuery/Bootstrap 经典库，再到 Vue3 现代框架，覆盖从 0 到 1 的前端开发链路。
导航
基础三件套
| # | 笔记 | 一句话 |
|---|---|---|
| 1 | Knowledge/Engineering/HTML | 语义化标签、表单元素、HTML5 新特性、多媒体 |
| 2 | Knowledge/Engineering/CSS | 选择器、盒模型、Flexbox/Grid 布局、动画、响应式 |
| 3 | Knowledge/Engineering/JavaScript | ES6+ 语法、DOM/BOM、事件循环、异步编程、面向对象 |
数据格式与库
| # | 笔记 | 一句话 |
|---|---|---|
| 4 | JSON | 前后端数据交换标准格式：语法、解析、序列化、与 Python 交互 |
| 5 | jQuery | 经典 DOM 操作库：选择器、DOM 操作、事件、Ajax、动画、插件 |
CSS 框架
| # | 笔记 | 一句话 |
|---|---|---|
| 6 | Bootstrap | 响应式 UI 框架：栅格系统、组件库、响应式布局 |
现代框架
| # | 笔记 | 一句话 |
|---|---|---|
| 7 | Vue3基础 | 组合式 API、响应式系统、组件化开发、指令、路由、状态管理 |
性能与安全
| 笔记 | 核心内容 | 类型 |
|---|---|---|
| 前端安全 | XSS（存储/反射/DOM 型）、CSRF、点击劫持与防御策略 | 概念解释 |
| 性能优化之首屏加载 | FCP/LCP/TTI 指标、资源瘦身、网络优化、SSR/SSG | 概念解释 |
学习路径
基础：HTML → CSS → JavaScript
扩展：JSON（数据交换） → jQuery（DOM 操作） → Bootstrap（响应式 UI）
进阶：Vue3（现代框架） → 前端工程化（Vite/Webpack、npm/pnpm）建议每个阶段动手写个小项目，前端是「做」出来的，不是「看」出来的。
与 AI 的关联
| 模块 | AI 应用场景 |
|---|---|
| HTML/CSS/JS | AI 应用前端基础、聊天界面骨架 |
| JavaScript | 流式输出、SSE 实时接收 LLM 响应、客户端渲染 |
| Vue3 | 构建复杂 AI 应用界面：聊天 UI、数据看板、模型演示 |
| Bootstrap | 快速搭建 AI Demo 页面、内部工具原型 |
关联
- 🛠️ 工程工具-MOC
- Python-MOC — Django 全栈开发中的前端配合
- IDE与环境-MOC — VS Code 是前端开发主力 IDE
- DataAnalysis-MOC — Matplotlib 可视化与前端图表互补