史上前端面试最全知识点（附答案）

一.html & js & css

1.AMD和CMD是什么？它们的区别有哪些？

AMD和CMD是二种模块定义规范。现在都使用模块化编程，AMD，异步模块定义；CMD，通用模块定义。AMD依赖前置，CMD依赖就近。CMD的API职责单一，没有全局require，AMD的一个API可以多用。

2.web开发常见的漏洞。

XSS（跨站脚本攻击）：其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如，盗取用户Cookie、破坏页面结构、重定向到其它网站等。

SQL注入：用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。

3.cookie和session

当你在浏览网站的时候，WEB 服务器会先送一小小资料放在你的计算机上，Cookie 会帮你在网站上所打的文字或是一些选择，

都纪录下来。当下次你再光临同一个网站，WEB 服务器会先看看有没有它上次留下的 Cookie 资料，有的话，就会依据 Cookie
里的内容来判断使用者，送出特定的网页内容给你。
 当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识
（称为session id），如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来
使用（检索不到，会新建一个），如果客户端请求不包含session id，则为此客户端创建一个session并且生成一个与此session相
关联的session id

4.MVC BFC

mvc是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。MVC对应Html，CSS，js。

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。流体特性：块状水平元素，如div元素（下同），在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器；BFC元素特性表现原则就是，内部子元素不会影响外部的元素。

5.HTTP状态码：

 1.消息  2.成功 3.重定向 4.请求错误 5.服务器错误 304：响应禁止包含消息体，如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。 305：被请求的资源必须通过指定的代理才能被访问。 400：语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求，或者请求参数有误。 403：服务器已经理解请求，但是拒绝执行它。 404：请求失败，请求所希望得到的资源未被在服务器上发现。 500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

6.HTML 5 增加了一项新功能是 自定义数据属性 ，也就是  data- 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放。
<div id = "user" data-uid = "12345" data-uname = "愚人码头" > </div>

// 使用getAttribute获取 data- 属性
var user = document . getElementById ( 'user' ) ;
var userName =user . getAttribute ( 'data-uname' ) ; // userName = '愚人码头'
var userId = user . getAttribute ( 'data-uid' ) ; // userId = '12345'
 
使用setAttribute设置 data- 属性
user . setAttribute ( 'data-site' , 'http://www.css88.com' ) ;

7.使div水平垂直都居中

知道DIV的自身长度和宽度，其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。[style="position: absolute;top:50%;left: 50%"]只能实现DIV离左边框和上边框的距离为屏幕的物理尺寸的一半，忽略了DIV本身的长度和宽度，所以不会实现DIV的水平垂直居中。
不知道DIV的本身长度和宽度时:

        $(window).load(function(){
            $(".mydiv").css({                position: "absolute",                left: ($(window).width() - $(".mydiv").width())/2,                top: ($(window).height() - $(".mydiv").height())/2
            });
        });

8.Call（）和apply（）
构造函数：

 function showname(){    this.name="zygg"；
}var qq=new showname();console.log(qq.name);

我们发现apply()和call()的真正用武之地是能够扩充函数赖以运行的作用域，可以改变函数体内部 this 的指向：

      window.firstName = "diz";        window.lastName = "song";        var myname = { firstName: "my", lastName: " " };        function show() {        console.log("Hello " + this.firstName + " " +this.lastName, " glad to meet you!");
        }
        show();
        show.call(myname);//如果不这样写，对象myname是没法调用函数 show()的。

二者作用类似，区别就是参数不同：
call(thisObj， )
apply(thisObj，[argArray])

9.动态节点绑定事件

Live（） delegate（） bind（）【处理文档中的静态部分，不用于。。。】
delegate()和live（）作用类似，附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。但二者参数不一样。
$(selector).delegate(childSelector,event,function)

$(selector).live(event,function)

$("div").delegate("p","click",function(){

$(this).slideToggle();

});//只有DIV内的p元素会被绑定事件。
$("p").live("click",function(){

$(this).slideToggle();

});//文档内所有p元素都会被绑定事件
bind（）可以向元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。
$(selector).bind(event,function)
$("button").bind("click",function(){