小白转前端，学习哪些知识点才能不走弯路？
今天给大家整理出来了web前端工程师初级阶段需要掌握的内容，很全面，希望大家好好阅读，看看自己掌握的知识点和文章里面写的还相差多少。
什么是初级web前端工程师？
按照我的想法，我把前端工程师分为了入门、初级、中级、高级这四个级别，
入门级别指的是了解什么是前端（前端到底是什么其实很多人还是不清楚的），了解基本的html、css和javascript语法（这些语方面的东西网上随便搜一下就有很多很多，基本的语法是整个技术体系最重要 的东西了，领先的 Web 技术教程 ），可以根据设计师的设计图在不考虑兼容性的情况下把页面做出来，了解过一些框架的使用（例如烂大街但是依然牛逼的jQuery、zepto、 bootstrap等等）。
在经历过入门的阶段，已经了解了前端要做什么，并且把基本的语法学习过了可以独立做一些简单的页面了，那么就要继续学习达到初级前端工程师的水平，对于初级的前端工程师需要了解的就特别多了，需要对整个前端有一个清晰的认识，并且熟练使用各种技术，我感觉在校的学生达到初级水平就可以通过bat的校招笔试 面试了。
初级前端工程师：首先要知道的就是如何处理各种浏览器的兼容处理（比如说在IE浏览器中的createElement有什么不同等等内容），现在基本上每个公司在招聘的时候都会要求熟练html5, css3, javascript，这个熟练的意思就是信手拈来。
在下面会说初级前端工程师应该具体的学习哪些知识，然后就是要了解各种css的预处理器和后处理器， 还有会使用常见前端的MV*框架（angularjs, backbone，reactjs等等）并知道这些框架的原理，另外就是要熟练使用nodejs，要会使用基于node的各种前端构建工具 （grunt，gulp等等），熟练使用github或gitlab，对模块化、组件化、工程化、语义化有一个比较深入的了解，最后要知道如何开发移动端 的页面，如何去优化一个页面的性能。
初级web前端工程师的技术体系
1、HTML部分
首先是要掌握一些常用标签的使用和他们的各个属性，这些常用的标签我总结了一下有以下这些：
除了要了解上面这一些标签之外，还需要对一些新的HTML5的API有一定的了解：
audio、video标签。
Canvas：定义图形，比如图表和其他图像。
input标签的accept属性，email、phone、url等类型。
getElementByClassName根据class名来获取一个元素结点。
Multiple file selection多文件选择属性。
html的import、template
process标签，webGL等内容。
还有一些要知道的知识点：
1.doctype的作用。
2.unicode、utf8等编码的原理和区别。
3.如何进行页面性能优化。
4.png、jpg、webp、gif等图片格式的不同的优势。
5.HTML行内元素与块级元素的区别。
6.移动web端开发常用head标签。
7.web语义化。
8.浏览器中的缓存原理
2、CSS部分
关于css这一块，我的看法就是网上下载一个chm格式的css的参考手册，然后根据手册里面写的一个个的都敲一下。
css大体分为下面这几块知识点：
① 定位布局
1.position属性的7个值（static | relative | absolute | fixed | center | page | sticky）分别有什么作用和不同？
2.实现品字形布局或者是三栏布局（左右宽度固定，中间适应屏幕）。
3.浮动与清除浮动的方法，flex布局，grid布局。
② 盒子模型
1.margin、padding、border这三个属性。
2.伸缩盒相关内容。
3.Multi-column Layout Module多列布局模型。
③ 文本字体
1.强制换行与不换行，清除空白。
2.文本对齐、大小（如何设置chrome小于12px的字体）、缩进、转换。
3.单位（em、rem、px等），颜色（rgb、rgba，hls）。
④ 变换、过渡和动画
1.transform的各种取值的作用与兼容性。
2.transition过渡的动画类型，贝塞尔曲线的原理。
3.animation动画的各种设置，@keyframes规则。
4.浏览器的重绘与重排。
⑤ 选择器
1.选择器的分类，权值和优先级。
2.有哪些属性可以被继承，哪些属性没法继承。
3.伪类和伪元素分别是什么，有什么作用。
上面这些都是基础的东西，除了这些基础的内容之外需要了解Less、Sass、stylus等css预处理器，这将会大幅度提升你的css开发效率，也需要了解一下Autoprefixer、PostCSS等css后处理器。
3、JavaScript部分
在这里就不说js的基础知识了，我把js按照语法的层次和使用的层次分为了两大块。
按照语法的层次来说：
首先是javascript的面向对象方面的内容：在javascript中实现封装、继承和多态。
是一个从事前端开发6年的程序员，在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党， 欢迎大家的加入我的前端开发交流qun：六零零六一零一五一 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!
然后是Js的设计模式，比如说那三种工厂模式啊，建造者模式啊等等。
最后是在不同情况下的this分别都代表什么。
按照使用的层次来说：
首先最主要的就是ajax，ajax的原理，ajax跨域的方法：jsonp、使用iframe的location.hash、postMessageAPI、websocket、服务器代理等等。
然后是tcp协议、udt协议以及http协议的协议头、状态码等内容。浏览器的缓存，客户端存储方面的内容：localstorage、sessionstorage、indexDB、cookie等等。
最后是一些新的js的API，例如文件读取（fileReader）、fetch、Promise、Web Sockets等等内容，可以去caniuse上面看一下有哪些新的东西。
上面我所说的这些只是一些比较笼统的概念，把前端html、css和javascript所需要掌握的部分内容列举了一下，在前端领域还有很多需要我们知道的知识，这需要大家在学习工作的过程中去自己总结。
小白转前端，学习哪些知识点才能不走弯路？相关推荐
- 成都python培训比较好的机构-成都Python培训班哪个好，怎样才能不走弯路学习
原标题:成都Python培训班哪个好,怎样才能不走弯路学习 python入门有多难?自学弯路有多少?只有当自己开始学习了才能体会到其中的艰难,达妹遇见过很多来咨询的学员,他们一开始都打算自学pytho ...
- 小白前端学习流程【爱创课堂专业前端培训】
对于零基础非科班的同学来说,一个良好的前端学习流程和学习误区是需要我们去规避和计划的,爱创课堂目前专注于前端培训,总结了以下几点,给大家一个参考. 在开始学习之前你需要做到以下5点: 第一:需要达到什 ...
- 如何用html语言浏览 路径,小白编程系列（二）：前端学习路径
前言 上一篇我们简单的说了一下小白应该如何认识编程这件事,怎么选择编程语言.这一篇我们来说我们选择好了编程语言后,如何学习这门编程语言,它的学习路径应该是怎么样的.这个得分开讲,每一门编程语言的学习路 ...
- 适合新手小白学习的web前端学习路线图
Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...
- 自学前端，需要学习哪些知识点？学多久可以入职前端工程师？
假如有那么残酷的一天,我不小心喝错了一瓶药,一下子抹掉了我这十多年的编程经验,把我变成了一只小白.我想自学 前端,并且想要找到一份工作,我预计需要 6 个月的时间,前提条件是每天都处于高效率的学习状态 ...
- 前端小白该如何学习？前端开发工程师掌握哪些能力
前端开发是目前比较火爆的行一之一,很多小白.择业者.大学生都会选择前端开发作为职业生涯的一个规划,近年来前端开发发展前景也是比较不错的,薪资也非常可观,在一线城市高级前端开发月工资也能达到30~50k ...
- 2021年最新版Web前端学习路线图-前端小白入门必读-推荐
2021年最新版Web前端学习路线图-前端小白入门必读-推荐 Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业 ...
- 小白前端学习日记（一）认识前端
小白前端学习日记系列 小白前端学习日记(二)HTML基础语法与标签 小白前端学习日记(一)认识前端 小白前端学习日记系列 前言 前端是什么 前端所需要掌握的基本能力 结构层--HTML 样式层--CS ...
- 一个正经的前端学习 开源 仓库（每日更新）-598道知识点
低调务实优秀中国好青年 (简介) && 附加答案 中文 | English 一个 ☝️ 正经的前端学习 开源 仓库,启发来自 淘宝大佬 @冴羽 ,初心做一个真正能帮助到大家的仓库.一个 ...
最新文章
- IOS/Android模拟器运行APP调试方法
- php 日历重复_PHP 生成日历
- c语言编译无错误但不能输入输出,第2章-C语言版输入输出.ppt
- EasyUI学习笔记8：MIS开发利器_ datagrid插件(下)(终结篇)
- CoreJava 笔记总结-第九章 集合
- C语言模拟实现标准库函数之qsort() 2
- 用户 'IIS APPPOOL\***' 登录失败（转载）
- Linux 系统中 Redis 的安装及其使用
- C++工作笔记-stl中map基础用法（插入，遍历，删除）
- 安卓案例：表达式计算器
- OpenMV——串口通信+发送中心位置
- java swing取消按钮_在Java Swing中取消选择单选按钮
- vant-ui的list
- 如何获取常用汉字(GB2312)
- layabox2.0 开发微信小游戏经验分享
- 将excel转为图片
- Word 2016 撰写论文(6): 取消/撤销 自动编号
- blender2.8 使用RetopoFlow拓扑手臂护腕 （灵活使用Contours）
- 安路FPGA学习之有趣的下载方式
- EDG夺冠火爆全网，官网域名用的如何？