⭐ 总目录
什么是前端？
HTML 基础
CSS 基础
JavaScript 基础
ES6+ 核心语法
DOM / BOM / 事件机制
浏览器原理（渲染、重排、回流）
网络基础（HTTP/HTTPS、缓存、跨域）
前端安全（XSS/CSRF）
模块化（CommonJS / ES Modules）
Node.js 基础
包管理（npm / yarn / pnpm）
构建工具（Webpack / Vite）
Vue 基础（选项式 / 组合式 API）
React 基础（Hooks）
前端工程化
性能优化
小程序 / 混合开发简介
前端常用工具库
1️⃣ 什么是前端？
前端是：
运行在浏览器上的 UI 层 + 交互层 + 部分业务逻辑层。
核心目标：
显示数据
与用户交互
调用后端接口
在浏览器环境下运行
现代前端不仅是“写页面”，而是一个成熟的工程体系。
2️⃣ HTML 基础（结构层）
HTML 决定页面结构。
常见标签：
<div> 容器
<p> 段落
<img> 图片
<a> 链接
<ul><li> 列表
<input> 输入框
<form> 表单
语义化标签（SEO + 语义）：
<header> <footer> <section> <article> <nav>
常用属性：
id
class
src
href
alt
文档结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
页面内容
</body>
</html>
3️⃣ CSS 基础（样式层）
CSS 关键作用：
布局
颜色
字体
动画
响应式页面
选择器：
#id ID选择器
.class 类选择器
div 标签选择器
div p 后代选择器
div > p 子级选择器
常用属性：
color, background, border
margin, padding
width, height
text-align
font-size
display: block/inline/flex
position: absolute/fixed/relative
布局方式（最重要）：
🎯 Flex 布局（主流）
display: flex;
justify-content: center;
align-items: center;
🎯 Grid 布局（复杂布局）
4️⃣ JavaScript 基础（行为层）
JS 决定页面交互、动态逻辑。
变量：
var a;
let b;
const c = 1;
类型：
number
string
boolean
null
undefined
object
array
函数：
function add(x, y) { return x + y; }
const add2 = (x, y) => x + y;
对象：
let user = { name: "Jack", age: 20 };
数组：
let list = [1,2,3];
5️⃣ ES6+ 语法（现代 JS 必学）
重点：
✔ 解构赋值
const {name, age} = user;
✔ 箭头函数
list.map(x => x*2)
✔ 模板字符串
`Hello ${name}`
✔ Promise / async/await
async function load() {
const r = await fetch("/api");
}
✔ 模块机制
export function add(){}
import {add} from './utils.js';
6️⃣ DOM、事件、BOM（浏览器核心）
DOM（HTML节点操作）
document.getElementById("app");
document.querySelector(".item");
element.innerText = "Hi";
element.style.color = "red";
事件机制（冒泡 / 捕获）
button.addEventListener("click", () => { ... });
BOM（浏览器对象）
window
location
history
navigator
7️⃣ 浏览器原理
关键理解点：
✔ 渲染流程：
解析 HTML → DOM
解析 CSS → CSSOM
DOM + CSSOM → Render Tree
布局（Layout）
绘制（Painting）
✔ 回流 Reflow 与 重绘 Repaint
回流最耗性能。
8️⃣ 网络与安全
HTTP 基础：
GET
POST
PUT
DELETE
状态码：
200 OK
301 重定向
403 无权限
404 找不到
500 服务端异常
跨域（CORS）
Access-Control-Allow-Origin: *
前端安全：
XSS：用户输入 HTML / JS 注入
CSRF：盗用用户 Cookie 发请求
解决：
输入过滤
Token 验证
SameSite Cookie
9️⃣ 模块化体系
JS 模块的演进：
IIFE
CommonJS（Node.js）
AMD / Require.js
ES Modules（现代主流）
🔟 Node.js 基础
作用：
构建工具运行环境
写后端 API
做 SSR（服务器端渲染）
定时任务 / 批处理
全栈环境统一语言
Express 示例：
app.get("/api", (req, res)=>{ res.json({ok:1}) })
1️⃣1️⃣ 包管理（npm/pnpm/yarn）
2025 推荐：
pnpm（磁盘占用最少、速度最快）
常用命令：
npm install
pnpm add axios
yarn dev
1️⃣2️⃣ 构建工具（Webpack / Vite）
Webpack（老牌）
打包
压缩
兼容低端浏览器
插件生态大
Vite（新一代）
极快的启动速度
ESModule 原生支持
已经成为 Vue / React 标配
1️⃣3️⃣ Vue 基础（企业中最常用框架）
Vue 特点：
上手简单
MVVM
双向绑定
组件化
模板语法
示例：
<template>
<div>{{count}}</div>
</template>
<script setup>
import {ref} from 'vue'
const count = ref(0)
</script>
1️⃣4️⃣ React 基础（Hooks）
React 是函数式 UI 开发。
示例：
function App() {
const [count, setCount] = useState(0)
return <button onClick={()=>setCount(count+1)}>{count}</button>
}
1️⃣5️⃣ 前端工程化
包括：
Git + 分支规范
代码格式（ESLint + Prettier）
组件化
状态管理（Vuex/Pinia，Redux）
类型检查（TypeScript）
自动化部署（CI/CD）
1️⃣6️⃣ 性能优化（非常重要）
前端性能优化要点：
减少回流
图片压缩
静态资源缓存
懒加载
代码 split chunk
使用 SSR / SSG
1️⃣7️⃣ 小程序/跨端框架
微信小程序
UniApp（跨端）
React Native
Flutter（跨端原生）
前端现在不仅是浏览器，可以做 APP、桌面应用、小程序、H5、移动 Web。
1️⃣8️⃣ 常用工具库
axios（请求）
lodash（工具库）
dayjs（日期）
swiper（轮播）
echarts（图表）
📌 最重要一句总结：
前端 = HTML（结构） + CSS（样式） + JS（行为） + 框架（Vue/React） + 工程化（Node/Vite） + 浏览器原理（渲染/优化）。
评论