web前端部分面试习题

1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

Doctype 是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义(DTD)来解析文档。

2.行内元素有哪些？块级元素有哪些？CSS的盒模型？

   内联元素(inline element)

* a - 锚点   * abbr - 缩写    * acronym - 首字  * b - 粗体(不推荐)   * big - 大字体     * br - 换行*   em - 强调 *font - 字体设定(不推荐) * i - 斜体 * img - 图片         * input - 输入框   * label - 表格标签       * s - 中划线(不推荐)     * select - 项目选择 * small - 小字体文本         * span - 经常使用内联容器，定义文本内区块             * strike - 中划线     * strong - 粗体强调           * sub - 下标 * sup - 上标* textarea - 多行文本输入框* tt - 电传文本* u - 下划线* var - 定义变量

块级元素

* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 经常使用块级容易，也是css layout的主要标签* dl - 定义列表* fieldset - form控制组* form - 交互表单* h1 - 大标题* h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* hr - 水平分隔线* isindex - input prompt* menu - 菜单列表* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）* ol - 排序表单* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表

.CSS盒子模型包含四个部分组成：

内容、填充（padding）、边框（border）、外边界（margin）。w3c 盒子模型的范围包括 margin、border、padding、content，而且 content 部分不包含其余部分。

 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不一样的是：ie 盒子模型的 content 部分包含了 border 和 pading。

那应该选择哪中盒子模型呢？固然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据本身的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，因此网页在不一样的浏览器中就显示的不同了。反之，假如加上了 doctype 声明，那么全部浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

3 .CSS引入的方式有哪些? link和@import的区别是?

 

本质上，这两种方式都是为了加载CSS文件，但仍是存在着细微的差异。
 
差异1：老祖宗的差异。link属于XHTML标签，而@import彻底是CSS提供的一种方式。
 
link标签除了能够加载CSS外，还能够作不少其它的事情，好比定义RSS，定义rel链接属性等，@import就只能加载CSS了。
 
差异2：加载顺序的差异。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面所有被下载完再被加载。因此有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
 
差异3：兼容性的差异。因为@import是CSS2.1提出的因此老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
 
差异4：使用dom控制样式时的差异。当使用javascript控制dom去改变样式的时候，只能使用link标签，由于@import不是dom能够控制的。
差异5：@import能够在css中再次引入其余样式表，好比能够建立一个主样式表，在主样式表中再引入其余的样式表，
大体就这几种差异了（若是还有什么差异，你们告诉我，我再补充上去），其它的都同样，从上面的分析来看，仍是使用link标签比较好。

4.。CSS选择符有哪些？哪些属性能够继承？优先级算法如何计算？内联和important哪一个优先级高？

id 和class ,其中class能够继承，伪类的标签也能够继承，列表ul li dl dd dt 能够继承，优先级就近原则，样式定义为最近者， 优先级比较：！important>【id>class>tag】

5.前端页面有哪三层构成，分别是什么？做用是什么？

网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责建立。标签，也就是那些出如今尖括号里的单词，对网页内容的语义含义作出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。” 网页的表示层（presentation layer） 由 CSS 负责建立。 CSS 对“如何显示有关内容”的问题作出了回答。 网页的行为层（behavior layer）负责回答“内容应该如何对事件作出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

6.css的基本语句构成是？

选择器{属性1:值1;属性2:值2;……}

7：面前各大浏览器的内核

①Trident：表明浏览器：IE4，IE5，IE6，IE7，IE8，IE9，Maxthon，The World，GreenBrowser，腾讯TT等。

②Presto   表明浏览器：Opera，NDSBrowser，Wii Internet Channle，Nokia 770；

③Gecko    表明浏览器：Netscape，Mazilla Firefox；
④Webkit   表明浏览器：Safari，Chrome；

浏览器hack前缀  例如 

*/ -o-transform: rotate(40deg); /* Opera浏览器 */

    /-webkit-transform: rotate(40deg); /* Webkit内核浏览器 chrome ,safari

                        */-moz-transform: rotate(40deg); /* Firefox浏览器 */

                          */-ms-transform:rotate(-40deg) ;/*IE9*/　

8..js如何 添加、移除、移动、复制、建立和查找节点

（1）建立新节点

      createDocumentFragment()    //建立一个DOM片断

      createElement_x()   //建立一个具体的元素

      createTextNode()   //建立一个文本节点

（2）添加、移除、替换、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore()

（3）查找

  

    getElementsByTagName()    //经过标签名称

      getElementsByName()    //经过元素的Name属性的值

      getElementById()    //经过元素Id，惟一性

（4）复制节点
cloneNode() 方法，用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其全部子节点）， false 表示浅复制（复制节点自己，不复制子节点）

