前端小知识点(从一名小白到前端大神需要掌握哪些知识点)
1.从一名小白到前端大神需要掌握哪些知识点要想被称为前端大神要掌握的知识点还是有点多的，以我在源码时代培训过的经验来看，要想成为顶尖的前端大神，以下知识点你至少是应该要掌握的：“JavaScript基础、HTML入门基本内容，CSS+DIV的基础知识，选择器，盒子模型，网页布局，Photoshop,JavaScript高级编程，jQuery插件开发，模块化组件开，AJAX,HTML5,CSS3，响应式原理及布局，Bootstrap，前端依赖管理，CSS预处理语言（Less+Sass）,Grunt/Gulp自动化构建工具Express(Node.js),MongoDB,ElementUIl,MVC、MVVM架构模式，VUE2,Webpack模块加载器&打包工具，React,Angular4,React Native”是不是感觉很多？觉得多就对了，只有对上述内容做到系数掌握，你才有资格被称之为“前端大神”。
2.学习前端HTML5需要了解哪些知识点
Stylus/Less实现CSS预编译
Express实现服务器端搭建
Nginx实现服务器反向代理
ngrok实现内网穿透
sha1、MD5实现加密隐私数据
Monggose实现mongoDB数据库操作
Echarts实现数据可视化
Mock、json-server实现模拟数据
Nodejs实现前后端完全分离
WebSocket实现实时通信
企业级UI设计图实现页面布局
BootStrap实现响应式页面
原生JavaScript实现小游戏开发
原生Ajax实现前后端通信
JSONP,CORS实现解决跨域
Animation实现动画
Canvas实现气泡， 钟表功能
jQuery实现备忘录项目
ArtTemplate实现模板页面复用
Viewport + Rem实现移动端适配
ViewPort实现1物理像素问题
原生JavaScript实现无缝滑屏
zepto实现移动端滑屏
Stylus/Less实现CSS预编译
Express实现服务器端搭建
Nginx实现服务器反向代理
ngrok实现内网穿透
3.网站前端开发都需要掌握哪些知识
CSS和HTML、JavaScript这是前端学习的三个语言，其中HTML是自简单，设计到代码多的就是CSS、JavaScript，入，门简单，达到初级前端水平很容易。
但是精通各种框架需要一定学习实践1、CSS和HTML刚入门的朋友，应该把重点放在 CSS和HTML基础知识的学习上。关于 CSS(3) 你需要了解以下一些知识点：web标准、HTML相关概念、HTML标签、路径相关概念、锚点及其他、表格标签、表单标签、综合案例，注册页面、CSS选择、CSS字体样、CSS外观属性、调式、CSS复合选择器、标签显示模式、CSS背景、CSS三大特性等等。
总的来讲，CSS和HTML的学习还是比较简单的。2、JavaScriptJavaScript一直都是前端工程师进步的基石， JavaScript 的理解深度决定了前端开发者的职业发展。
关于JavaScript的学习内容包括了浏览器执行JS过程、JS变量、数据类型、运算符、流程控制语句（if else 、三元表达式、switch）、循环（for、while、do while）、数组、冒泡排序、函数、作用域、预解析、对象、内置对象、简单类型和复杂类型等。只有在熟悉了JavaScript基础语法的基础上，我们才能继续深入学习前端技术。
前端需要掌握这些基本技能精通html，能够书写语意合理，结构清晰，易维护的html结构；精通css，能够还原视觉设计，并兼容业界承认的主浏览器；熟悉javascript，了解ECMAscript基础内容，掌握至少两种js框架随着web前端技术不断发展，web前端的岗位越来越多了，技术方向也有好多种，。web前端有广阔的发展空间，app、小程序、移动端、pc端等都是需要前端技术的开发支持才能够完成，技术门槛相对较低、需求量较大，薪资待遇良好。
只要是互联网端的客户界面，就需要前端来制作完成，前端开发的编程量不大，但是需要部分编程，入门简单，但是要学的深入需要一个过程。Web前端招聘岗位• 前端开发工程师、Web开发工程师、网页开发工程师、HTML开发工程师。
• H5开发工程师、移动应用开发工程师、App开发工程师、小程序开发工程师。• JS开发工程师、Vue.js开发工程师、Node.js开发工程师、前端架构师。
• 小游戏开发工程师、数据可视化开发工程师、WebGL开发工程师、WebVR开 发工程师、Web安全工程师。在互联网行业，前端有WEB前端、HTML前端等，随着互联网技术发展，就业方向也有很多。
web前端的就业方向有web架构师、web前端工程师、HTML前端开发工程师、网页设计师等等。HTML前端开发与Web前端开发不同的是，使用HTML5不仅仅可以开发前端，还有网页游戏，手机APP，使用浏览器进行3D渲染等一系列建立在HTML5标准与搭载其标准浏览器上的开发，而未来可能会有更多的功能分支并入HTML5标准。
web前端工程师这个方向是目前从事Web前端开发的主要就业方向Web架构师薪资普遍比较高，技术要求高，掌握多种技能，包括：后端技术、DBA、Platform等等，甚至包括网站优化SEO技术。数据方向数据研发这个是在Web开发的基础上用数据附能，懂可视化的一定是有前端能力的，懂hadoop的一定java要熟悉，属于Web开发的拓展方向。
大前端方向比如阿里，在大量实践rn和weex；由于公司内部安卓/ios式微，一定程度上，前端把ios和安卓收编了，统称大前端。图形学方向前端自然是与图形学有千丝万缕的联系，除了上面提到了可视化，还有相关3d引擎的开发工作。
做这一行要求也非常高了，图形学相关的算法，3d引擎的开发，这都需要图形学相关知识。
4.学HTML5,你需要掌握这几个知识点
Html5开发可谓是这几年来特别“受宠”的软件开发了，html5不仅入行门槛低、薪资高，发展前景更是可观，所以得到大家的追捧和青睐也是实至名归的，那么想要从事html5开发学习要掌握哪些必备的知识呢？
那么想要学好html5开发，那么需要掌握的专业技术有：
第1阶段：前端页面重构：PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局；
第2阶段：JavaScript高级程序设计：原生JavaScript交互功能开发、面向对象开发与ES5/ES6、JavaScript工具库自主研发；
第3阶段：PC端全栈项目开发：jQuery经典特效交互开发、HTTP协议，Ajxa进阶与后端开发、前端工程化与模块化应用、PC端网站开发、PC端管理信息系统前端开发；
第4阶段：移动端webAPP开发：Touch端项目、微信场景项目、应用Vue.js开发WebApp项目、应用Ionic开发WebApp项目、应用React.js开发WebApp;
第5阶段：混合（Hybrid）开发：各类混合应用开发；
第6阶段：NodeJS全栈开发：WebApp后端系统开发；
第7阶段：大数据可视化：数据可视化入门、D3.jS详解及项目实战。
如今移动互联网发展迅速，技术不断的更新迭代，所学知识也需与时俱进。现在市场上的主流互联网网站，需要打造的是一流用户交互体验。对于前端开发者的要求，不再是简单的页面展示，而是需要全栈式的前端开发工程师。
5.web前端开发需要用到哪些知识
1. HTML5 + CSS3 + JavaScript Web开发基础中的基础，HTML是负责网页结构，CSS负责网页样式，JS则负责逻辑交互。
前两者更像是标记语言，没有什么逻辑，JS才是前端的重中之重。 HTML5 新增的技术大部分需要结合JS学习。
每个人学习进度可能不同，这个阶段主要是多仿站，熟悉基础，试试用CSS写响应式页面，了解JS深入性的知识，比如原型链、闭包、设计模式 等需要更多的积累，逐渐理解并实践掌握。 2. JQuery + BootStrap + Ajax + Json jQuery是JS的一个应用库，能够提升原生JS开发效率。
Bootstrap则是响应式框架，更简单的实现手机/平板/PC多个设备的页面支持。Ajax技术用于异步交互，不刷新页面就能更新数据，比如 地图 应用等。
Json是一种数据格式，被广泛应用在各大编程语言中。 jQuery 和 bootstrap 会简化很多编写的代码量，用着不亦乐乎，但对于基础还不是很扎实的人建议还是少用。
Ajax 和 json 通常用于和后端交互，在实际业务中也经常用到。 3. Git/SVN 版本管理工具，主要用于团队开发时避免文件冲突，也可回档。
前端推荐学习Git。 4. Nodejs + Mysql /MongoDB（可选） 运行在服务器端的JavaScript。
Express是其拓展MVC框架。其中nodejs最常用到的就是npm包管理器，不用到各个网站去下载资源包。
数据库 的学习可以选择MongoDB或者MySQL，前者与Nodejs的契合度更好，不过现在大多数网站都是 PHP +Mysql的组合，如果有学PHP的打算的话，可以先学习 Mysql 。 5. ECMAScript 6 JavaScript 的语言标准。
ES6中加入了很多新的概念，也弥补了之前版本中JS的很多缺陷，越来越多的项目开始运用ES6进行开发。学之前最好把ES5先搞懂了，目前实际项目中考虑到兼容性，ES6是需要通过Babel将其编译为ES5来部署的。
6. Angular/React/Vue 前端三大框架，各自也有着各自的生态系统，根据需求自行选择学习。目前企业需求量最大的仍然是Angular，但近期趋势来看react和vue则更受欢迎。
因为现在前端技术发展太过于突飞猛进，工具和框架的更新比翻书还快，建议学习还是看文档比较好。学习过程中也会遇到很多用到各种构建工具的时候。
7. 其他常用工具 这个一样是根据需求自行选择学习。比较常用的现在有 Web pack，可以将多个不同编程风格的文件打包，比如ES6/AMD/CMD之类的模块化都能识别并编译成 浏览器 能运行的文件。
Sass/Less,CSS预编译框架，可以用带有逻辑性的方式编写CSS代码。Gulp/Grunt构建工具，可以自动化对代码进行压缩合并等工作。
8. 其他后端编程语言 目前市场对前端基本都要求会一门后端语言， PHP / JAVA / Nodejs / Python 等。
6.前端这么多知识点该怎么记忆
前端涉及到的知识确实是比较广的，先要理清一定的框架，然后有条理的进行学习才能事位功半，这里我有一份知识体系给你了解一下
如果你有毅力可以坚持下去就自己好好的自学，但如果觉得效率不是很好条件允许的话也可以考虑参加系统的培训，虽然要花钱但可以省不少的时间，自己权衡。
绛旓細1.浠庝竴鍚嶅皬鐧藉埌鍓嶇澶х闇瑕佹帉鎻″摢浜鐭ヨ瘑鐐 瑕佹兂琚О涓哄墠绔ぇ绁炶鎺屾彙鐨勭煡璇嗙偣杩樻槸鏈夌偣澶氱殑,浠ユ垜鍦ㄦ簮鐮佹椂浠ｅ煿璁繃鐨勭粡楠屾潵鐪,瑕佹兂鎴愪负椤跺皷鐨勫墠绔ぇ绁,浠ヤ笅鐭ヨ瘑鐐逛綘鑷冲皯鏄簲璇ヨ鎺屾彙鐨:鈥淛avaScript鍩虹銆丠TML鍏ラ棬鍩烘湰鍐呭,CSS+DIV鐨勫熀纭鐭ヨ瘑,閫夋嫨鍣,鐩掑瓙妯″瀷,缃戦〉甯冨眬,Photoshop,JavaScript楂樼骇缂栫▼,jQuery鎻掍欢寮鍙,妯...
绛旓細1銆佹帉鎻″熀纭鐭ヨ瘑銆備綔涓涓鍚嶅墠绔皬鐧锛屽熀纭涓瀹氳鎵撶墷鍥恒俬tml鏄秴鏂囨湰鏍囪璇█锛屾垜浠鍒扮殑缃戦〉閮芥槸浠ュ畠涓哄熀纭鐨勩俢ss鏄眰鍙犳牱寮忚〃锛屽畠鍙互缁欑綉椤垫坊鍔犳牱寮忥紝璁╂垜浠殑缃戦〉鏇村姞缇庤銆俲s鍗矹avaScript锛屽畠鏄竴绉嶇洿璇戝紡鑴氭湰璇█锛屽彲浠ヤ负鎴戜滑鐨勭綉椤垫坊鍔犲姩鎬佸姛鑳姐2銆佸ぇ閲忕紪鍐欎唬鐮併傚墠绔皬鐧介鍏堣瀹夎鍓嶇寮鍙戝伐鍏枫...
绛旓細7.vue妗堜緥 鐭ヨ瘑瑕佺偣锛氬皢鐭ヨ瘑鐐铻嶄細璐氬埌妗堜緥涓8.react鍩烘湰璇硶 鐭ヨ瘑瑕佺偣锛歳eact绠浠嬨乯sx璇硶銆佸厓绱犳覆鏌撱佺粍浠跺拰props銆乻tate銆佺敓鍛藉懆鏈熴佽〃鍗曘佹潯浠舵覆鏌撱佺粍鍚堢户鎵裤乭ooks銆佹ц兘浼樺寲銆乺edux 9.react妗堜緥 鐭ヨ瘑瑕佺偣锛氬皢鐭ヨ瘑鐐硅瀺浼氳疮閫氬埌妗堜緥涓 鏂板鍐呭锛氬井淇″皬绋嬪簭鍙妘ni-app妗嗘灦 鐭ヨ瘑瑕佺偣锛氬皬绋嬪簭妗嗘灦锛...
绛旓細绗竴闃舵锛氭牳蹇鐭ヨ瘑鐐 • CSS3 2D銆3D 鍙樻崲• CSS3 animation 鍔ㄧ敾• H5C3 鐐叿椤甸潰寮鍙• Flex浼哥缉甯冨眬• 绉诲姩绔富娴侀傞厤鏂规• 甯歌绉诲姩绔牱寮忓吋瀹规柟妗• 棰勫鐞嗗櫒Less 绗簩闃舵锛氭牳蹇冪煡璇嗙偣 • JavaScript 璇█鍩虹• BOM鎿嶄綔澶у叏• ...
绛旓細涓鍒囦粠瀹炵敤鐨勮搴﹀嚭鍙戯紝HTML鏍囩鍙婃爣绛剧殑灞炴э紝鏍囩灞炴т笉鏄噸鐐癸紝绠鍗曚簡瑙ｏ紝鍦ㄥ涔爃tml鏍囩鐨勫悓鏃剁粨鍚坈ss鐨勬潵瀹炵幇鏍峰紡锛屽啓瀹岄潤鎬佺殑鏁寸珯椤甸潰鍚庯紝灏辨槸JavaScript鐨勫熀纭锛岀劧鍚庡氨鏄疛query鐨勬渚嬶紝鏈鍚庝娇鐢╦query鏉ュ疄鐜伴潤鎬侀〉闈㈡渚嬩腑鐨勫姩鎬佹晥鏋溿侶TML CSS绡団斺擧TML 鍦ㄥ涔犱箣鍓嶉渶瑕佸厛浜嗚В涓涓嬶紝鍒濈骇鍓嶇瀛︿範鍐呭锛...
绛旓細鍓嶇寮鍙戞槸鎸囬氳繃HTML銆丆SS銆丣avaScript绛夋妧鏈疄鐜扮綉绔欑殑鐣岄潰銆佷氦浜掑拰鏁堟灉绛夋柟闈㈢殑寮鍙戙傚湪杩欑瘒鏂囩珷涓紝鎴戜滑灏嗕粙缁嶅墠绔紑鍙戜腑鐨勫熀纭鐭ヨ瘑鐐锛屽寘鎷琀TML銆丆SS鍜孞avaScript銆侶TML HTML鏄綉椤电殑鍩虹锛屽畠瀹氫箟浜嗙綉椤电殑缁撴瀯鍜屽唴瀹广備笅闈㈡槸涓浜涘父鐢ㄧ殑HTML鏍囩锛1.鏍囬鏍囩 HTML涓湁6涓骇鍒殑鏍囬鏍囩锛屽垎鍒槸h1~h6锛...
绛旓細1.鍓嶈█ 鍦ㄥ綋浠婁簰鑱旂綉鏃朵唬锛鍓嶇鎶鏈殑鍙戝睍杩呯寷銆備綔涓虹敤鎴蜂笌缃戠珯浜や簰鐨勭涓绾匡紝鍓嶇宸ョ▼甯堟壙鎷呯潃閲嶈鐨勮矗浠汇傜劧鑰岋紝浠呬粎鎺屾彙琛ㄩ潰鐭ヨ瘑鏄繙杩滀笉澶熺殑銆傝鎴愪负涓鍚浼樼鐨勫墠绔伐绋嬪笀锛屾垜浠渶瑕佹繁鍏ョ悊瑙ｅ墠绔妧鏈紝鎺屾彙鍏舵牳蹇冩蹇靛拰鍘熺悊銆傛湰鏂囧皢甯︿綘娣卞叆鎺㈢储鍓嶇鎶鏈殑鐭ヨ瘑鐐锛屽府鍔╀綘鏇村ソ鍦扮悊瑙ｅ拰搴旂敤鍓嶇鎶鏈2....
绛旓細4.鎺屾彙寰俊灏忕▼搴忎互鍙婁簡瑙ｆ敮浠樺疂灏忕▼搴忕殑寮鍙戙5.瀹屾垚澶у瀷鐢靛晢椤圭洰寮鍙戙鐭ヨ瘑鐐锛1銆丷eact闈㈠悜缁勪欢缂栫▼銆佽〃鍗曟暟鎹佺粍浠堕氫俊銆佺洃鍚佸０鏄庡懆鏈熴佽矾鐢便丷edux鍩烘湰姒傚康銆傜粌浣跨敤react瀹屾垚椤圭洰寮鍙戙佹帉鎻edux涓殑寮傛瑙ｅ喅鏂规Saga銆2銆乺eact-native銆佸紑鍙戝伐鍏枫佽鍥句笌娓叉煋銆乤pi鎿嶄綔銆丗lutter鐜鎼缓銆佽矾鐢便丩istView...
绛旓細5銆佺啛鎮塿ue js 绋嬪簭缂栧啓鏂规硶锛屽湪鍗曢〉鍜屽椤典腑鑷浣跨敤锛岀悊瑙ｅ師鐞嗗苟鍦ㄧ湡瀹為」鐩腑搴旂敤锛6銆佸浣曟敞鍐屼互鍙婂紑鍙戝皬绋嬪簭锛7銆乶ode鍩虹鐭ヨ瘑锛宯ode.js瀹夎 妯″潡绯荤粺 npm鍖呯鐞嗗櫒锛8銆乺eact鍩虹鐭ヨ瘑锛岀啛缁冧娇鐢ㄥ悇绫籄PI鍔熻兘锛屽彲浠ュ姩鎵嬪紑鍙戜竴涓熀浜巖eact.js妗嗘灦鐨刄I缁勪欢锛岄氳繃缁勪欢鐨勬柟寮忓疄鐜伴〉闈㈡ā鏉垮姛鑳界瓑銆傜‖浠跺瀷鍙凤細...
绛旓細锛1锛 html + css銆傦紙2锛塉avaScript銆備笉鏄墍鏈夌殑缃戦〉閮藉繀椤绘湁js锛屼絾鏄鎯冲疄鐜颁竴浜涜秴閰风殑鍔熻兘鍜岀晫闈㈢殑鏃跺欙紝灏遍渶瑕佹秹鍙婂埌js銆傚鏋滄病鏈夊叾浠栫紪绋嬭瑷鐨勫熀纭鐨勮瘽锛屽璧锋潵鍙兘瑕佽垂浜涘姏銆傦紙3锛塒hotoshop銆乫lash銆傜啛鎮変細涓鐐瑰効灏辫浜嗭紝娌″繀瑕佸叏閮ㄩ兘瀛﹀緱绮鹃氾紝褰撶劧濡傛灉浣犲湪瀛︿範鐨勮繃绋嬩腑锛屽彂鐜颁綘ps鎴栬協lash...
