前端学习路线（不迷路）

俺是答案

已于 2024-09-02 20:34:58 修改

阅读量1.4k

点赞数 29

文章标签：前端学习 javascript ajax vue reactjs es6

于 2024-09-02 20:29:32 首次发布

本文链接：https://blog.csdn.net/2402_82428821/article/details/141828875

版权

前言

前端开发主要有三剑客：html、css、js。html主要是将元素盒子和数据挂载到页面上；css是渲染页面的，美化页面；js则是用来做数据动态渲染等等操作的。其中js是重中之重。可能html和css上手很快，但是js务必要稳扎稳打。js这门语言不仅可以做页面渲染，它的超集Typescript可以面向对象编程实现大型项目，NodeJs可以处理后端业务。

路线概括

开发者工具

我推荐使用vscode，选择vscode或者hbuilder或者webstorm问题不大，选择自己喜欢的就行。

html+css

各类html标签熟悉并使用
css简单样式（如background等等样式）
完成练手小项目

注意与提醒：

html标签其实看两个视频就能完成了，而且大部分标签都可以使用div完成。但是每个标签都有其存在的意义，所以还是需要好好学。
标签的各种属性
css简单的样式不难使用，但是css有很多种，不可能全都记录下来。所以学习的时候最好不要花时间去硬记，可以把自己觉得以后常用的记录下来（不要求会背，记笔记最重要，忘记了就搜或者翻笔记）；以后遇到什么样式自己想不出来的就上网去百度(比如说ios的input标签会有重影之类的，不知道怎么消除这个样式，上网百度一搜就有了)。
各种选择器
字体样式 font
背景样式 background
盒子布局很重要
定位和浮动
flex布局
ps愿意学的可以多学点，不要求一定要掌握。
一定要了解rem、em、px等代表什么意思，了解全适配是什么后面移动端的页面需要各种适配

推荐的学习资料

视频：https://www.bilibili.com/video/BV14J4114768?p=1
p1~p60是HTML的知识 ---两天左右
p61~p160 CSS的第一级学习不看ps那一集（不看P155级）
p162~p164 看着视频学案例 --半天不用
p165~p237 布局方式、定位和浮动不看ps！不看ps！不看ps！
p238~p249 遮罩等的学习跟着视频打项目
p261~p296 高级知识
p415~p425 必须掌握 flex布局
后面的内容里面有讲到rem适配的问题挺重要的要好好看那些案例最好跟着打一下

温馨提示：

视频后面的练手项目如果时间够多就跟着打一遍
html、css、javascript虽然是三门语言，但是他们之间都是有关联的所以最好的学习方法是学了一些html以后，学一些css能做简单的静态页面，然后在学一些javascript可以操作dom做一个动态渲染的页面然后再之后的学习中不断查阅资料学习新的知识。
我比较推荐 使用视频入门 ，不太推荐使用书籍入门。视频适合入门，书籍适合深入，大家合理搭配，合理选择。

Javascript（20天入门）

了解js的各种简单操作（类似于c语言的，很快就过了，如果没有c基础的人就认真看哦
了解js的匿名函数字类的深一点的问题，闭包之类的如果不能理解可以先放一下，等后面学的多了回过来理解会更有效一些
了解js处理dom的方法，各种事件和js的api。理解浏览器运行原理
**前后端交互重中之重（包括看axios请求）
小项目练手

注意与提醒：

js一些基本语法其实和c语言差不多，简单过一下
js的几种数据类型其中的常用属性
浏览器的方法 alert、console等等学会用浏览器的开发者工具进行开发
js的各种事件
定时器任务
高深的难理解的问题可以先放一下，后面回来看会简单很多（如闭包、原型链等）
了解js怎么操作dom的，并用代码实现一个简单的轮播图
先不要去管正则（或者简单了解），等后面学一些webpack再了解就行
学会分模块写代码不同模块的代码要放到不同文件里面
前后端交互的原理要整清楚
推荐人手一本JavaScript红宝书好好专研

推荐的学习资料

视频：https://www.bilibili.com/video/BV1Sy4y1C7ha?from=search&seid=8698858545382998626&spm_id_from=333.337.0.0
p1~p40 js的变量、数据类型（重要）
p41~p95 循环、判断等学过c语言的可以快速过一遍--可以看目录上有不熟悉的看一下熟悉的直接跳过因为和c语言很类似没有c语言基础的老老实实看吧
p73 断点测试单独拿出来说明它很重要（debug测试）
p96~p112 数组与c语言有一些区别
p113~p133 js的函数与c语言有一些区别
p134~p142 作用域和预解析很重要
p143~p193 js的各种api
p194~p357 js操作dom、浏览器内置对象、本地存储等等（重重重要）
jquery曾经是js最重要的一个库，很多人都说需要重点去学但是经过这几年框架的成熟后面是不需要手动操作dom的，而jQuery是简化操作dom的一种库。我个人感觉是不需要学习的（我没学过）。如果有兴趣了解jQuery是如何简化操作dom的可以康康视频后面jQuery的部分可以理解jQuery的设计思想但是不建议深度学。
前后端交互：看axios文档重重重重重重要。