1 var ul = document.getElementByIdx_x("myList"); //得到ul 
2 var deepList = ul.cloneNode(true); //深复制

3 var shallowList = ul.cloneNode(false); //浅复制

9.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差异

在浏览器解析事件的时候，有两种触发方式，一种叫作Bubbling(冒泡)，另一种叫作Capturing(捕获)。由上图能够看出来，冒泡的方式效果就是当一个DOM元素的某事件例如click事件被fire时，依次它的父元素的click事件也被fire(触发)，一直传递到最顶层的body元素为止。而捕获的触发方式正好相反，当某个元素的click事件被触发时，先从最顶层的body元素click事件被触发开始，一直传递到真正被触发的元素为止。

① Traditional Module
传统方式的事件模型即直接在DOM元素上绑定事件处理器，例如—

window.onload=function(){…}
obj.onmouseover=function(e){…}
obj.onclick=function(){…}

 首先这种方式是不管在IE仍是Firefox等其余浏览器上均可以成功运行的通用方式。这即是它最大的优点了，并且在Event处理函数内部的this变量无一例外的都只想被绑定的DOM元素，这使得Js程序员能够大大利用this关键字作不少事情。
 
至于它的缺点也很明显，就是传统方式只支持Bubbling，而不支持 Capturing
二、 W3C (Firefox.e.g) Event Module
Firefox等浏览器很坚定的遵循W3C标准来制定浏览器事件模型，使用addEventListener和removeEventListener两个函数，看几个例子—

window.addEventListener(‘load’,function(){…},false);
document.body.addEventListener(‘keypress’,function{…},false);
obj.addEventListener(‘mouseover’,MV,true);

function MV(){…}

 addEventListener带有三个参数，第一个参数是事件类型，就是咱们熟知的那些事件名字去掉前面的’on’，第二个参数是处理函数，能够直接给函数字面量或者函数名，第三个参数是boolean值，表示事件是否支持Capturing。
 
W3C的事件模型优势是Bubbling和Capturing都支持， 而且能够在一个DOM元素上绑定多个事件处理器，各自并不会冲突。而且在处理函数内部，this关键字仍然可使用只想被绑定的DOM元素。另外function参数列表的第一个位置(无论是否显示调用)，都永远是event对象的引用。 至于它的缺点，很不幸的就只有在市场份额最大的IE浏览器下不可以使用这一点。

 三、 IE Event Module
IE本身的事件模型跟W3C的相似，但主要是经过attachEvent和detachEvent两个函数来实现的。依旧看几个例子吧—

window.attachEvent(‘onload’,function(){…});

document.body.attachEvent(‘onkeypress’,myKeyHandler);

能够发现它跟W3C的区别是没有第三个参数，并且第一个表示事件类型的参数也必须把’on’给加上。这种方式的优势就是能绑定多个事件处理函数在同一个DOM元素上。 至于它的缺点，为何现在在实际开发中不多见呢？首先IE浏览器自己只支持Bubbling不支持Capturing；并且在事件处理的function内部this关键字也没法使用，由于this永远都只想window object这个全局对象。要想获得event对象必须经过window.event方式，最后一点，在别的浏览器中，它显然是没法工做的。

 最后我在推荐两个必须知道的IE和W3C标准的区别用法吧—
一、 当咱们须要阻止浏览器某DOM元素的默认行为的时候在W3C下调用e.preventDefault()，而在IE下则经过window.event.returnValue＝false来实现。
二、当咱们要阻止事件冒泡的时候，在W3C标准里调用e.stopPropagation()，而在IE下经过设置window.event.cancelBubble=true来实现。 

10面向对象编程:b怎么继承a

(一)对象冒充

function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+” say Hello!”);};
}

function B(name,id){
    this.temp = A;
    this.temp(name);        //至关于new A();
    delete this.temp;        //防止在之后经过temp引用覆盖超类A的属性和方法
     this.id = id;   
    this.checkId = function(ID){alert(this.id==ID)};}

当构造对象B的时候，调用temp至关于启动A的构造函数，注意这里的上下文环境中的this对象是B的实例，因此在执行A构造函数脚本时，全部A的变量和方法都会赋值给this所指的对象，即B的实例，这样子就达到B继承了A的属性方法的目的。以后删除临时引用temp，是防止维护B中对A的类对象（注意不是实例对象）的引用更改，由于更改temp会直接致使类A（注意不是类A的对象）结构的变化。

咱们看到了，在Js版本更新的过程当中，为了更方便的执行这种上下文this的切换以达到继承或者更加广义的目的，增长了call和apply函数。它们的原理是同样的，只是参数不一样的版本罢了(一个可变任意参数，一个必须传入数组做为参数集合)。这里就以call为例子，解释一下用call实现的对象冒充继承。

