前端面试题
标签（空格分隔）： 面试题
1.Doctype作用？标准模式和兼容模式的区别？
Doctype是告诉浏览器的解析器以文档标准解析这个文档。Doctype不存在或者不正确会导致文档以兼容模式呈现。
2.HTML5 为什么只需要写 <!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
3.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
1.行内元素
span a b strong img input select
2.块级元素
p h1 h2 h3 h4 div ul ol li dt dl dd
3.空元素
br hr img link meta input
4.页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
5.介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
6.HTML5的新特性、移除了哪些元素
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websockt, Geolocation;
7.简述一下你对HTML语义化的理解？
用正确的标签做正确的事情，html语义化让页面的内容结构化，结构更清晰，而且便于阅读源码的人维护和理解。
8.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
9.介绍一下CSS的盒子模型
（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
10.CSS选择符有哪些？哪些属性可以继承？
1.id选择器（#myid）
2.类选择器(.myclassname)
3.标签选择器（div,p)
4.相邻选择器(div+p)
5.子选择器(ul>li)
6.后台选择器(li a)
7.通配选择器(*)
8.属性选择器(input[type="text"])
9.为类选择器(a:hover)
- 可继承的样式： font-size font-family color, UL LI DL DD DT;
- 不可继承的样式：border padding margin width height ;
11.CSS优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
12.display有哪些值？说明他们的作用。
inline-block:像行内元素一样显示，但是其内容像块类型元素一样显示
block:像块类型元素一样显示
none:此元素不会被显示
inline:默认。此元素会被显示为内联元素，元素前后没有换行符
list-item：像块类型元素一样显示，并添加样式列表标记
table:此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符
table-row:此元素会作为一个表格行显示（类似 <tr>）
table-cell: 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
13.CSS3有哪些新特性？
CSS3实现圆角（border-radius:8px），
阴影（box-shadow:10px），
文字特效（text-shadow、），
线性渐变（gradient），
旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器
多背景 rgba
14.用纯CSS创建一个三角形的原理是什么？
#demo{
width:0;
height:0;
border-width:20px;
border-color:transparent transparent red transparent;
border-style:solid;
}
15.一个满屏 品 字布局 如何设计?
简单的方式：
上面的div宽100%，
下面的两个div分别宽50%，
然后用float或者inline使其不换行即可
16.Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
17.HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
Javascript
1.介绍js的基本数据类型
Undefined、String、Boolean、Null、Number
2.介绍js有哪些内置对象？
Object是JavaScript中所有对象的父对象。
数据封转类对象：Array、Number、Object、Boolean、String
其他对象:Function、RegExp、Arguments、Math、Date、Error
3.JavaScript原型，原型链 ? 有什么特点？
所有对象都有自己的prototype原型对象，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他们会去prototype里去找这个属性，这个prototype也有自己的prototype，于是这样一直寻找，这就是原型链。
特点：当我们更改原型时，与之相关的对象也会改变。
4.Javascript如何实现继承？
function Parent(){
this.name="wang";
}
function Children(){
this.age=18;
}
Children.prototype=new Parent();
Children.prototype.constructure=Children;
var child=new Children();
5.Javascript作用链域?
全局函数无法产看局部函数的内部细节，但局部函数可以查看其上层的函数内部细节，直至全局细节。
当需要从局部函数查找某个属性或者方法时，如果当前作用域没有找到，就会上溯到上册作用域查找，直至到全局，这种组织方式称作作用域链。
6.JavaScript有几种类型的值？
栈：原始数据类型（Undefined，Null，Boolean，Number、String）
堆：引用数据类型（对象、数组和函数）
7.eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
8.null，undefined 的区别？
null 表示一个对象被定义了，值为“空值”；
undefined 表示不存在这个值。
9.["1", "2", "3"].map(parseInt) 答案是多少？
[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix)，
其中 radix 表示解析时用的基数。
map 传了 3 个 (element, index, array)，对应的 radix 不合法导致解析失败。
10.什么是闭包（closure），为什么要用它？
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
闭包的特性：
1.函数内再嵌套函数
2.内部函数可以引用外层的参数和变量
3.参数和变量不会被垃圾回收机制回收
11.javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？
use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript， 在更严格的条件下运行提高编译器效率，增加运行速度，为未来新版本的Javascript标准化做铺垫。
12.如何判断一个对象是否属于某个类？
if(a instanceof Person){
alert('yes');
}
13.new操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
14.谈谈This对象的理解
1、this总是指向函数的直接调用者（而非间接调用者）
2、如果有new关键字，this指向new出来的那个对象
3、在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window
15.Ajax 是什么? 如何创建一个Ajax？
ajax的全称：Asynchronous Javascript And XML。
异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新
16.documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
17.Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
hasOwnProperty
javaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。
使用方法:
object.hasOwnProperty(proName)
其中参数object是必选项。一个对象的实例。
proName是必选项。一个属性名称的字符串值。
如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。
18..call() 和 .apply() 的区别？
call 和 apply 的区别只在于这两个函数接受的参数形式不同。
call和apply可以用来重新定义函数的执行环境，也就是this的指向。
myFunc.call(obj,arg);
myFunc.apply(obj,[arg1,arg2..]);
19.http常用状态码有那些？分别代表是什么意思？
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
