语义化标签，标签语义化和w3c标准

1.Doctype有什么作用？严格模式与混杂模式有什么区别？

声明叫做文件类型定义，声明的作用是告诉浏览器该文件的类型，让浏览器解析器知道改用哪个规范来解析该文档。它的声明必须在html的第一行，这不是一个html标签。

严格模式又称标准模式，是指浏览器按照w3c的标准对文档进行解析。
混杂模式又称怪异模式或者兼容模式，是浏览器用他自己方式来对代码进行解析。
如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

2.常用的浏览器内核有哪些？

1. Gecko内核*：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
2. Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
3. Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
4. Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

3.什么是CSS Hack，作用是什么？
解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。

4.对W3C标准有哪些认识和理解
Web标准的基本概念——结构与表现要分离

标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离。

误区：即大量的使用div标签作为结构元素。事实上这是一种更高级的div滥用(Jeffrey Zeldman在《网站重构》一书中提到）。

保证在用户去掉CSS显示的情况下，网页能够尽量有效的将内容的结构层次显示出来。如果全部用div，当去掉CSS之后，整个网页就失去了层次，只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

HTML标签语义的重要性：Web标准的其中一个要求是低配置的兼容性：当用户禁用图片、禁用CSS或禁用JS的时候，我们仍能够让他有效的浏览网页内容。众所周知强制alt属性就是为禁用图片时的兼容性作考虑。而正确的遵循HTML标签的语义，则是保证禁用CSS时的兼容性。只有当正确使用了HTML标签，我们的网页在“CSS裸奔”的时候，才会仍然让人看得出哪里是导航菜单，哪里是文章标题，日历表格也不会分崩离析。

5.什么是语义化的HTML?
　　语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
　　
6、HTML5为什么只需要写就可以了？
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。
而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。
BUT，HTML5不是的。

7.伪数组如何转化数组？
1.使用Array.prototype.slice.call();

Array.prototype.slice.call({  
 0:"likeke",  
 1:12,  
 2:true,  
 length:3  
});  

2.[].slice.call()，

3.使用ES6中Array.from方法;

8.html5有哪些新特性，移除了那些元素？如何处理html5新标签的浏览器兼容问题
HTML5已形成了最终的标准，概括来讲，它主要是关于图像，位置，存储，多任务等功能的增加。

新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。
内容元素，article、footer、header、nav、section。
表单控件，calendar、date、time、email、url、search。
控件元素，webworker, websockt, Geolocation。
移出的元素有下列这些：
显现层元素：basefont，big，center，font, s，strike，tt，u。
性能较差元素：frame，frameset，noframes。
如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
处理兼容问题有两种方式：
1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2.使用是html5shim框架

9.什么是FOUC?如何解决？
如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.原因大致为：
1，使用import方法导入样式表。``
2，将样式表放在页面底部
3，有几个样式表，放在html结构的不同位置。其实原理很清楚：当样式表晚于 结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂 的 花屏现象。解决方法：使用LINK标签将样式表放在文档HEAD中更多

10.如何实现中间div宽度固定，两端div自适应宽度？说出2种方法

    <style>
        div{height:300px;}
    </style>

<div style="background-color: orangered;float: left;width:30%;"></div>
<div style="background-color: grey;float: right;width:30%"></div>
<div style="background-color:rgba(0,102,204,0.44);width:200px;margin-left:30%"></div>

所有函数对象都有的call方法和apply方法，它们的用法大体相似，f.call(b);的意思是，执行f函数，并将f函数执行期活动对象里的this指向b对象，这样标示符解析时，this就会是b对象了。不过调用函数是要传参的。所以，f.call(b, x, y); f.apply(b, [x, y]);好吧，以上就是用call方法执行f函数，与用apply方法执行f函数时传参方式，它们之间的差异，大家一目了然：apply通过数组的方式传递参数，call通过一个个的形参传递参数。

11.如何判断一个对象是否属于某个类？
一般来说我们判断的方法有以下这些：

(1) typeof 运算符 typeof 是一元运算符，返回结果是一个说明运算数类型的字符串。如：“number”，“string”，“boolean”，“object”，“function”，“undefined”（可用于判断变量是否存在）。 但 typeof 的能力有限，其对于Date、RegExp类型返回的都是"object"。如：

typeof {}; // "object"
typeof []; // "object"
typeof new Date(); // "object"

所以它只在区别对象和原始类型的时候才有用
(2)instanceof 运算符。 instanceof 运算符要求其左边的运算数是一个对象，右边的运算数是对象类的名字或构造函数。如果 object 是 class 或构造函数的实例，则 instanceof 运算符返回 true。如果 object 不是指定类或函数的实例，或者 object 为 null，则返回 false。如：

[] instanceof Array; // true
[] instanceof Object; // true
[] instanceof RegExp; // false
new Date instanceof Date; // true

(3)constructor 属性。 JavaScript中，每个对象都有一个constructor属性，它引用了初始化该对象的构造函数，常用于判断未知对象的类型。如给定一个求知的值 通过typeof运算符来判断它是原始的值还是对象。如果是对象，就可以使用constructor属性来判断其类型。所以判断数组的函数也可以这样写：

function isArray(arr){
    return typeof arr == "object" && arr.constructor == Array;
}

最标准也是最准确的就是通过寻找该对象的原型链来判断他的类型。

var a=[1,35,67];
console.log(Object.prototype.toString.call(a)=='[object array]')

扩展方式

var is ={
    types : ["Array", "Boolean", "Date", "Number", "Object", "RegExp", "String", "Window", "HTMLDocument"]
};
for(var i = 0, c; c = is.types[i ++ ]; ){
    is[c] = (function(type){
        return function(obj){
           return Object.prototype.toString.call(obj) == "[object " + type + "]";
        }
    )(c);
}
alert(is.Array([])); // true
alert(is.Date(new Date)); // true
alert(is.RegExp(/reg/ig)); // true

12.什么是闭包？为什么要用它？？
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

闭包的特性：
1.函数内再嵌套函数
2.内部函数可以引用外层的参数和变量
3.参数和变量不会被垃圾回收机制回收
闭包的用途以及它占用内存的原因
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

13.Ajax有哪些方法？
14.js是如何实现继承的？
JavaScript 中的继承方式是基于原型的
15.什么是事件冒泡？如何阻止他？
看一看以下代码
html部分

<div id="box1">
    <div id="box2">
        <div id="box3">
       
        </div>
    </div>
</div>

js部分

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
box1.onclick = fn;//box1
box2.onclick = fn;//box2  box1
box3.onclick = fn;//box3  box2  box1
function fn(ev){
    var ev = ev || window.event;
    console.log(this.id);      
}

当我们点击box3时，输出的结果本来应该是box3，但是现在却是box3、box2、box1，这就是事件冒泡：当一个元素在触发事件的时候，这个事件会传递给他的父元素！
解决方式
在console.log之前加上以下代码即可阻止冒泡事件

ev.cancelBubble = true;

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发：

IE 5.5: div -> body -> document；

IE 6.0: div -> body -> html -> document；

Mozilla 1.0: div -> body -> html -> document -> window。

（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
16.JS中定义对象的方法有哪些？
　 1.基于已有对象扩充其属性和方法
　　2.工厂方式
　　3.构造函数方式
　　4.原型(“prototype”)方式
　　5.动态原型方式
一.基于已有对象扩充其属性和方法

<script type="text/javascript">
var object = new Object();
object.name = "zhangsan";
object.sayName = function(name)
{
       this.name = name;
       alert(this.name);
}
object.sayName("lisi");
</script>

这种方式的弊端：这种对象的可复用性不强，如果需要使用多个对象，还必须重新扩展属性和方法；
二：工厂函数
　优点：让一个函数对象被多个对象所共享，而不是每一个对象拥有一个函数对象。
　缺点：对象和它的方法定义分开了，可能会造成误解和误用。
三：构造函数

function Person(username, password)
{
       this.username = username;
       this.password = password;

       this.getInfo = function()
       {
              alert(this.username + ", " + this.password);
       }
}

var person = new Person("zhangsan", "123");
person.getInfo();

四：原型对象（prototype）

function Person()
{
}

Person.prototype.username = "zhangsan";
Person.prototype.password = "123";

Person.prototype.getInfo = function()
{
       alert(this.username + ", " + this.password);
}

var person = new Person();
var person2 = new Person();

person.username = "lisi";

person.getInfo();
person2.getInfo();

缺点：不能传参；
有可能会导致程序错误；

如果使用原型方式来定义对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反映到其他对象当中。

单纯使用原型方式定义对象无法在构造函数中为属性赋初值，只能在对象生成后再去改变属性值。
　　
　　比如，username改为数组后：

function Person()
{
}

Person.prototype.username = new Array();
Person.prototype.password = "123";

Person.prototype.getInfo = function()
{
       alert(this.username + ", " + this.password);
}

var person = new Person();
var person2 = new Person();

person.username.push("zhangsan");
person.username.push("lisi");
person.password = "456";

person.getInfo(); //输出：zhangsan,lisi, 456
person2.getInfo(); //输出：zhangsan,lisi, 123

//虽然没有对person2对象进行修改，但是它的name和person是一样的，即为zhangsan,lisi

这是因为使用原型方式，person和person2指向的是同一个原型，即对应了同样的属性对象。

对于引用类型(比如数组)，两个对象指向了同一个引用，所以对一个所做的更改会影响另一个。

而对于字符串(字面常量值)，重新赋值之后就指向了另一个引用，所以二者的修改互不影响。
　　17.事件绑定有哪些方法？
　　动态绑定，行内绑定，事件监听
　　18.一次完整的HTTP事务是怎样的过程？
　　一次完整的HTTP请求过程从TCP三次握手建立连接成功后开始，客户端按照指定的格式开始向服务端发送HTTP请求，服务端接收请求后，解析HTTP请求，处理完业务逻辑，最后返回一个HTTP的响应给客户端，HTTP的响应内容同样有标准的格式。无论是什么客户端或者是什么服务端，大家只要按照HTTP的协议标准来实现的话，那么它一定是通用的。
　　19.如何获取一个节点的值
　　1.通过顶层document获取
　　2.通过父节点获取
　　3.通过子节点获取
　　4.通过临近节点获取
　　20.快速排序方法的实现

var quickSort = function(arr) {
　　if (arr.length <= 1) { return arr; }
　　var pivotIndex = Math.floor(arr.length / 2);
　　var pivot = arr.splice(pivotIndex, 1)[0];
　　var left = [];
　　var right = [];
　　for (var i = 0; i < arr.length; i++){
　　　　if (arr[i] < pivot) {
　　　　　　left.push(arr[i]);
　　　　} else {
　　　　　　right.push(arr[i]);
　　　　}
　　}
　　return quickSort(left).concat([pivot], quickSort(right));