初学前端需要怎么学习？

你的名字 2022-12-29 11:30 109阅读 0赞

给你一条学习路线，初学前端的话，需要先学习一下前端的三大基础知识，即HTML、CSS和JavaScript 。

1、HTML

HTML，超文本标记语言（英文：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

你可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70]  
2、CSS

CSS，层叠样式表（英文：Cascading Style Sheets，简称：CSS）是一种用来表现HTML或XML等文件样式的计算机语言。

CSS样式表定义如何显示 HTML 元素，类似 HTML 中的字体标签和颜色属性所起的作用那样。样式保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

3、JavaScript

JavaScript 是互联网上最流行的脚本语言，这门语言不仅能用于 HTML 和 Web，还广泛用于服务器、PC端、笔记本电脑、平板电脑和智能手机等设备。

它是一种轻量级的编程语言，是可插入 HTML 页面的编程代码。当插入 HTML 页面后，会交由浏览器去执行。

同时，有需要可以了解一下HTML5和CSS3。

HTML5是HTML最新的修订版本，其设计目的是为了在移动设备上支持多媒体。

CSS3 是最新的 CSS 标准。

其次，需要学习Bootstrap和jQuery。

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

4、Bootstrap

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用其提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 App 。

5、jQuery

jQuery是一个JavaScript函数库。也是一个轻量级的"写的少，做的多"的JavaScript库。除此之外，它还提供了大量的插件。

它的功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX等等。

最后，就是学习前端三大主流框架，分别是Vue.js、React和Angular（根据实际需要，选择一个学习即可）。

在学习这三大主流框架之前，需要先了解一下Node.js，因为学习这三个框架都会用到它。

6、Node.js

Node.js 就是运行在服务端的 JavaScript。它是一个基于Chrome JavaScript 运行时建立的一个平台。

它是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

7、Vue.js

Vue.js是一套构建用户界面的渐进式框架。

它只关注视图层， 采用自底向上增量开发的设计。其目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

8、React

React 是一个用于构建用户界面的 JavaScript 库。主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

9、Angular

Angular 是一个 JavaScript 框架。

它可通过

所以，综上所述，学前端最主要的、最重点的还是要学JavaScript。

在前端UI页面展示这块，如果你不想自己写页面，那就需要再学一些前端UI框架。

前端的UI框架有很多，我这里就推荐三个：

1、Layui

Layui是一个经典模块化前端框架，由职业前端倾情打造，面向全层次的前后端开发者，低门槛开箱即用的前端UI解决方案。

2、Element UI

Element UI，是一套为开发者、设计师和产品经理准备的桌面前端组件库。

支持基于React、Angular、Vue开发的框架。

3、Ant Design React

Ant Design React，也是一个优秀的组件库，用于研发企业中后台产品。

它的相关资源：Ant Design Pro、Ant Design Charts、Ant Design Vue、Ant Design React等（详见官方文档）

除此之外，前端的UI框架还有很多很多，比如Material UI也很不错。

除了要学习以上这些，我们在开发前端的过程中，还可能会用到图标、可视化图表等等，所以，还需要学一些相关的框架。

比如Feather、ECharts、Axios等等。

Feather 是一个开源的图标库；

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求，还可以免费商用；

Axios 是一个易用、简洁且高效的 http 库。

都写到这了，干脆就再推荐一个前端开发工具吧，来自JetBrains公司的WebStorm。

最后，我简单总结一下：

前端技术的迭代更新是非常快的，所以千万不要想着去精通某个框架，除非实际开发需要的话；要学会通过浏览器去调试页面。  
![在这里插入图片描述][20201222144745776.gif_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70]: /images/20221120/a16b8451e8c2449aa0f4ed7c8af10661.png
[20201222144745776.gif_pic_center]: https://img-blog.csdnimg.cn/20201222144745776.gif#pic_center