随着技术发展,全栈能力成为趋势。以下整理前端快速入门要点。
一、前端演进历程
1. 远古时期:demo 网页(纯 HTML)
- 学生时代的网页三剑客:Dreamweaver、Photoshop、Flash
- 一个
index.html打天下 - 页面 = 结构(HTML)+ 样式(CSS)+ 交互(JS)
2. 服务端渲染时代:JSP / PHP / ASP(后端主导)
- 后端拼页面:JSP 输出 HTML
- 优点:简单直观、SEO 友好
- 痛点:复杂交互越来越难做、页面复用差、开发耦合重
3. 前后端分离:API + SPA 崛起
- 后端只负责:数据 & 鉴权
- 前端负责:页面渲染 & 交互
- 典型模式:RESTful API / JSON / Token
4. 工程化时代:Vue / React(组件化 + 状态管理)
- 页面不再是'拼 HTML',而是'拼组件'
- 代码从'脚本'变成'应用工程'
- 构建体系:Webpack → Vite
5. 再往后:跨端 & 前端 Native
- Electron / Tauri(桌面端)
- React Native / Flutter(移动端)
- 小程序生态
- 本质:用前端思维写应用,用不同运行时交付
二、现代前端工作内容
很多后端同学对前端的印象还停留在'写页面',但实际交付物已经远超这个范畴。
1. 一个前端项目的交付物
- UI 页面(组件)
- 路由(页面组织)
- 状态管理(数据)
- 接口层(请求、错误处理)
- 打包构建(发布)
2. 前端岗位常见分工
- 页面 / 组件开发
- 工程化(构建、脚手架、规范)
- 性能与稳定性(错误监控、埋点)
- 跨端(桌面 / 移动 / 小程序)
3. 和后端 / 客户端协作的关键点
- 接口契约(字段、分页、错误码)
- 鉴权(Cookie / Token)
- 跨域、文件上传下载、流式数据
- 联调方式:mock / swagger / postman
三、基础三件套快速入门
这部分强调的是'够用优先'。先能理解,再慢慢深入。
1. HTML:结构与语义
- 常见标签:div / span / img / a / input / button / form
- 语义化:header / main / footer
- DOM 是什么(树结构)
2. CSS:样式与布局
- 选择器(类、id、层级)


