整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
着移动互联网时代的到来，HTML5流行风盛行，HTML5开发工程师在人才市场中变得非常吃香。而20129年的今天，招聘网站上的HTML5开发工程师职位数量依旧庞大。那么求职者们怎样才能成功的面试上HTML5开发工程师岗位呢？除了要有一份精美的简历，还得做好充足的面试准备，其中最重要的是需要了解一些用人企业常问的HTML5面试题和套路。那下来千锋武汉HTML5培训小编就给小伙伴们分享六个面试题，都是用人企业爱问的，你一定要仔细看哦！
首先，千锋武汉HTML5培训小编先向各位简单的介绍下面试流程。大公司的面试流程分为笔试—项目经理面谈—总监面谈—机试—HR面谈五大部分。笔试题目不会太难，都是些基础题目，且js部分占的比例较多，主要是企业想了解你的前端基础如何；面谈过程都会比较轻松，对方的面试官会在与你聊天的过程中，问你一些相关的技术问题，这个稍后下面着重介绍；机试给你一个页面，然后让你在电脑上用代码写出来；最后才是HR与你谈薪资待遇。
那么，用人企业的项目经理和技术总监一般会问哪些的问题呢？项目经理重基础，问得会比较细，而总监注重架构，全局观。下面千锋武汉HTML5培训小编奉上六个经典的面试问题，都是些基础题，大家仔细看。
问题一：浏览器是怎么对HTML5的离线存储资源进行管理和加载的？
答：浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线情况下，浏览器就直接使用离线存储的资源。
问题二：JS中有哪些数据类型呢？
答：JS中有5种数据类型：Undefined、Null、Boolean、Number和String。还有一种复杂的数据类型object，object本质是一组无序的名值对组成的。
问题三：IE浏览器css浮动与兼容性问题
答：浮动之后，需要清除浮动才不会产生问题。现在主流方法是在浮动元素的父级添加一个class，内容为：
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}//这个是为了兼容IE
然后父级添加一个class=“clear”即可
问题四：js放在html的不同位置有什么区别吗？
答：如果使用window.函数，将js代码放在其中，则放在哪里都是一样的，因为都是在body加载完再执行的，如果不使用window.函数,放在head中的话，代码不会被执行，这是因为html执行顺序，确切的说是js的执行顺序，HTML从上运行到 的时候进入test.js文件。前面的不会运行，也就是被function包起来的不会被运行，这个时候就执行最后一句。去页面中取元素。但是这个时候，HTML页面并没有加载完。所以找不到元素，就会报错。
问题五：移动html5开发流行的框架有哪些？
答：1、jQueryMobile，jQueryMobile是jQuery在手机上和平板设备上的版本。jQueryMobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQueryMobile开发团队说：能开发这个项目，非常兴奋。移动web太需要一个跨浏览器的框架，让开发人员开发出真正的移动web网站。
2、jQTouch，jQTouch是一个jQuery的插件，主要用于手机上的Webkit浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的Java库。支持包括iPhone、Android等手机。
问题六：ajax和jsonp的区别是？
答：实现方法完全不一样。ajax的核心是通过获取非本页内容，而jsonp的核心则是动态添加标签来调用服务器提供的js脚本。
以上千锋武汉HTML5培训小编分享的这六条均是第一轮面试时项目经理会问的HTML5开发工程师技术问题。相信这些面试题目都不难，那就请你一定记住它，祝大家面试成功。如您对文中题目的回答有更好答案，请在下方留言，或是遇到过其他的面试题目，也请您留言与大家分享。
如果你想要成为企业需要的Web前端工程师，就应该早做准备，来千锋武汉Web前端培训，申请两周免费试听，亲身感受讲师的授课水平。
千锋武汉Web前端培训课程结合时下流行技术，加入大数据可视化内容，同时深化了PHP+MySQL开发内容，精准匹配企业线下及未来需求，学员可接触HTML5开发、微信开发、微信支付、小程序开发、Web网站开发、Web管理系统开发等项目，能够积累更多开发经验，学员毕业之后可以无缝对接真实工作需求。关注“武汉千锋”微信公众号，小千会定期为大家分享最新Web前端发展趋势。
好程序员web前端学习路线分享HTML5常见面试题集锦，接下来将会持续为大家分享几篇HTML5常见面试题。
1.布局 左边20% 中间自适应 右边200px 不能用定位
答案：圣杯布局/双飞翼布局或者flex
2.什么叫优雅降级和渐进增强？
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
3.简述一下src与href的区别。
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。<script src =”js.js”></script>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href=”common.css” rel=”stylesheet”/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
4.z-index是什么？在position的值是什么时可以触发？
答案:absolute,relative,fixed, sticky
5.什么是标准文档流？
文档流指的是元素排版布局过程中，遵循于从上向下，从左向右的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
分为两种等级：块级元素和行内元素；
块级元素：
1).霸占一行，不能与其他任何元素并列
2).能接受宽、高
3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽
行内元素：
1).与其他元素并排
2).不能设置宽、高。默认的宽度就是文字的宽度
在HTML中，标签分为：文本级和容器级；
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd
6.简述选择器~和+的区别。
答案:都是层级选择器
相邻兄弟选择器： E + F, 选中的仅是一个元素。同级并且F元素在E元素的后面。
通用兄弟选择器：E ~ F 选中的是与E相邻的后面的兄弟元素f
7.flex中元素的margin是否会合并？
答案:不会合并
8.<div class="parent"><div class="child"></div></div>,父元素和子元素宽高不固定，如何实现水平垂直居中。
答案:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{height: 100%;}
body{
display: flex;
}
section{
background: pink;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
article{
background: blue;
}
</style>
</head>
<body>
<section>
<article>123</article>
</section>
</body>
</html>
9.简述title与h1的区别，b与strong的区别，i与em的区别。
1、title是网站header部分的内容是网站的标题，而h表示body内的标题
2、但从视觉上效果观看b与strong、i与em是没有区别的，唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签
号用于每日更新前端最新面试题，React、Vue、小程序、JavaScript、HTML5、CSS、uniapp、ES6、前端工程化、性能优化等热点面试题~~~
欢迎关注，面试题刷起来~~升职加薪不是梦~~
以下是一些常见的前端面试题和答案，涉及 JavaScript 的主题：
*请认真填写需求信息，我们会在24小时内与您取得联系。
