⑴ 做HTML5前端工程师需要考什么证吗
目前来说，二线城市及以下，web前端工程师是不需要持证上戚此扒岗的。
但是需要你懂以下的知识：
1、精通HTML/XHTMLCSS,熟悉页面架构和布局，对Web标准和标签语义化有深入了解
2、精通Ajax、JavaScript、DOM等前端技术，掌握面向对象编程思想 。
3、熟悉一种以上后台开发语言（如Java/PHP或C++/C/.NET）以及一种数据库（MySQL/Oracle/DB2）
5、精通Flash,Photoshop,Dreamweaver,fireworks,等网站美工设计软件，具备一定的平面设计能力
5、对用户体验、交互操作流程、用户需求有深入理解
如果是毕业大学生的话，计算机等级证是有一些帮助的。
面试时最好带一份自己设计的web前端项目，简单来说就是自己做一个网页，清楚的能够讲解你做的项目的特点，和一些运用到的知识点，如果是大企业的话，会有一些面试题，这个就需要你去网上做大量的题库。其他基本靠口才和过硬的专业知识。
对于之后，有4种选择：
1、技术专家。
就搞前端，但前端的分支很扒携多，你要抓住潮流。例如web可视化？WEB VR？前端动画特效？
这时的你，就不能执着于技术比别人好。那没用，因为比别人好，意味着你能做的别人也能做。所以得搞点别人整不了的。
可能许多人会觉得这样很累。但我告诉你们，负责的讲，这个方向是最轻松的。因为有过去的技术积累，新东西你看看就会了。
2、转行为产品经理。
就是搞搞产品原型，梳理下业务流程，成天开产品讨论会，写产品说明word文档。这个我不太懂，就不多说了。但总之这是一个方向。
有技术背景的人，搞产品会多那高昌么一点点优势。
3、做项目经理。
脱离开发一会，着力管控项目进度，甲乙双方的沟通什么的，搞什么招投标，什么售前、售后之类的。这个我也不太懂，也不多说了。但这也是一个方向。
4、自己创业。
创业嘛，一看机缘，二看运气。不多说了。
(1)h5前端面试扩展阅读
web前端工程师职责
1、Web前端开发工程师，除了主要职责外，还要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性
2、Web前端表现层及与前后端交互的架构设计和开发
3、配合后台开发人员实现产品界面和功能
4、利用各种Web技术模拟开发产品原型
5、Web新技术调研和资讯整理
web前端基础技术
1、对常用的一些JS框架了解，如jQuery、YUI等。
2、掌握最基本的JavaScript计算方法编写。
3、对目前互联网流行的网页制作方法（Web2.0）HTML+CSS，以及各大浏览器兼容性有很大的了解。
4、对前沿技术（HTML5+CSS3）的基本掌握。
5、还要对IT其他编程语言有所了解如：PHP，Java，.net！有一些公司还要求懂一点SEO优化！
⑵ 常见的web前端面试题及答案分享
1、 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)
答：行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。兼容性：display:inline-block;*display:inline;*zoom:1。
2、box-sizing常用的属性有哪些?分别有什么作用?
答：box-sizing: content-box|border-box|inherit。content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3、Doctype作用?标准模式与兼容模式各有什么区别?
答：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
4、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
答：HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。
以上就是环球青藤小编关于web前端面试题的相关分享，希望对大家有所帮助，想要了解更多相关内容，请及时关注本平台并进行查看!
⑶ 如何学习H5前端课程
随着移动互联网的发展，web前端逐渐受到企业的重视，前端开发人员的薪资也水涨船高，越来越多的人看好前端行业的发展，想要转行加入。下面，给大家分享一份web前端学习路线图，希望对初学者有所帮助。Web前端行业的发展，让前端人员能完成比以前更多的职责范围，所以未来前端可以宽口径就业，前景非常好。
对于零基础的人而言，要怎么学习web前端呢?
1、 前端页面重构。主要内容为PC端网站布局、Photoshop 工具及切图、H5移动端网页布局、HTML5+CSS3新特性与交互。学习目标是完成PC端网站布局，可实现响应式布局，一套代码适配 PC 端、移动端、平板设备等。
2、 前后端网页交互。主要内容为JavaScript语法全面进阶、ES6 到 ES10 新语法实践、jQuery 应用及插件使用、设计模式及插件编写、封装JS工具库及Web APIS、AJAX+PHP+MySQL前后端交互、前端工程化与模块化应用以及PC 端全栈开发项目等。学习目标是可以掌握前端工程化工具，如 git、gulp、webpack 等，搭建项目及开发项目。
3、 Node.js + 前端框架。主要内容为Node.js 全面进阶、Koa2+MongoDB搭建服务、Vue.js 框架、React.js 框架、小程序云开发与小程序框架、原生APP与混合APP、数据可视化与桌面应用等。学习目标是掌握桌面应用及可视化大数据，实现复杂数据展示类项目，能够独立完成前后台相关功能，胜任HTML5全栈开发工程师职位。很多学习web前端的朋友都希望在学成后能找到一份满意的工作，所以我们在学习过程中一定要注意实战经验的积累，如果你所学的东西对企业没有用，那你所做的一切都是无用功
⑷ WEB前端面试题
第二章 面试题基础篇
2.1 HTML面试题
面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
面试题：页面导入样式时，使用link和@import有什么区别？
面试题：title与h1的区别、b与strong的区别、i与em的区别？
面试题：img标签的title和alt有什么区别？
面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？
2.2 CSS面试题
面试题：css背景纹路
面试题：介绍一下CSS的盒子模型
面试题：CSS选择符有哪些？哪些属性可以继承？
面试题：CSS优先级算法如何计算？
面试题：用CSS画一个三角形
面试题：一个盒子不给宽度和高度如何水平垂直居中？
面试题：display有哪些值？说明他们的作用。
面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？
面试题：清除浮动有哪些方式？
面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？
面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。
面试题：什么是CSS reset？
面试题：css sprite是什么,有什么优缺点
面试题：display: none;与visibility: hidden;的区别
面试题：position有哪些值?有什么作用? 【特别多公司问】
面试题：line-height和height有什么区别？
面试题：opacity 和 rgba区别
2.3 JavaScript基础面试题
面试题：延迟加载JS有哪些方式？
面试题：JS数据类型有哪些？
面试题：null和undefined的区别
面试题：JS数据类型考题
面试题：==和===有什么不同
面试题：JS微任务和宏任务
面试题：JS作用域考题
面试题：JS对象考题
面试题：JS作用域+this指向+原型 考题
面试题：JS判断变量是不是数组，你能写出哪些方法？
面试题：slice是干嘛的、splice是否会改变原数组
面试题：JS数组去重
面试题：找出多维数组最大值
面试题：给字符串新增方法实现功能
面试题：找出字符串出现最多次数的字符以及次数
2.4 真正移动端 —— H5/C3面试题
面试题：什么是语义化标签
面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
面试题：如何关闭iOS键盘首字母自动大写
面试题：怎么让Chrome支持小于12px 的文字？
面试题：rem和em有什么样区别
面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
面试题：webkit表单输入框placeholder的颜色值能改变吗？
面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
面试题：禁止ios和android用户选中文字
面试题：自适应 [淘宝无线适配]
面试题：响应式
第三章 面试题进阶篇
3.1 JavaScript进阶面试题
面试题：new操作符具体做了什么
面试题：闭包 【必须会】
面试题：原型链 【必须会】
面试题： JS继承有哪些方式
面试题：说一下call、apply、bind区别
面试题：sort背后原理是什么？
面试题：深拷贝和浅拷贝
面试题：localstorage、sessionstorage、cookie的区别
3.2 ES6面试题
面试题：var、let、const区别
面试题：作用域考题
面试题：将下列对象进行合并
面试题：箭头函数和普通函数有什么区别？
面试题：Promise有几种状态
面试题：find和filter的区别 【大厂】
面试题：some和every的区别 【大厂】
3.3 webpack面试题
面试题：webpack插件
3.4 Git面试题
面试题：git常用命令
面试题：解决冲突
面试题：GitFlow
第四章 面试题框架篇
4.1 区分初中高级的 —— Vue面试题
面试题：Vue2.x 生命周期有哪些？
1.系统自带八个
2.当一旦进入到某个组件会执行哪些生命周期
3.$el和$data在哪个阶段有
4.如果使用keep-alive会多俩个生命周期
5.如果加入keep-alive第一次进入组件会执行哪些生命周期
6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期
面试题：谈谈你对keep-alive的了解
面试题：v-if和v-show区别
面试题：v-if和v-for优先级 2.x
面试题：ref是什么？
面试题：nextTick是什么？
面试题：Vue中如何做样式穿透
面试题：scoped原理
面试题：Vuex是单向数据流还是双向数据流？
面试题：讲一下MVVM
面试题：双向绑定原理
面试题：什么是虚拟DOM
面试题：key是干什么？
面试题：diff算法
面试题：Vue组件传值
面试题：props和data优先级谁高？
面试题：computed、methods、watch有什么区别？
面试题：Vuex
面试题：Vue路由
面试题：Vue项目打包后出现空白页
4.2 微信小程序面试题
面试题：如何自定义头部？
面试题：如何自定义底部？
4.3 uni-app面试题
面试题：生命周期
面试题：条件编译
第五章 面试题性能优化篇
⑸ 前端面试的H5问题有哪些
前端面试的H5问题汇总：
1.HTML5 为什么只需要写 <!DOCTYPE HTML>？
答案解析：
HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
2、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
答案解析：
行内元素：a b span img input select strong
块级元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等
空元素：<br> <hr> <img> <link> <meta>
3、页面导入样式时，使用link和@import有什么区别？
答案解析：
1）link属于XHTML标签，而@import是css提供的；
2）页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
3）@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
4）link方式的样式的权重高于@import的权重。
4、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
答案解析：
新特性，新增元素：
1）内容元素：article、footer、header、nav、section
2）表单控件：calendar、date、time、email、url、search
3）控件元素：webworker，websockt，Geolocation
移除元素：
1）显现层元素：basefont，big，center，font，s，strike，tt，u
2）性能较差元素：frame，frameset，noframes
处理兼容问题有两种方式：
1）IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2）使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。
5、如何区分 HTML 和 HTML5？
答案解析：
1）在文档类型声明上不同：
HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。
2）在结构语义上不同：
HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>
6、简述一下你对HTML语义化的理解？
答案解析：
1）用正确的标签做正确的事情；
2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
3）即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的；
4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
5）使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。
7、HTML5的离线储存怎么使用，工作原理能不能解释一下？
答案解析：
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
8、iframe有那些缺点？
答案解析：
1）在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面；
2）框架结构有时会让人感到迷惑，页面很混乱；
9、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
答案解析：
1）<!Doctype>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
2）严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
10、常见兼容性问题？
1）png24位的图片在IE6浏览器上出现背景；
解决方案是：做成PNG8；
2）浏览器默认的 margin 和 padding 不同。
解决方案是：加一个全局的*{margin:0;padding:0;}来统一。
3）IE6双边距bug：块属性标签float后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。浮动IE产生的双倍距离 #box{float:left;width:10px;margin:0 0 0 100px;} 这种情况下IE6会产生200px的距离。
解决方法：加上_display：inline，使浮动忽略
4）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性； Firefox下，只能使用getAttribute()获取自定义属性。
解决方法：统一通过getAttribute()获取自定义属性。
5）IE下，even对象有x，y属性，但是没有pageX，pageY属性，但是没有x，y属性；
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
6）Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示
解决方法：可通过加入 CSS 属性 -webkt-text-size-adjust:none;解决
7）超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active ；
解决方法：改变CSS属性的排列顺序：L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }
11、如何实现浏览器内多个标签页之间的通信？
答案解析：
调用localstorge、cookies等本地存储方式
12、webSocket如何兼容低浏览器？
答案解析：
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
13、支持HTML5新标签
答案解析：
1）IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式；
2）当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
14、如何区分：DOCTYPE 声明\新增的结构元素\功能元素，语义化的理解？
答案解析：
1）用正确的标签做正确的事情；
2）html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
3）在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的；
4）搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利用 SEO ；
5）使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
15、介绍一下 CSS 的盒子模型？
答案解析：
1）有两种，IE 盒子模型、标准 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；
2）盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）。
16、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有哪些？
答案解析：
1）id 选择器（#myid）
2）类选择器（.myclassname）
3）标签选择器（div，h1，p）
4）相邻选择器（h1 + p）
5）子选择器（ul > li）
6）后代选择器（li a）
7）通配符选择器（* ）
8）属性选择器（ a[rel = "external"]）
9）伪类选择器（a: hover, li: nth - child）
17、可继承的样式： font-size font-family color, UL LI DL DD DT
18、不可继承的样式：border padding margin width height
19、优先级就近原则，同权重情况下样式定义最近者为准
20、载入样式以最后载入的定位为准;
解析答案：优先级为: !important > id > class > tag ； important 比 内联优先级高
21、CSS3新增伪类举例：
答案解析：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素；
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素；
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素；
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素；
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素；
:enabled :disabled 控制表单控件的禁用状态；
:checked 单选框或复选框被选中。
22、如何居中div？ 如何居中一个浮动元素？
答案解析：
给div 设置一个宽度，然后添加 margin:0 auto 属性；div{width:200px; margin:0 auto; }
23、居中一个浮动元素
答案解析：
确定容器的宽高 宽500 高300的层，设置层的外边距
.div{width:500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:green；left：50%；头：50%}
24、css3有哪些新特性？
答案解析：
CSS3 实现圆角（border-radius:8px;），阴影（box-shadow:10px）,对文字加特效（text-shadow）,线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转，缩放，定位，倾斜
增加了更多的 css 选择器 多背景 rgba
25、为什么要初始化 CSS 样式
答案解析：
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法是：*{padding:0;margin:0} (不建议)
淘宝的样式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,
textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
26、display:inline-block 什么时候会显示间隙？
答案解析：
移除空格，使用margin 负值、使用 font-size:0、letter-spacing 、word-spacing
27、使用 CSS 预处理器吗？喜欢哪个？
答案解析：SASS
28、什么是盒子模型？
答案解析：
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
29、CSS实现垂直水平居中
答案解析：
一道经典的问题，实现方法有很多种，以下是其中一种实现：
HTML结构：
<divclass="wrapper">
<divclass="content"></div>
</div>
CSS：
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position:absolute; //父元素需要相对定位
top:50%;
left:50%;
margin-top:-100px; //二分之一的height，width
margin-left:
-100px;
}
30、简述一下src与href的区别
答案解析：
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
31、简述同步和异步的区别
答案解析：
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
32、px和em的区别
答案解析：
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
33、浏览器的内核分别是什么?
答案解析：
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
⑹ h5前端该自学还是培训纠结
自学有自学的好处，培训有培训的优点。你可以根据下图自学和培训的优劣势来进行参考。
那么什么情况下你适合自学？当你：
1、总结分析能力强，这决定了你是否能自己构建知识体系。
2、资料搜索、筛选能力强，你们懂得，不会搜索哪有学习资料！
3、自制力强劲！自学能力强劲！
4、还喜欢单打独斗式学习。
5、最好有前辈帮忙指导。
6、时间充足，其他工作学习或是生活压力较小
什么情况下你最好参加培训班？比如你：
1、对自己的总结分析能力、资料搜索能力没什么感知，甚至明确地知道很差。毕竟并不急于拿时间来培养这些能力。
2、自制力较差，会在应该学习6小时的一天里只学习了2小时，效果还一般，几乎没记住。
3、在安静地自习室学习比在家里房间学习更有效率。
4、想要安心拿一段时间来突破学习。
太过于纠结只是在耽搁时间，快速有效的寻找适合你的方式才是正解！
⑺ Web前端面试题：浏览器是怎么对HTML5的离线
在线的情况下，浏览器发现Html头部有manifest属性，它会请求manifest文件，如果是第一次访问APP，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过APP并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 离线的情况下，浏览器就直接使用离线存储的资源。
⑻ H5前端工程师难找工作吗
回答H5前端工程师是否好找工作之前，我们先来回顾一下H5前端工程师的发展历程。从2010年起，互联网开始全面进入移动时代，前端工程师的地位越来越重要，前端领域的技术发展也越来越快，各种新的思想、设计模式、工具和平台都快速发展，对前端工程师的技能要求也越来越高。直到现在，互联网前端工程师的缺口都一直存在。
那么H5前端工程师到底好不好找工作呢？答案是肯定的。只要你技术水平越高，抢手程度也会随即增高。这里再给大家几点建议，以助于在面试前端工作时更有优势。
1.学会沟通。领导和同事看的是你学习态度和学习能力，不懂的问题，先尽力自己解决，解决不了再虚心求教。
2.规划自己。规划自己，给自己定个小目标，让奋斗更有方向感和动力。
3.持续进步。技术的世界，变化会越来越快。之前学习的技术，有的会一直用下去，有的需要不断补充新技术。
说了这么多，希望大家对前端工程师有进一步的了解。
⑼ 你遇到的前端面试题都有什么
大家好，我是王我。
随着春节的结束，各个行业也普遍开始了上班的节奏， 不过本人17号才上班。为什么？因为长得帅的都上班比较晚。 当然，每到新年结束，又迎来了一批招聘者与面试者，我来说说作为一年工作经验应该知道的面试题。
HTML篇
1.doctype是什么？有哪些类型？
2.input有哪些新类型？简要说明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
4.bootstrap响应式的原理是什么？
5.多移动终端页面适配是如何实现的？
CSS篇
1.如何实现两列布局，左边自适应，右边固定宽度？
2.用CSS画一个三角形
3.CSS实现字体大写
4.display有哪些常用的属性值？分别是什么意思？
5.position为absolute，relative，fixed的定点位置
6.用三种方法清除浮动
7.请介绍一下margin塌陷问题
js篇
1.什么是事件冒泡和捕获？如何阻止事件冒泡？(分别用原生和jquery实现)
2.js创建对象，至少使用三种方法
3.简述一下事件穿透以及解决办法
4.用三种方式判断变量类型是否是数组
5.如何实现对象的拷贝？
6.什么是闭包？闭包的优缺点。
7.简述一下ajax请求的过程。
8.简述一下new一个人构造函数的人过程。
9.为什么会有跨域？是怎么解决跨域问题的？简述一下原理。
10.js原始数据类型有哪些？
11.学一个函数，判断一个变量是否是字符串
12.typeof有哪些结果？
13.剪头函数和普通函数有什么区别？
14.请用三种方法实现数组去重
15.href和src有什么区别？
jquery篇
1.attr()和prop()有什么区别？
2.on和bind有什么区别？js动态添加的dom元素是通过on还是bind？
3.touch和click有什么区别？
4.window.onload和jquery的ready有什么区别？
vue篇
1.简述一下vue的生命周期及其特点
2.vue双向绑定的原理是什么？
3.vue的特点有哪些？和jquery有什么区别？
4.父子组件之间传递数据的方法
5.子组件如何共享数据？
6.一般有什么工具进行数据交互？
7.webpack的原理是什么？
8.简述一下$nextTick的用法
浏览器篇
1.cookie、sessionStorage、localStorage的区别是什么？
2.有用过浏览器缓存吗？简述一下基本的缓存机制
网络篇
1.http和https之间的区别
2.从服务器的安全考虑，是使用get请求还是post请求？
3.URL请求的过程有哪些？
项目经验篇
1.项目中遇到的最大挑战以及解决办法
2.常见的网页优化有哪些？
作为一个面试一年以内工作经验的前端程序员来说，以上的问题能够倒答如流月薪6k应该不成问题啦。这些面试题也是我在很多面试中感觉经常被问到的题目。
希望大家年后找工作能够顺顺利利， 千万不要跟我一样哦，只有帅气就一无所有了。
大家好，我是王我，中国最帅的前端程序员。
前几次都是各种培训公司，各种忽悠就不提了，说说后面4次面试的经历。
第一次是面一个小公司，不过他们好像没有厉害的前端，来面我的是个后端，一来没有问我关于js的知识，直接问我以前做过什么，有没有经验，我本人不会吹牛，简历也没怎么包装，就是自己把自学的知识和做的几个小demo弄在上面，也用github挂在页面上了，不过他根本不点开看，也不问，问我会不会vue，我当时对框架还不了解，他就说他们需要能直接上手开始写的，所以我第一个就直接挂了。
第二次面试是一个国企，这个问了很多问题，都很基础，js数据类型，数组操作，事件，大概就是高程的前面几章看看就差不多都能答到，然后因为他们主要用jq，所以问了很多jq的操作，关于节点的，动画的，我看锋利的jq大概看了3遍，也练过多次，所以我答的很熟。然后问了些布局方面的，bootstrap我了解过，又看过css3，所以这方面也没啥问题，最后在现场做了个题目，主要就是布局然后通过ajax呈现数据。后面听介绍我面试的说面试官比较满意，说我jq很熟，一面就过了。可惜后面电话面试不知怎么回事可能表现的不够自信，虽然没问技术，但是我没啥自信，把没项目经验什么的也不知怎么就一五一十交代了，估计因为这个挂掉了。
第三次没问问题，直接就是一套题开做，我在那做了一个多小时。题目就是按照要求一步一步做一个页面出来，我也搞忘了我当时卡在哪个地方了，坐在那得时候就是做不出来，没有设计图，要根据他的描述自己找个设计图然后做，我第一次遇到这个有点懵，虽然当时没做出来，不过回来我自己花了几个小时把它做了。所以这个也是凉了。
第四个问的比较多，数据类型，数组操作，跨域，ajax，闭包，原型链，继承，深拷贝，浅拷贝，模块amd cmd，基本都是问的js。然后问了html5的新特性 css3 的新特性，遇到过什么浏览器的兼容性问题，怎么解决的，以后想往什么方面发展。这个时候我已经会点vue了，照着做了个小demo，不过后来知道公司用的angularjs，面试官也没看我做的，问也没问。。以前听网上说要带上自己的项目去面试感觉没起多大效果。
最后总结下如果面的比较初级的岗位，应该主要问js，原型链，继承，闭包，深浅拷贝，ajax，跨域，然后js的基础知识，对了还有apply和call也问了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一点的，暂时还没面过，等以后面过在来回答
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:ViewModel
vue中采用的是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层会自动改变。
不懂得可以复制链接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的区别 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性
sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的
有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性
传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性
但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值
所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可
【数据为尊 ----数据映射到浏览器 如果数据v-model后修改（肯定input）然后到数据在有数据映射到浏览器页面 ----映射关系统称】
缓存路由组件
使用的是vue的一个组件，参考vue的官方文档
使用这个东西可以保证我们在切换组件的时候，原来显示的组件不被销毁
-----【保障组件的数据不会被切换路由而销毁数据】
Home是对应的组件对象的名字，不是路由的名字
6.多维数组拍平
数组拍平也称数组扁平化，就是将数组里面的数组打开，最后合并为一个数组
一红六种方法吧……
了解的请看： https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解决方案
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
这样就可以说同源策略----协议---端口---域名
原生的src和href可以解决跨域
代理可以解决
请求头也可以携带浏览器提示的也可以解决
一般都是后端解决跨域问题
【别的需要了解看下方链接】
https://blog.csdn.net/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个大版本的云打包机）
【详情请看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML书写规范
H5新增标签
HTML渲染过程
二、CSS
css盒子模型概念
css弹性布局概念
三、JavaScript
事件模型
DOM2级事件模型
闭包
原型链
四、移动Web开发
常见的布局方案
移动端前端常见的触摸相关事件touch、tap、swipe等整理
移动端前端手势事件
移动端页面渲染优化
GPU渲染
GPU核心渲染过程
五、调试
常用的调试工具
Chrome控制台调试js使用
移动端测试
六、HTTP网络知识
常见的HTTP状态码
不同请求类型的区别
WEB缓存方案
——————————
牛客网（www.nowcoder.com）
- 专业IT笔试面试备考平台
- 最全C++JAVA前端等互联网技术求职题库
- 全面提升IT编程能力
- 程序员交友圣地
分享了一些Web前端的面试题，限时一小时，你看看自己能够答出多少道！
放心，这些面试题都是一些非常基础的知识，只要你在平时认真听课、学习了，那么这些面试题肯定不会难道你。
建议：虽然没有人监督你，但还是希望你不要去寻找答案，脱离网络，拿起纸笔，你试一下自己究竟能够答出个什么水平！有没有真本领？答案尽在这些面试题里！那么，你准备好了吗？OK！计时开始！
一、HTML常见题目01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
02、HTML5为什么只需要写？
03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
04、页面导入样式时，使用link和@import有什么区别？
05、介绍一下你对浏览器内核的理解？
06、常见的浏览器内核有哪些？
07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
08、如何区分HTML和HTML5？
09、简述一下你对HTML语义化的理解？
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
二、CSS类的题目01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
02、CSS选择符有哪些？哪些属性可以继承？
03、CSS优先级算法如何计算？
04、CSS3新增伪类有那些？
05、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？
06、display有哪些值？说明他们的作用。
07、position的值relative和absolute定位原点是？
08、CSS3有哪些新特性？
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
三、Java类的题目
01、介绍Java的基本数据类型。
02、说说写Java的基本规范？
03、Java原型，原型链？有什么特点？
04、Java有几种类型的值？(堆：原始数据类型和栈：引用数据类型)，你能画一下他们的内存图吗？
05、Java如何实现继承？
06、Java创建对象的几种方式？
07、Java作用链域？
08、谈谈This对象的理解。
09、eval是做什么的？
10、什么是window对象？什么是document对象？
OK，一小时到了，这个时间可不算短了，那么这些面试题你答出了几道呢？你写的答案正确了吗？现在你可以去翻看答案了。
如果你答出了绝大多数的或者是全部的题，并且答案也正确了，那么恭喜你……
你这时心里是不是有点小窃喜，认为自己有能力拿高薪了？虽然我也很想这么告诉你，但事实上这只能表明你的基础扎实，毕竟这只是一些非常基础的面试题。骚年~继续努力吧！
如果你只答出了小部分或者答出了大部分题但答案不正确，那么我只想说：“骚年，你的水平还差的远呢。”连这么基础的题你都打不出来，还想拿高薪？回去再练一段时间吧！
扎实的基础是你拿高薪的重要武器，如果你连基础都不扎实，那么想要攻克“高薪”这个厚实的堡垒，那只是痴人说梦罢了。
1.前端框架类问题，问你会不会用vue react啊
2.语言类，问你一些JavaScript语言的问题
3.项目经验，让你讲讲做过的项目，遇到的问题和解决之道
⑽ H5前端学习后有前途吗
H5前端学习有前途，前景广阔是高薪行业。因此选择好的培训机构是重要的，好的培训机构推荐。【达内教育】历时一年，耗资千万，重磅推出“因材施教、分级培优”创新教学模式，同一课程方向，面向不同受众群体，提供就业、培优、才高三个级别教学课程，达内“因材施教、分级培优“差异化教学模式，让每一位来达内学习的学员都能找到适合自己的课程。感兴趣的话点击此处，免费学习一下
学习任何一门语言前，了解语言前景是很好的。【H5前端】在市场需求上面，虽然没有前几年那么火爆，但在中高级前端开发岗位上依旧有缺口，市场对于这类人才的需求依旧很大。并且，在待遇方面，中级开发大概在1w左右，高级开发基本算是年入百万并不少见，所以“钱”途还是很大的。要想就业好，就要多努力，老师领进门，修行在个人。勤于动手，去落实代码，才是不二选择。
想了解更多有关H5学习前途的相关信息，推荐咨询【达内教育】。该机构是引领行业的职业教育公司，致力于面向IT互联网行业培养人才，达内大型T专场招聘会每年定期举行，为学员搭建快捷高效的双选绿色通道，在提升学员的面试能力、积累面试经验同时也帮助不同技术方向的达内学员快速就业达内IT培训机构,试听名额限时抢购。