前端学习思维导图

# 《前端学习思维导图》

## 一、基础知识 (Foundations)

### 1.1 HTML (HyperText Markup Language)
* 1.1.1 核心概念
        * 标签 (Tags): `<h1>` to `<h6>`, `<p>`, `<div>`, `<span>`, `<a>`, `<img>`, `<ul>`, `<ol>`, `<li>`, `<table>`, `<form>`, `<input>`, `<textarea>`, `<button>`, `<select>`, `<option>`, `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`
        * 属性 (Attributes): `id`, `class`, `style`, `src`, `href`, `alt`, `title`, `width`, `height`, `type`, `value`, `placeholder`, `required`
        * 文档结构 (Document Structure): `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, `<meta>`, `<link>`, `<body>`
        * 语义化标签 (Semantic Tags): `<article>`, `<aside>`, `<details>`, `<figcaption>`, `<figure>`, `<footer>`, `<header>`, `<main>`, `<mark>`, `<nav>`, `<section>`, `<summary>`, `<time>`
    * 1.1.2 HTML5 新特性
        * 语义化标签: 优化文档结构，提升可读性和SEO
        * 多媒体标签: `<audio>`, `<video>`, `<source>`, `<embed>`, `<track>`
        * Canvas API: 绘制2D图形
        * SVG: 矢量图形
        * Web Storage: `localStorage`, `sessionStorage`
        * Geolocation API: 获取用户地理位置
        * Web Workers: 后台运行JavaScript
        * Drag and Drop API: 拖放功能
    * 1.1.3 常用技巧
        * 表单验证
        * 响应式图片
        * SEO优化
        * 无障碍访问 (Accessibility)

### 1.2 CSS (Cascading Style Sheets)
* 1.2.1 核心概念
        * 选择器 (Selectors): 元素选择器, 类选择器, ID选择器, 属性选择器, 伪类选择器, 伪元素选择器, 组合选择器
        * 盒模型 (Box Model): `content`, `padding`, `border`, `margin`
        * 布局 (Layout): `display`, `position`, `float`, `clear`, `overflow`, `z-index`
        * 文本属性 (Text Properties): `font-family`, `font-size`, `font-weight`, `color`, `text-align`, `line-height`, `text-decoration`
        * 背景属性 (Background Properties): `background-color`, `background-image`, `background-repeat`, `background-position`, `background-size`
    * 1.2.2 CSS3 新特性
        * 圆角 (Border Radius): `border-radius`
        * 阴影 (Box Shadow & Text Shadow): `box-shadow`, `text-shadow`
        * 渐变 (Gradients): `linear-gradient`, `radial-gradient`, `conic-gradient`
        * 过渡 (Transitions): `transition`
        * 动画 (Animations): `animation`
        * 弹性盒布局 (Flexbox): `display: flex`, `flex-direction`, `justify-content`, `align-items`
        * 网格布局 (Grid): `display: grid`, `grid-template-columns`, `grid-template-rows`, `grid-gap`
        * 多列布局 (Multiple Columns): `column-count`, `column-gap`, `column-rule`
    * 1.2.3 常用技巧
        * 响应式设计 (Responsive Design): Media Queries (`@media`)
        * CSS预处理器 (CSS Preprocessors): Sass, Less, Stylus
        * CSS Reset/Normalize
        * CSS Modules, Styled Components

### 1.3 JavaScript (JS)
* 1.3.1 核心概念
        * 变量 (Variables): `var`, `let`, `const`
        * 数据类型 (Data Types): `Number`, `String`, `Boolean`, `Null`, `Undefined`, `Symbol`, `Object`
        * 运算符 (Operators): 算术运算符, 比较运算符, 逻辑运算符, 赋值运算符
        * 控制语句 (Control Statements): `if...else`, `switch`, `for`, `while`, `do...while`
        * 函数 (Functions): 函数声明, 函数表达式, 箭头函数, arguments, this, 闭包 (Closures)
        * 对象 (Objects): 对象字面量, 构造函数, 原型 (Prototype), 继承 (Inheritance)
        * 数组 (Arrays): 数组字面量, 数组方法 (push, pop, shift, unshift, splice, slice, map, filter, reduce, forEach)
        * DOM 操作 (DOM Manipulation): `document.getElementById`, `document.querySelector`, `document.createElement`, `appendChild`, `removeChild`, `addEventListener`
        * 事件 (Events): `click`, `mouseover`, `mouseout`, `keydown`, `keyup`, `submit`, `load`, `DOMContentLoaded`
    * 1.3.2 ES6+ 新特性
        * `let`, `const`: 块级作用域
        * 箭头函数 (Arrow Functions)
        * 类 (Classes)
        * 模板字符串 (Template Literals)
        * 解构赋值 (Destructuring Assignment)
        * 扩展运算符 (Spread Operator)
        * Promise, Async/Await: 异步编程
        * Module: `import`, `export`
    * 1.3.3 常用技巧
        * 异步编程 (Asynchronous Programming): Callbacks, Promises, Async/Await
        * 正则表达式 (Regular Expressions)
        * JSON (JavaScript Object Notation)
        * 本地存储 (Local Storage): `localStorage`, `sessionStorage`
        * AJAX (Asynchronous JavaScript and XML): `XMLHttpRequest`, `fetch`

## 二、进阶知识 (Advanced)

### 2.1 前端框架 (Frameworks)
* 2.1.1 React
        * 组件 (Components): 函数组件, 类组件
        * JSX
        * State & Props
        * 生命周期 (Lifecycle)
        * Hooks (useState, useEffect, useContext, useRef, useCallback, useMemo)
        * Redux / Context API: 状态管理
        * React Router: 路由
        * Next.js / Gatsby: SSR (Server-Side Rendering)
    * 2.1.2 Vue
        * 模板 (Templates)
        * 组件 (Components)
        * Data Binding
        * Computed Properties
        * Watchers
        * 生命周期 (Lifecycle)
        * Vuex: 状态管理
        * Vue Router: 路由
        * Nuxt.js: SSR (Server-Side Rendering)
    * 2.1.3 Angular
        * TypeScript
        * 组件 (Components)
        * 模板 (Templates)
        * Data Binding
        * Services
        * Modules
        * RxJS: 响应式编程
        * Angular Router: 路由
        * NgRx: 状态管理

### 2.2 构建工具 (Build Tools)
* 2.2.1 Webpack
        * Module Bundler
        * Loaders
        * Plugins
        * Code Splitting
        * Optimization
    * 2.2.2 Parcel
        * Zero Configuration
        * Fast Bundling
    * 2.2.3 Rollup
        * Library Bundler
        * Tree Shaking

### 2.3 测试 (Testing)
* 2.3.1 单元测试 (Unit Testing): Jest, Mocha, Chai
    * 2.3.2 集成测试 (Integration Testing): Cypress, Puppeteer
    * 2.3.3 端到端测试 (End-to-End Testing): Selenium

### 2.4 性能优化 (Performance Optimization)
* 2.4.1 代码优化
        * 代码压缩 (Minification)
        * 代码混淆 (Obfuscation)
        * 代码分割 (Code Splitting)
        * Tree Shaking
    * 2.4.2 资源优化
        * 图片优化
        * 字体优化
        * 缓存 (Caching)
    * 2.4.3 渲染优化
        * 减少重绘 (Repaint) 和重排 (Reflow)
        * 使用 CSS Sprites
        * 懒加载 (Lazy Loading)
    * 2.4.4 网络优化
        * CDN (Content Delivery Network)
        * HTTP/2

### 2.5 版本控制 (Version Control)
* 2.5.1 Git
        * 常用命令: `clone`, `add`, `commit`, `push`, `pull`, `branch`, `merge`, `rebase`, `checkout`, `reset`
        * Git Flow
        * GitHub / GitLab / Bitbucket

## 三、其他 (Others)

### 3.1 浏览器原理 (Browser Internals)
* 3.1.1 渲染引擎 (Rendering Engine)
    * 3.1.2 JavaScript 引擎 (JavaScript Engine)
    * 3.1.3 事件循环 (Event Loop)
    * 3.1.4 跨域 (Cross-Origin Resource Sharing, CORS)

### 3.2 设计模式 (Design Patterns)
* 3.2.1 单例模式 (Singleton Pattern)
    * 3.2.2 工厂模式 (Factory Pattern)
    * 3.2.3 观察者模式 (Observer Pattern)
    * 3.2.4 发布/订阅模式 (Publish/Subscribe Pattern)

### 3.3 数据结构与算法 (Data Structures and Algorithms)
* 3.3.1 常用数据结构: 数组, 链表, 栈, 队列, 树, 图
    * 3.3.2 常用算法: 排序算法, 搜索算法

### 3.4 DevOps (Development and Operations)
* 3.4.1 CI/CD (Continuous Integration/Continuous Delivery)
    * 3.4.2 Docker
    * 3.4.3 Kubernetes

### 3.5 安全 (Security)
* 3.5.1 XSS (Cross-Site Scripting)
    * 3.5.2 CSRF (Cross-Site Request Forgery)
    * 3.5.3 SQL 注入 (SQL Injection)
    * 3.5.4 数据加密 (Data Encryption)

### 3.6  移动端开发 (Mobile Development)
* 3.6.1 响应式设计 (Responsive Design)
    * 3.6.2 移动端适配 (Viewport, Meta Tags)
    * 3.6.3 PWA (Progressive Web App)
    * 3.6.4 React Native / Flutter / Ionic

### 3.7  服务端渲染 (Server-Side Rendering, SSR)

### 3.8  无服务器函数 (Serverless Functions)

### 3.9  GraphQL

《前端学习思维导图》

一、基础知识 (Foundations)

1.1 HTML (HyperText Markup Language)

1.1.1 核心概念
- 标签 (Tags): <h1> to <h6>, <p>, <div>, <span>, <a>, <img>, <ul>, <ol>, <li>, <table>, <form>, <input>, <textarea>, <button>, <select>, <option>, <header>, <nav>, <main>, <article>, <aside>, <footer>
- 属性 (Attributes): id, class, style, src, href, alt, title, width, height, type, value, placeholder, required
- 文档结构 (Document Structure): <!DOCTYPE html>, <html>, <head>, <title>, <meta>, <link>, <body>
- 语义化标签 (Semantic Tags): <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>
  - 1.1.2 HTML5 新特性
- 语义化标签: 优化文档结构，提升可读性和SEO
- 多媒体标签: <audio>, <video>, <source>, <embed>, <track>
- Canvas API: 绘制2D图形
- SVG: 矢量图形
- Web Storage: localStorage, sessionStorage
- Geolocation API: 获取用户地理位置
- Web Workers: 后台运行JavaScript
- Drag and Drop API: 拖放功能
  - 1.1.3 常用技巧
- 表单验证
- 响应式图片
- SEO优化
- 无障碍访问 (Accessibility)

1.2 CSS (Cascading Style Sheets)

1.2.1 核心概念
- 选择器 (Selectors): 元素选择器, 类选择器, ID选择器, 属性选择器, 伪类选择器, 伪元素选择器, 组合选择器
- 盒模型 (Box Model): content, padding, border, margin
- 布局 (Layout): display, position, float, clear, overflow, z-index
- 文本属性 (Text Properties): font-family, font-size, font-weight, color, text-align, line-height, text-decoration
- 背景属性 (Background Properties): background-color, background-image, background-repeat, background-position, background-size
  - 1.2.2 CSS3 新特性
- 圆角 (Border Radius): border-radius
- 阴影 (Box Shadow & Text Shadow): box-shadow, text-shadow
- 渐变 (Gradients): linear-gradient, radial-gradient, conic-gradient
- 过渡 (Transitions): transition
- 动画 (Animations): animation
- 弹性盒布局 (Flexbox): display: flex, flex-direction, justify-content, align-items
- 网格布局 (Grid): display: grid, grid-template-columns, grid-template-rows, grid-gap
- 多列布局 (Multiple Columns): column-count, column-gap, column-rule
  - 1.2.3 常用技巧
- 响应式设计 (Responsive Design): Media Queries (@media)
- CSS预处理器 (CSS Preprocessors): Sass, Less, Stylus
- CSS Reset/Normalize
- CSS Modules, Styled Components

1.3 JavaScript (JS)

1.3.1 核心概念
- 变量 (Variables): var, let, const
- 数据类型 (Data Types): Number, String, Boolean, Null, Undefined, Symbol, Object
- 运算符 (Operators): 算术运算符, 比较运算符, 逻辑运算符, 赋值运算符
- 控制语句 (Control Statements): if...else, switch, for, while, do...while
- 函数 (Functions): 函数声明, 函数表达式, 箭头函数, arguments, this, 闭包 (Closures)
- 对象 (Objects): 对象字面量, 构造函数, 原型 (Prototype), 继承 (Inheritance)
- 数组 (Arrays): 数组字面量, 数组方法 (push, pop, shift, unshift, splice, slice, map, filter, reduce, forEach)
- DOM 操作 (DOM Manipulation): document.getElementById, document.querySelector, document.createElement, appendChild, removeChild, addEventListener
- 事件 (Events): click, mouseover, mouseout, keydown, keyup, submit, load, DOMContentLoaded
  - 1.3.2 ES6+ 新特性
- let, const: 块级作用域
- 箭头函数 (Arrow Functions)
- 类 (Classes)
- 模板字符串 (Template Literals)
- 解构赋值 (Destructuring Assignment)
- 扩展运算符 (Spread Operator)
- Promise, Async/Await: 异步编程
- Module: import, export
  - 1.3.3 常用技巧
- 异步编程 (Asynchronous Programming): Callbacks, Promises, Async/Await
- 正则表达式 (Regular Expressions)
- JSON (JavaScript Object Notation)
- 本地存储 (Local Storage): localStorage, sessionStorage
- AJAX (Asynchronous JavaScript and XML): XMLHttpRequest, fetch

二、进阶知识 (Advanced)

2.1 前端框架 (Frameworks)

2.1.1 React
- 组件 (Components): 函数组件, 类组件
- JSX
- State & Props
- 生命周期 (Lifecycle)
- Hooks (useState, useEffect, useContext, useRef, useCallback, useMemo)
- Redux / Context API: 状态管理
- React Router: 路由
- Next.js / Gatsby: SSR (Server-Side Rendering)
  - 2.1.2 Vue
- 模板 (Templates)
- 组件 (Components)
- Data Binding
- Computed Properties
- Watchers
- 生命周期 (Lifecycle)
- Vuex: 状态管理
- Vue Router: 路由
- Nuxt.js: SSR (Server-Side Rendering)
  - 2.1.3 Angular
- TypeScript
- 组件 (Components)
- 模板 (Templates)
- Data Binding
- Services
- Modules
- RxJS: 响应式编程
- Angular Router: 路由
- NgRx: 状态管理

2.2 构建工具 (Build Tools)

2.2.1 Webpack
- Module Bundler
- Loaders
- Plugins
- Code Splitting
- Optimization
  - 2.2.2 Parcel
- Zero Configuration
- Fast Bundling
  - 2.2.3 Rollup
- Library Bundler
- Tree Shaking

2.3 测试 (Testing)

2.3.1 单元测试 (Unit Testing): Jest, Mocha, Chai
- 2.3.2 集成测试 (Integration Testing): Cypress, Puppeteer
- 2.3.3 端到端测试 (End-to-End Testing): Selenium

2.4 性能优化 (Performance Optimization)

2.4.1 代码优化
- 代码压缩 (Minification)
- 代码混淆 (Obfuscation)
- 代码分割 (Code Splitting)
- Tree Shaking
  - 2.4.2 资源优化
- 图片优化
- 字体优化
- 缓存 (Caching)
  - 2.4.3 渲染优化
- 减少重绘 (Repaint) 和重排 (Reflow)
- 使用 CSS Sprites
- 懒加载 (Lazy Loading)
  - 2.4.4 网络优化
- CDN (Content Delivery Network)
- HTTP/2

2.5 版本控制 (Version Control)

2.5.1 Git
- 常用命令: clone, add, commit, push, pull, branch, merge, rebase, checkout, reset
- Git Flow
- GitHub / GitLab / Bitbucket

三、其他 (Others)

3.1 浏览器原理 (Browser Internals)

3.1.1 渲染引擎 (Rendering Engine)
- 3.1.2 JavaScript 引擎 (JavaScript Engine)
- 3.1.3 事件循环 (Event Loop)
- 3.1.4 跨域 (Cross-Origin Resource Sharing, CORS)

3.2 设计模式 (Design Patterns)

3.2.1 单例模式 (Singleton Pattern)
- 3.2.2 工厂模式 (Factory Pattern)
- 3.2.3 观察者模式 (Observer Pattern)
- 3.2.4 发布/订阅模式 (Publish/Subscribe Pattern)

3.3 数据结构与算法 (Data Structures and Algorithms)

3.3.1 常用数据结构: 数组, 链表, 栈, 队列, 树, 图
- 3.3.2 常用算法: 排序算法, 搜索算法

3.4 DevOps (Development and Operations)

3.4.1 CI/CD (Continuous Integration/Continuous Delivery)
- 3.4.2 Docker
- 3.4.3 Kubernetes

3.5 安全 (Security)

3.5.1 XSS (Cross-Site Scripting)
- 3.5.2 CSRF (Cross-Site Request Forgery)
- 3.5.3 SQL 注入 (SQL Injection)
- 3.5.4 数据加密 (Data Encryption)

3.6 移动端开发 (Mobile Development)

3.6.1 响应式设计 (Responsive Design)
- 3.6.2 移动端适配 (Viewport, Meta Tags)
- 3.6.3 PWA (Progressive Web App)
- 3.6.4 React Native / Flutter / Ionic

3.7 服务端渲染 (Server-Side Rendering, SSR)

3.8 无服务器函数 (Serverless Functions)

3.9 GraphQL

上一个主题：西游记思维导图下一个主题：明之思维导图