function Rect(width, height){
    this.width = width;
    this.height = height;
    this.area = function(){return this.width*this.height;};
}

function myRect(width, height, name){
    Rect .call(this,width,height);
    this.name = name;
    this.show = function(){
    alert(this.name+” with area:”+this.area());
    }
}

关于Call方法，官方解释：调用一个对象的一个方法，以另外一个对象替换当前对象。 
call (thisOb,arg1, arg2…)

这也是一种对象冒充的继承，其实在call方法调用的时候发生的事情也是上下文环境变量this的替换，在myRect函数体中this确定是指向类myRect对象的实例了，然而用这个this做为上下文环境变量调用名字叫Rect方法，即类Rect的构造函数。因而此时调用Rect时候对this的赋值属性和方法都其实是对一个myRect的对象进行。因此说尽管call和apply并非仅仅为了继承而新增的方法，但用它们能够模拟继承。

对象冒充继承就是这么一回事，它能够实现多重继承，只要重复作这一套赋值的流程就能够了。不过目前真正大规模使用得并很少，为何呢？由于它有一个明显的性能缺陷，这就要说道OO的概念了，咱们说对象是成员+成员方法的集合，构造对象实例的时候，这些实例只须要拥有各自的成员变量就能够了，成员方法只是一段对变量操做的可执行文本区域而已，这段区域不用为每一个实例而复制一份，全部的实例均可以共享。如今回到Js利用对象冒充模拟的继承里，全部的成员方法都是针对this而建立的，也就是所全部的实例都会拥有一份成员方法的副本，这是对内存资源的一种极度浪费。其它的缺陷好比说对象冒充没法继承prototype域的变量和方法就不用提了，笔者认为前一个致命缺陷就已经足够。不过，咱们仍是须要理解它，特别是父类的属性和方法是如何继承下来的原理，对于理解Js继承很重要。

(二)原型方式 
第二种继承方式是原型方式，所谓原型方式的继承，是指利用了prototype或者说以某种方式覆盖了prototype，从而达到属性方法复制的目的。其实现方式有不少中，可能不一样框架多少会有一点区别，可是咱们把握住原理，就不会有任何不理解的地方了。看一个例子（某一种实现）：

function Person(){
    this.name = “Mike”;
    this.sayGoodbye = function(){alert(“GoodBye!”);};
}

Person.prototype.sayHello = function(){alert(”Hello!”);};

function Student(){}

Student.prototype = new Person();

关键是对最后一句Student原型属性赋值为Person类构造的对象，这里笔者解释一下父类的属性和方法是如何copy到子类上的。Js对象在读取某个对象属性的时候，老是先查看自身域的属性列表，若是有就返回不然去读取prototype域(每一个对象共享构造对象的类的prototype域全部属性和方法)，若是找到就返回，因为prototype能够指向别的对象，因此Js解释器会递归的去查找prototype域指向对象的prototype域，直到prototype为自己，查找变成了一种循环，就中止，此时还没找到就成undefined了。

这样看来，最后一句发生的效果就是将父类全部属性和方法链接到子类的prototype域上，这样子类就继承了父类全部的属性和方法，包括name、sayGoodbye和sayHello。这里与其把最后一句当作一种赋值，不如理解成一种指向关系更好一点。这种原型继承的缺陷也至关明显，就是继承时父类的构造函数时不能带参数，由于对子类prototype域的修改是在声明子类对象以后才能进行，用子类构造函数的参数去初始化父类属性是没法实现的，以下所示：

function Person(name){
    this.name = name;
}

function Student(name,id){
    this.id = id;
}

Student.prototype = new Person(this.name);

两种继承方式已经讲完了，若是咱们理解了两种方式下子类如何把父类的属性和方法“抓取”下来，就能够自由组合各自的利弊，来实现真正合理的Js继承。下面是我的总结的一种综合方式：

function Person(name){
    this.name = name;
}

Person.prototype.sayHello = function(){alert(this.name+“say Hello!”);};

function Student(name,id){
    Person.call(this,name);
    this.id = id;
}

Student.prototype = new Person();
Student.prototype.show = function(){
    alert(“Name is:”+ this.name+” and Id is:”+this.id);
}

总结就是利用对象冒充机制的call方法把父类的属性给抓取下来，而成员方法尽可能写进被全部对象实例共享的prototype域中，以防止方法副本重复建立。而后子类继承父类prototype域来抓取下来全部的方法。如想完全理清这些调用链的关系，推荐你们多关注Js中prototype的constructor和对象的constructor属性