现在转行前端，该怎么学习呢？怎么学好基础html、css、js

た入场券 2022-10-17 13:51 226阅读 0赞

应该怎么学习前端呢

对于刚开始学习前端的小伙伴们说，问得最多的问题就是 ——前端技术现在如此繁杂，我到底应该如何学习。这个话题太大了，几句话回答不好；也由于这个问题确实困扰了很多前端开发人员，所以我就根据多年经验输出这篇回答。

虽然这篇回答花了很长时间，肯定也有其局限性；希望各位不吝指出。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
正步入题：

我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一，所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是CSS、HTML、JavaScript（简称JS）了。但这三大件一直都是前端的根本，这一点从未改变。而这三大件中JavaScript又是重中之重。

接下来我会结合我的一点经验，给出前端学习路线的一些具体建议。

**1、目录：**

三大件学习、库工具、前端框架（ MVVM ）的学习、浏览器 & 计算机基础、前端工程化、性能优、Nodejs、数据结构和算法

依葫芦画瓢

三大件学习

现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。

刚入门的朋友，我觉得不应该一开始就学习像Vue、TypeScript、Webpack等知识。应该把重点放在CSS、HTML、JavaScript基础知识的学习上。

**CSS & HTML**

对于刚入门的朋友我依旧建议先将CSS(3)、HTML(5)的知识点认真学习一遍。学习的途中最好是学习完一部分就自己在敲一遍代码，加深自己的记忆。

当然如果你愿意，建议你可以先仿一个网站的静态页面（掘金、知乎等都可以），有一些属性就可以了解他实际的实现场景。

当然刚开始敲代码的时候还是不要过分依赖自动补全功能，一开始就使用自动补全对你记忆一些属性时没有帮助的；踏实点学习，日后会有回报的。  
关于 CSS(3) 你需要了解的一些知识点

盒模型（标准 、 IE ）

flex、float、Normal Flow 等的理解

CSS 常用选择器

行内、内部、外部样式的区别

CSS 层叠规则

BFC 与 IFC 的了解

CSS3 的 transform、transition、animation 等属性的运用了解

响应式布局的理解

……

CSS 说容易也容易，说复杂也复杂；因为 CSS 总是能给你意外的惊喜。  
HTML(5) 你需要了解的一些知识点

说到 HTML 我想有很多人是div一把梭。因为div用的爽，不用担心默认样式。

有人说 HTML 语义化的优点很多，比如清晰的页面结构、有利于 SEO、便于团队开发和维护；这些我都承认，不过我还是喜欢div一把梭。  
HTML 语义化( 不是很理解为什么面试总会问 )

canvas

本地存储（ localStorage、sessionStorage、cookie 的理解 ）

video 和 audio 的使用

应用缓存( cache manifest )

……

**JavaScript**

JavaScript一直都是我们前端的基石，一定程度上JavaScript的理解深度决定了你的发展。所以一定要用心学习。

现在很多人一看到闭包、原型链、作用域链、继承之类的文章都是直接跳过，你现在可以自问一下你的确理解这些基础的知识点吗  
JavaScript的基础知识点确实很多，所以《JavaScript 高级程序设计》 写了 700 多页；不过当你 JS 基础扎实后，你会发现你在学习框架、亦或是学习框架源码的时候会轻松许多。

JavaScript（ES6+） 你需要了解的一些知识点

类型转换

this

作用域（作用域链）

原型链以及继承

闭包的理解

动态作用域和词法作用域

JavaScript 执行机制

promise 、 async

……

上面说的CSS&HTML&JavaScript的基础知识点并不需要你一入门就全部都理解透彻；有些虽然是基础，但却也有它的难度。就算是高级也不敢说自己全都掌握了，有句话说的挺好 —— 书读百遍、其义自见。

我们第一遍学习不可能尽懂，到最少可以给我留下一个印象。过一段时间再学习这块知识点的时候，你肯定会有一个全新的理解。学习只一个需要一直在线的任务，重复的学习可以帮助你保持持续的竞争力。

我先声明一点，我并没有说其他技术不需要去学习，只不过初入门最好重点是先将基础夯实。  
其实三大件的学习不需要花费多少时间，有基础的大概 3 个月就可以大致的看一遍。是否真的理解这是后话，不过已经算是入门了。

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】  
> 每天更新最新技术文章干货。

**2、入门就可以学习前端特别流行的三大框架**

Vue.js-国人开发，文档非常友好

React.js-facebook开发

Angular.js-Google开发

以上三个框架，如果真的想做前端的话，三个框架是必须学一个的，一个都没学，说实话，是不好意思说自己是前端的,可能说的有点过了，哈哈！

还有想成为全栈的话，还要学node，大家有机会可以了解下！！！

**3、总结**

学习任何知识最重要的都是兴趣，如果经过一段时间的学习感觉不喜欢，那可能强迫自己学习是很痛苦的，效果也不会好，毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展，前端必然是Web开发人员需要学习的知识，有时候是没有专业前端工程师一起合作的，所以即使不做专门的前端工程师，掌握基本的前端技能为工作带来方便。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: /images/20221014/7988c98b158648e1aa897886f6dcab26.png