web前端如何入门，首先我们得从什么是初级web前端工程师说起：据我idea，我把前端工程师分为入门级、初级、中级、高级这四个级别，入门级是指了解什么是前端（其实很多人还不知道什么是前端），了解基本的html、css和javascript语法（这些语言的东西网上随便搜一下，有很多很多，基本语法是整个技术体系中最重要的东西，领先的Web技术教程），就可以制作按照设计者的设计图进行页面，不考虑兼容性，了解一些框架的使用（比如jQuery、zepto、bootstrap等虽然烂但还是牛逼）。过了入门阶段，你就已经明白了前端需要做什么，学习了基本语法后，你可以独立制作一些简单的页面，接下来就要继续学习，达到初级前端的水平工程师。对于初级前端工程师来说，你需要了解的东西很多，需要对整个前端有一个清晰的认识，并熟练运用各种技术。在这里，小编建了一个前端学习交流按钮群：132667127，自己整理的最新前端资料和进阶开发教程。有需要的可以加群一起学习交流。如何处理各种浏览器的兼容性问题（比如IE浏览器中的createElement有什么区别等），现在基本上每个公司在招聘的时候都要求熟练html5，css3，javascript，这个熟练度就意味着你的指尖。下面说说初级前端工程师应该学习哪些具体知识，然后了解各种css前处理器和后处理器，以及常用的前端MV*框架（angularjs、backbone、reactjs、等）并了解这些框架的原理。另外，你必须熟练使用nodejs。必须会使用各种基于节点的前端构建工具（grunt、gulp等），熟练使用github或gitlab。模块化、组件化、工程化、语义化有了更深入的了解，终于知道如何开发移动端页面，如何优化一个页面的性能。初级Web前端工程师的技术体系1.HTML第一部分是掌握一些常用标签的使用及其各种属性。我把这些常用的标签总结如下：html：页面的根元素。head：页面的head标签，是所有head元素的容器。body：页面的主要标签，放置页面显示的内容。title：页面的标题。meta：位于文档头部，提供页面的元信息，包括关键字、描述等。link：定义文档与外部资源的关系。最常见的用途是引入样式表。script：脚本标签，可以把js脚本代码放在这个标签里，也可以用这个标签的src属性引入一个外部标签。style：样式标签，可以在这个标签里面写css代码。a：超链接，href属性代表链接到的地方，target属性代表打开方式。img：图片标签，src属性表示图片的位置。form：表单元素，其内部的input、select、textarea等标签比较重要。div：定义文档中的分区或节，div可用于页面布局等操作。除了了解以上标签，你还需要对一些新的HTML5API有一定的了解：audio、video标签。画布：定义图形，例如图表和其他图像。input标签、email、phone、url等类型的accept属性。getElementByClassName根据类名获取元素节点。多文件选择多文件选择属性。HTML导入、templateprocess标签、webGL等。还有一些知识点需要知道：1、doctype的作用。2、unicode、utf8等编码的原理和区别。3、如何优化页面性能。4、png、jpg、webp、gif等图片格式的不同优势。5、HTML内联元素和块级元素的区别。6.head标签在移动web开发中很常用。7.网络语义。8.浏览器缓存原理。2、CSS的css部分大致分为以下几个知识点：①定位布局1、position属性的7个值（static|relative|absolute|fixed|center|的作用和区别）页|粘）？2、实现字形布局或三栏布局（左右宽度固定，中间自适应屏幕）。3.浮动和清除浮动的方法，flex布局，grid布局。②盒模型1.margin,padding,border这三个属性。2、伸缩箱的相关内容。3.Multi-columnLayoutModule多栏布局模型。③文字字体1.强制换行或不换行，清空。2.文本对齐、大小（如何设置小于12px的chrome字体）、缩进、转换。3、单位（em、rem、px等）、颜色（rgb、rgba、hls）。④Transformation、transition和animation1.transform各种值的作用和兼容性。2.动画类型的过渡，贝塞尔曲线的原理。3.动画动画的各种设置，@keyframes规则。4.浏览器重新绘制和重新排列。⑤选择器1.选择器的分类、权重和优先级。2.哪些属性可以继承，哪些属性不能继承。3、什么是伪类和伪元素，它们的作用是什么。以上是基本的东西。除了这些基础内容，你还需要了解Less、Sass、stylus等CSS预处理器，这将大大提高你的CSS开发效率。还需要了解Autoprefixer、PostCSS等Processor3.JavaScript部分这里不讲js的基础知识。我把js按照语法水平和使用水平分为两部分。从语法层面来说：首先是javascript的面向对象方面：javascript中的封装、继承和多态。①封装：在js中可以通过闭包、作用域和作用域链实现封装，ES6的const和let的功能。②继承：基于原型链的继承、基于构造函数的继承、组合继承、寄生继承等，加上ES6的class关键字，prototype和__proto__。③多态性：javascript中的多态性是使用arguments来实现的，关于arguments会衍生出很多内容：1.caller、callee和arguments的其他方法的作用。2、方法的apply和call的作用不同。3.使用Array.prototype.slice.call将数组对象转换为数组。4.数组的各种方法，比如shift,splice,push,filter,map,reduce,forEach等等。然后就是Js的设计模式，比如三工厂模式，建造者模式等等。最后，这在不同情况下代表什么。按使用层次分：首先最重要的是ajax，ajax的原理，ajax跨域的方法：jsonp、location.hash使用iframe、postMessageAPI、websocket、serverproxy等。然后是tcp协议、udt协议、http协议的协议头和状态码。浏览器缓存、客户端存储内容：localstorage、sessionstorage、indexDB、cookie等。最后还有一些新的jsAPI，比如文件读取（fileReader）、fetch、Promise、WebSockets等，大家可以去caniuse看看有什么新东西可用。我上面说的只是一些笼统的概念。我列出了前端html、css和javascript需要掌握的一些内容。在前端领域，我们需要了解的知识还有很多。自己总结一下。
