前端面试题重点整理汇总
1.①讲述一下Doctype的作用，②标准模式与兼容模式之间有什么区别？
①<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
②标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
2.页面导入样式时，使用link和@import之间有什么区别？
link标签是标准的html标签，import不是
link可以连接各种形式的文件，而import只能导入CSS
link使用的是连接的方式，相当于桥梁，边加载边连接
<style type=”text/css”>
@import url(“相对路径”);
</style>
<link rel=”stylesheet” type=”text/css” href=”相对路径” />
3.介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行javascript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
4.常见的浏览器内核有哪些？
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF（火狐）,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
5.①html5有哪些新特性、移除了那些元素？②如何处理HTML5新标签的浏览器兼容问题？
①HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
画布 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websocket, Geolocation;
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；
②支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
6.简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
html语义化让页面的内容结构化(比如<section><article><header>这些标签)，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
7.Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
8.iframe有那些缺点？
①iframe会阻塞主页面的Onload事件；
②搜索引擎的检索程序无法解读这种页面，不利于SEO;
③iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
所以现在不建议使用iframe9.JQuery Ajax使用Post请求怎么传递参数？写出一个可通用的JQuery二次封装函数？
$.post("url",{"key":"data"},function(){},,function(){},"JSON");
function func(url,Object,str){
var geshi = str?str:"json";
$.post(url,object,function(data){
return data;
},function(){
return error;
}str);
}
var data = func(url,{},"json");
10.在不同分辨率不同设备访问Web网站，如何适配？
① 媒体查询 @media all and (max-width:970px)
② JS JQ 等实现响应式
③ BootStrap等第三方响应式框架。
11.JQuery绑定事件的方法及区别？
JQ控件.onclick = function(){}
JQ控件.on("click",function(){}) // off解除
祖先元素.on("click",dom,function);//事件委派
JQ控件.bind("click",function(){});//1.7+淘汰
on: ① 可以给同一控件绑定多个同类型事件
② 可以通过off解除事件绑定
③ (委派)页面新增同类型dom时也会绑定该事件
12. 写出一段闭包代码并解释器作用？
function func(){ var num = 1; function func2(){ alert(num); } return func2; } var f = func(); f(); //调用func2() !func()();
闭包：在函数内部套用函数，并且通过return将内部函数返回。
作用：①访问函数内部作用域。②确保函数内部变量不被释放。
① 在父容器上加上属性：overfolw:hidden;
② 子容器上:after{}
③ 改为inline-block/使用弹性布局
④ 父容器：float
② 给父容器加 border
③ 给父容器加上 overfolw:hidden;
①Background
color image repeat attachment position
②Font
style weight size/line-height family
③List-style
type position image
square inside url("img/img.jpg");
