0
0
2.8k
前端网页开发学习路线，整理基础知识、进阶语法、实操案例与开发工具，自学网页开发参考图谱。
网页开发完整学习体系
基础三层核心（网页骨架）
HTML 结构层
基础标签：文本、列表、图片、链接、表单
语义化标签：header/article/footer/nav
表单交互、布局容器、块级/行内元素
CSS 样式层
选择器、颜色、字体、边距、尺寸基础样式
布局核心：Flex、Grid、浮动、定位
进阶：过渡动画、阴影、渐变、媒体查询响应式
JavaScript 交互层
基础语法：变量、循环、判断、数组、对象
DOM操作：获取/修改页面元素、事件监听
基础算法、函数、异步基础
工具与环境（配套学习节点）
编写工具：VS Code + 插件（格式化、提示插件）
调试工具：浏览器F12开发者工具
版本管理：Git基础、仓库上传、代码备份
本地运行、网页部署基础
进阶拓展内容
框架类
移动端适配：rem/vw、移动端兼容方案
主流前端框架基础：Vue / React 入门
工程化知识
npm包管理、模块化、简单打包工具
配套后端基础（简单了解）
接口概念、AJAX请求、简单数据交互
实操实战板块
静态页面复刻：企业官网、个人简介页
交互案例：轮播图、表单验证、弹窗、待办清单
完整综合项目：响应式多页面网站
图谱关系标注
递进关系：HTML → CSS → JavaScript（学习顺序从前到后）
从属关系：布局、动画全部归属于CSS；DOM操作归属于JS
配套关系：工具环境贯穿全部三层基础学习
应用关系：三层基础 → 实操实战 → 进阶框架
HTML 结构层
基础标签：文本、列表、图片、链接、表单
HTML 结构层
语义化标签：header/article/footer/nav
HTML 结构层
表单交互、布局容器、块级/行内元素
基础三层核心（网页骨架）
HTML 结构层
CSS 样式层
选择器、颜色、字体、边距、尺寸基础样式
CSS 样式层
布局核心：Flex、Grid、浮动、定位
CSS 样式层
进阶：过渡动画、阴影、渐变、媒体查询响应式
基础三层核心（网页骨架）
CSS 样式层
JavaScript 交互层
基础语法：变量、循环、判断、数组、对象
JavaScript 交互层
DOM操作：获取/修改页面元素、事件监听
JavaScript 交互层
基础算法、函数、异步基础
基础三层核心（网页骨架）
JavaScript 交互层
网页开发完整学习体系
基础三层核心（网页骨架）
工具与环境（配套学习节点）
编写工具：VS Code + 插件（格式化、提示插件）
工具与环境（配套学习节点）
调试工具：浏览器F12开发者工具
工具与环境（配套学习节点）
版本管理：Git基础、仓库上传、代码备份
工具与环境（配套学习节点）
本地运行、网页部署基础
网页开发完整学习体系
工具与环境（配套学习节点）
框架类
移动端适配：rem/vw、移动端兼容方案
框架类
主流前端框架基础：Vue / React 入门
进阶拓展内容
框架类
工程化知识
npm包管理、模块化、简单打包工具
进阶拓展内容
工程化知识
配套后端基础（简单了解）
接口概念、AJAX请求、简单数据交互
进阶拓展内容
配套后端基础（简单了解）
网页开发完整学习体系
进阶拓展内容
实操实战板块
静态页面复刻：企业官网、个人简介页
实操实战板块
交互案例：轮播图、表单验证、弹窗、待办清单
实操实战板块
完整综合项目：响应式多页面网站
网页开发完整学习体系
实操实战板块
图谱关系标注
递进关系：HTML → CSS → JavaScript（学习顺序从前到后）
图谱关系标注
从属关系：布局、动画全部归属于CSS；DOM操作归属于JS
图谱关系标注
配套关系：工具环境贯穿全部三层基础学习
图谱关系标注
应用关系：三层基础 → 实操实战 → 进阶框架
网页开发完整学习体系
图谱关系标注
