整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
好程序员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标签
表示选择合适的标签（语义化标签）便于开发者阅读和写出更优雅的代码
1). 在没有CSS样式的情况下，页面整体也会呈现很好的结构效果
2). 更有利于用户体验
3). 更有利于搜索引擎优化
4). 代码结构清晰，方便团队开发与维护
1). 语义化标签
2). 音视频处理
3). Canvas / WebGL
4). history API
5). requestAnimationFrame
6). 地理位置
7). WebSocket
8). Webworks
DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时会出一些错误。（DOCTYPE告诉浏览器当前是哪个文档类型）
1. 行内元素的特点？
1). 元素排在一行
2). 只能包含文本或者其他内联元素
3). 宽高就是内容宽高、设置宽高无效
2. 块级元素的特点？
1). 元素单独占一行
2). 元素的宽高都可以设置
3). 可以包含内联元素和其他块元素
4). 为设置宽度时，默认宽度是它容器的100%
3. 常见行内元素标签
a、br、code、em、img、input…
4. 常见块级元素标签：
div、p、dl、dt、form、h1~h6…
1. src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
2. href是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理。
1. 正常场景一般都适用div+CSS布局，
2. 优点：
1). 结构与样式分离
2). 代码语义性好
3). 更符合HTML标准规范
4). SEO友好
3. Table布局的适用场景：
某种原因不方便加载外部CSS的场景，例如邮件正文，此时用table布局可以在无css情况下保持页面布局正常。
1. 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
2. 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
3. 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
4. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
5. 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致
meta标签用于描述网页的元信息，如网站作者、描述、关键词，meta通过name=xxx和content=xxx的形式来定义信息，常用设置如下：
1. charset：定义HTML文档的字符集
<meta charset="UTF-8" >2. http-equiv：可用于模拟http请求头，可设置过期时间、缓存、刷新
＜meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"＞3. viewport：视口，用于控制页面宽高及缩放比例
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
>1. width/height，宽高，默认宽度980px
2. initial-scale，初始缩放比例，1~10
3. maximum-scale/minimum-scale，允许用户缩放的最大/小比例
4. user-scalable，用户是否可以缩放 (yes/no)
在学习HTML5开发技术的小伙伴越来越多，不论是参加HTML5培训还是自学最终的目的只有一个，那就是希望可以高薪就业。但是有不少的朋友技术水平和操作都是OK的，只是在面试的时候会掉链子，导致整个面试功亏一篑。本篇文章小编就和读者一块看一下扣丁学堂的HTML5前端面试题总结，希望可以帮到将要面试的小伙伴们。
在进行HTML5面试的时候，首先面试官会针对简历上的东西进行提问，如果简历上写了angularJs，那么面试官就会问一些有关的知识点。这个框架一定要懂得它的原理。然后再展示你的作品。下面我们来看一下面试官会问道的具体的问题。
1、左右布局，如果两个a标签都为50%，但是在第一个a标签后换行，则第二个a就会被挤到第二行，如何解决呢，就把font-size设为0就行了。
a{
width:50%;
height:40px;
display:inline-block;
font-size:14px;
}
div>a:nth-child(1){
background-color:red;
}
div>a:nth-child(2){
background-color:green;
}
aaaa
bbbbb
2、排列组合问题(考察递归和排列组合算法)
varstr=[1,2,3];
varcount=0;
functionarrange(s){
for(vari=0,length=str.length;i<length;i++){
if(s.length==length-1){
if(s.indexOf(str[i])<0){
count++;
console.log("组合"+count+"="+s+str[i]);
}
continue;
arrange(s+str[i]);
arrange('');
小伙伴们在面试的时候一定要占到主动地位，在介绍的时候一定要把自己擅长的东西表现出来，当面试官问你问题的时候，如果真的不是很深入的了解，那就说自己所知道的，然后再转回自己擅长的东西和他聊，让他完全没有说话的机会。
好了，以上就是小编给大家简单介绍的一些HTML5前端面试的问题，希望对朋友们有所帮助，想要学习HTML5的小伙伴可以选择口碑良好的扣丁学堂进行学习，扣丁学堂有专业的老师和与时俱进的课程体系，还有大量的HTML5视频教程供学员观看学习，想要高薪快速就业的小伙伴抓紧时间行动吧。扣丁学堂H5技术交流群：559883758。
【关注微信公众号获取更多学习资料】
*请认真填写需求信息，我们会在24小时内与您取得联系。
