三驾马车
最基础的自然是JavaScript，HTML和css这三种语言。
首先了解下它们到底是什么。
HTML是用户看到的网页的骨架，比如你会发现当前页面分为左中右三个部分，其中还填充了不同的文字和图片；每个子部分还会继续细分，比如当前页面的中间部分下方有输入框等等。
CSS是网页展示的细节控制，比如你会发现有的文字是红底白色，有的子部分占了页面的二分之一宽，有的只占六分之一，有些部分需要用户进行某些操作（如点击，滑动）才会出现等等，这些就是有CSS来控制。
JavaScript是负责捕捉用户在浏览器上的操作，并与后端服务器进行数据交换的脚本语言。当用户在前端进行点击，输入等操作的时候，会触动绑定了该动作的JavaScript脚本，然后JavaScript收集数据，调用后端的api接口，再将后端返回的数据交给HTML和CSS渲染出来。
一个网页的HTML代码和CSS代码是可以直接在浏览器中查看的，你可以直接按F12，就能看到下图右侧的模块，左右侧红框就是代码与实际页面的对应关系。因此如果你看到某个网站的布局很不错，不妨点击F12，进行学习。
前端框架
然而，实际应用中，已经很少有正规的项目组直接用上述三种语言进行web 前端开发了，而是使用很多封装了这三种语言的框架，比如
Vue.js
，angular，react native等等。它们是来自谷歌和Facebook的大神项目组，基于自己的经验，封装了原生前端语言，实现了更多更复杂更酷炫的功能。因此，可以说，学会使用这些框架，能达到事半功倍的效果。
比如用了vue，它是自底向上增量开发的设计，其核心只关心图层，而且还可以与其他库或已存项目融合，学习门槛极其友好；另一方面，vue可以驱动单文件组件和vue生态系统支持的库开发的复杂单页应用。有了这个生态系统，可以说，vue是处在一个不断壮大，不断完善的欣欣向荣的状态。
网络通信协议
由于前后端分离的趋势，前端还需要了解很多网络通信协议的知识，这里不局限于http协议，因为据偶的经验，有时候大家还会用到websocket等协议。因此，前端需要简单了解不同协议的特点以及使用方式，但是好消息是不用像学习计算机网络课程一样对每种协议的原理都了解的特别透彻，只要学会如何用前端语言发送这种协议的请求就够了。
以上，如果对你有帮助，欢迎点赞或者留言~
偶是苏苏思量，来自BAT的Java开发工程师，每日分享科技类见闻，欢迎关注偶，与偶共同进步。
html中class选择器又叫？
Class 在程序中称“类”，同时在CSS中也书面语也叫“类”。css中class即类选择器。html中的class=是一个选择器，可以理解为一个标识，用来标识特定的标签。
比如：<divclass="div1"></div>这就是一个标识效果，以后你想要改变这个div的样式的话就可以找class为div1的元素了。
报个培训班出来能就业吗？
前端是当代比较火的一个互联网技术知识，许多年轻人把目光放在了前端上边，想要通过前端培训班的学习进入到这个行业，但是，很多人对于前端这个行业其实没有多少了解，多数也只是通过别人的口中获知的一些信息，对于前端学习什么，出来能干什么了解的并不多，那么前端主要学什么，报名前端培训班出来是否能就业？接下来小编就带大家一起来了解一下。
前端主要学什么？
第一阶段：HTML + CSS核心
HTML常用标签、盒模型、CSS选择器集群、伪元素/伪类、浮动/定位、CSS3动画、CSS3过渡、CC3渐变、经典布局方案、2d/3d变换HTML + CSS核心
第二阶段：JavaScript核心 + 高级
变量/内存、数据类型、条件语句、循环语句、函数/对象/数组、DOM/BOM对象、闭包/原型/作用域、事件完整解析、线程/进程、JavaScript继承模式、JavaScript算法、JavaScript设计模式、栈/队列、高级函数/函数柯里化
第三阶段：jQuery框架 + Less + BootStrap
Less同Stylus,Sass区别、BootStrap框架语法、BootStrap组件应用、jQuery设计模式、jQueryAPI、Less封装、BootStrap响应式原理、BootStrap栅格系统源码分析
第四阶段：NodeJs + 工程化
ECMAScript6新特性、JavaScript异步编程、Node基础/Node搭建服务器、Express/Koa/EJS、原生Ajax/跨域解决方案、CMD/AMD/CommonJS/ES6(模块化)
第五阶段：Vue技术栈 + webApp + 项目部署
Vue核心基础、Vue指令/表达式/实例、Vue组件通信、Vue生命周期详解、Vue-router路由、Vuex状态管理
第六阶段：React技术栈 + 工程化高级
React核心基础、ReactJSX语法、React组件、React组件通信、Redux源码分析、Redux源码分析、webpackHMR(热膜替换)、webpack懒加载/预加载
第七阶段：小程序技术栈 +服务器端框架
小程序核心语法、小程序路由、小程序生命周期、小程序支付流程、Mpvue框架、UniApp框架小程序WXML语法(遍历，条件判断等)
报个前端培训班出来能就业吗？
选择前端培训是否能够实现就业，有下面几点决定，只要能够达到基本是没有问题的。
1、选择一个好的前端培训班进行学习
2、在一个前端行业发展比较好的城市进行学习，这样机会更多
3、在前端培训过程中要加倍努力的去学习
附录：前端学习路线图
你遇到的前端面试题都有什么？
1. cookie session 的用途和区别，以及有效期
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
2. vue的数据绑定原理，mvvm与mvc的区别
MVVM：
m:model数据模型层 v:view视图层 vm:ViewModelvue中采用的是mvvm模式，这是从mvc衍生过来的MVVM让视图与viewmodel直接的关系特别的紧密，就是为了解决mvc反馈不及时的问题
图片说明一下：
说到MVVM就要说一下双向绑定和数据劫持的原理，
MVC：
m:model数据模型层 v:view视图层 c:controller控制器
原理：c层需要控制model层的数据在view层进行显示
MVC两种方式，图片说明：
总结：
mvvm与mvc最大的区别：MVVM实现了view与model的自动同步，也就是model属性改变的时候， 大家不需要再自己手动操作dom元素去改变view的显示，而是改变属性后该属性对应的view层会自动改变。
不懂得可以复制链接查看：
/article/3716256399/
3. storage 的区别 sessionStorage localStorage
localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性
sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的
4.v-model双向数据原理
有一个文本框 通过v-bind绑定了value属性 值为myname 是大家在vue实例中定义的属性传统大家获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可
【数据为尊 —-数据映射到浏览器 如果数据v-model后修改（肯定input）然后到数据在有数据映射到浏览器页面 —-映射关系统称】
5.keepAlive用过吗？什么作用？
缓存路由组件
使用的是vue的一个组件，参考vue的官方文档
使用这个东西可以保证大家在切换组件的时候，原来显示的组件不被销毁
—–【保障组件的数据不会被切换路由而销毁数据】
<keep-alive include=”Home”> Home是对应的组件对象的名字，不是路由的名字
<router-view></router-view>
</keep-alive>
6.多维数组拍平
数组拍平也称数组扁平化，就是将数组里面的数组打开，最后合并为一个数组
一红六种方法吧……
了解的请看：/guan-shan/p/10165737.html
7.跨域的原因 解决方案
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
这样就可以说同源策略—-协议—端口—域名
原生的src和href可以解决跨域
代理可以解决
请求头也可以携带浏览器提示的也可以解决
一般都是后端解决跨域问题
【别的需要了解看下方链接】
/qq_41604383/article/details/100770100
8.uniApp兼容问题
§ 如果你使用cli创建项目（即项目根目录是package.json），不管用什么ide，即便是用HBuilderX，切记cli项目的编译器是在项目下的，HBuilderX不管怎么升级都不会影响编译器版本。你需要手动npm update来升级编译器。以及如果你想要安装less、scss等预编译器，也需要自己npm安装在项目下，而不是在HBuilderX的插件管理里安装。
§ 如果你使用离线打包，请注意HBuilderX升级后，真机运行基座和云打包对应引擎跟随HBuilderX升级，而你的sdk需要手动升级。sdk的版本升级一般滞后HBuilderX正式版升级一两天。
§ 如果你使用自定义基座，之前制作的自定义基座是不会跟随HBuilderX升级的，升级HBuilderX后你应该重新制作新版自定义基座。
§ 如果你使用wgt升级，新版HBuilderX编译的wgt，运行到之前的runtime上，一定要先测试好，看有没有兼容性问题。如果有问题，就不要wgt升级，整包升级。
§ 考虑到向下兼容，uni-app编译器在升级为新的自定义组件模式后，同时保留了对老编译模式的向下兼容。在HBuilderX alpha版中，App端一定会使用新编译器，不理会manifest配置。在HBuilderX 正式版中，新创建的项目会使用新编译器，老项目不会强制使用，而是开发者自己在manifest里配置开启。
§ 如果你使用其他ide开发uni-app，会经常因为拼错单词而运行失败，因为经过webpack编译一道，很多错误反应的不够直观，排错时间很长，不如从开始就依赖有良好提示的HBuilderX，避免敲错单词。
§ 云打包的引擎版本说明HBuilderX Alpha，只有1套云打包机，不管你的HBuilderX alpha版本多少，对应的打包机一定是最新的alpha版的客户端引擎。HBuilderX正式版，有2套打包机，一个是最新正式版，一个是次新正式版。中间的紧急更新版本没有独立打包机。举个例子：HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1这几个正式版。那么当前可用的打包机有1.9.1和1.8.2这2台。（即每个大版本的最后一个版本）除了这2个HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版对应的打包机。（即只保留2个大版本的云打包机）
【详情请看】
.cn/article/35845
