web前端需要学HTML、CSS、JavaScript、jQuery、Ajax、前端框架（vue/React/Angular等）等前端知识；还要了解每个浏览器中的各个版本的兼容性、Web标准、移动设备、多终端适配等知识。
请点击输入图片描述
前端基本就是上图所示的展示方式，都是在浏览器中显示出来的
网页的组成
浏览器展示的页面叫做网页，但网页也有不同的展示，如视频，图片，文字等，具体看看下图，网页的组成：
请点击输入图片描述
前端使用的技术
前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
浏览器展示页面的时候，会把前端的代码转化（解析和渲染）成用户看到的网页
请点击输入图片描述
HTML
HTML：全称“Hyper Text Markup Language（超文本标记语言）”，简单来说HTML是一门描述性语言，网页的基础就是通过HTML语言来写的
CSS
CSS：称为层叠样式表，是用来表现HTML文件样式的计算机语言，它不仅可以静态修饰网页，也可以配合各种脚本语言来实现动态化效果
JavaScript
JavaScript：是一种直译式脚本语言，非常灵活，可以在任何浏览器上开发与调试的一种动态类型、弱类型、基于原型的语言。
常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
JS高级特征：
正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、
除了这三种核心的技术必须学会以外，还有其他的知识也需要我们掌握例如jQuery、Ajax、各种常用的框架（vue/React/Angular等）、以及后端技术
匡架说明
现在学的很多vue、react、swiper、element-ui、jquery、ajax、ant等等都是js的匡架，都可以能过写js实现，只是他们写好一套常用的功能，用起来简单很多。
浏览器
主流浏览器及占有率
请点击输入图片描述
总结
前端页面在浏览器中展示
浏览器中的每一个页面，我们称之为网页
文字、图片、音频、视频、超链接等组成了网页
前端技术由 html、css、js组成，实现网页展示效果
前端可以做app、小程序、手机端，PC端，软件等
根据需求的不同，前端可以做很多实现如视频，游戏，后台管理，可视化展示等
网页在不同浏览器中显示会有所不同，因为不同浏览器渲染引擎不同，解析的效果会存在差异，因些推荐谷歌浏览器（Chrome）
第一阶段：HTML+CSS:
HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、
JavaScript基础：
Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。
JS基本特效：
常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
JS高级特征：
正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、
JQuery：基础使用
悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。
第二阶段：
HTML5和移动Web开发
HTML5：
HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas.
CSS3:
CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。
Bootstrap:
响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。
移动Web开发：
跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。
第三阶段：
HTTP服务和AJAX编程
WEB服务器基础：
服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。
PHP基础：
PHP基础语法、使用PHP处理简单的GET或者POST请求、
AJAX上篇：
Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。
AJAX下篇：
JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。
第四阶段：
面向对象进阶
面向对象终极篇：
从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。
面向对象三大特征：
继承性、多态性、封装性、接口。
设计模式：
面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。
第五阶段：
封装一个属于自己的框架
框架封装基础：
事件流、冒泡、捕获、事件对象、事件框架、选择框架。
框架封装中级：
运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。
框架封装高级和补充：
JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。
第六阶段：
模块化组件开发
面向组件编程：
面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。
面向模块编程：
AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。
第七阶段：
主流的流行框架
Web开发工作流：
GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW框架：
Angular.js、Backbone.js、Knockout/Ember。
常用库：
React.js、Vue.js、Zepto.js。
第八阶段：
HTML5原生移动应用开发
Cordova：
WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。
Ionic：
Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。
ReactNative：
ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。
HTML5+：
HTML5+中国产业联盟、HTML5PlusRuntime环境、HBuilder开发工具、MUI框架、H5+开发和部署。
第九阶段：
Node.js全栈开发：
快速入门：
Node.js发展、生态圈、Io.js、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。
核心模块和对象：
全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO。
Web开发基础：
HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。
快速开发框架：
Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。
Node.js开发电子商务实战：
需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块。
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.前端这么多知识点该怎么记忆
前端涉及到的知识确实是比较广的，先要理清一定的框架，然后有条理的进行学习才能事位功半，这里我有一份知识体系给你了解一下
如果你有毅力可以坚持下去就自己好好的自学，但如果觉得效率不是很好条件允许的话也可以考虑参加系统的培训，虽然要花钱但可以省不少的时间，自己权衡。
