学习路径：四个层次
九大主题自底向上：先打牢 HTML/CSS 与 JS/TS 基础，再学 DOM 与框架表达界面，然后进入工程化（构建/状态/测试），最后用性能与可访问性打磨体验。
结构与样式
语义化 HTML、盒模型、Flex/Grid、响应式与 BEM，让页面结构与视觉正确。
JS / TS
ES2020+ 语法、类型系统、模块与异步，写出健壮可维护的逻辑。
DOM 与框架
事件、DOM 操作、React/Vue 组件化、路由，把交互落地为界面。
工程与体验
构建、状态管理、测试、性能优化与可访问性，推向生产级。
九大主题
每一章都是一份完整的知识地图：概念讲解、代码示例、常见陷阱、实战练习与延伸资源。
HTML / CSS 基础MARKUP
语义化标签、盒模型、Flex/Grid 布局、响应式设计与 BEM 命名。
02JavaScript / TypeScriptLANGUAGE
ES2020+ 语法、类型系统、模块化、异步与错误处理。
03DOM 与事件DOM
选择器、事件委托、BOM、表单与拖拽等浏览器交互能力。
04框架 React / VueFRAMEWORK
组件化、状态、Hooks/Composition、路由与生态。
05构建工具BUILD
Vite/Webpack、npm scripts、打包、HMR 与 Tree-shaking。
06状态管理STATE
Redux/Pinia/Vuex、Context、服务端状态与缓存策略。
07测试TESTING
Vitest/Jest、Testing Library、Playwright E2E 与覆盖率。
08性能优化PERFORMANCE
加载、渲染、重排重绘、懒加载、代码分割与 Lighthouse。
09可访问性A11Y
ARIA、语义化、对比度、键盘操作与无障碍审计。
推荐的使用方法
准备环境
安装 Node.js，用 Vite 起一个本地开发环境，熟悉浏览器 DevTools。
按序阅读，边读边跑
每章示例都可直接在浏览器或 Vite 工程中运行，修改观察效果。
完成章末练习
章末实战清单是检验掌握程度的标准。完成练习比多读一遍文档更有价值。
做自己的应用
把第四至九章改造成你领域内的应用，补全构建、状态、测试、性能与无障碍。
环境准备
现代前端以 Node.js + 构建工具为核心。本手册示例用 Vite 提供开发服务器与打包。
# 1. 用 Vite 创建项目（React 或 Vue 模板）
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install
# 2. 启动开发服务器（带 HMR）
npm run dev
# 3. 构建生产包
npm run build前端代码最终跑在浏览器里。DevTools 的 Elements/Network/Performance/Lighthouse 是日常必备工具，多用多练。
建议先打牢第 1–3 章原生基础，再学框架。框架是原生能力的抽象，理解底层才不会被"魔法"困住。