阿里巴巴面试题

        div{ 

            width: 500px; 

            height: 300px; 

            margin: -150px 0 0 -250px; 

            position: absolute; 

            left: 50%; 

            top: 50%; 

            background-color: yellow;  

        } 









        元素居中 

让层垂直居中于浏览器窗口

方式1 : var obj = new Object();

方式2 : var obj = {};

string、number、object、boolean、function、undefined

19.闭包是什么？有什么特性？请简单书写一个简单事例？

必包：闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）

特性：闭包是能够读取其他函数内部变量的函数，即在外面可以调用函数中的函数的变量，其实他就是将函数内外部连接起来的桥梁

事例：



function a(){

var i = 99;

iAdd = function(){

i++;

}

function b(){

alert(i);

}

return b;

}

var result = a();

result();//结果为99

iAdd();

result();//结果为100

20.  解释jsonp的原理，以及为什么不是真正的ajax（主观题）？

JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

21.  js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（用得最多）、按需异步载入js

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

23. xhtml和html有什么区别？
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

24. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（html/Xhtml）一般为严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

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

块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding

26.CSS引入的方式有哪些?link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可

27.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高

28.前端页面有哪三层构成，分别是什么？作用是什么？
结构层 Html 表示层 CSS 行为层 js

29.css的基本语句构成是？
选择器{属性1:值1;属性2:值2;……}

30.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
Ie(Ie内核)火狐（Gecko）谷歌（webkit） opear(Presto)

31.写出几种IE6 BUG的解决方法？
1.双边距BUG float引起的使用display
2.3像素问题使用float引起的使用dislpay:inline-3px
3.超链接hover 点击后失效使用正确的书写顺序link visited hover active
4.Ie z-index问题给父级添加position:relative
5.Png 透明使用js代码改
6.Min-height 最小高度！Important解决’
7.select 在ie6下遮盖使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

32.标签上title与alt属性的区别是什么？
Alt 当图片不显示是用文字代表。
Title 为该属性提供信息

33.描述css reset的作用和用途？
Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

34.解释css sprites，如何使用？
Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

35.浏览器标准模式和怪异模式之间的区别是什么？
盒子模型渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式

36.你如何对网站的文件和资源进行优化？期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

37.什么是语义化的HTML？
直观的认识标签对于搜索引擎的抓取有好处

38.清除浮动的几种方式，各自的优缺点？
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)

39.javascript的typeof返回哪些数据类型？
Object number function boolean underfind

40.例举3种强制类型转换和2种隐式类型转换？
强制（parseInt,parseFloat,number）
隐式（== – ===）

41.split() join() 的区别？
前者是切割成数组的形式，后者是将数组转换成字符串

42.数组方法pop() push() unshift() shift()？
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

43.14.JS中的call()和apply()方法的区别？

例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);

注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

function add(a,b)

{

   alert(a+b);

}

 

function sub(a,b)

{

   alert(a-b);

}

 

add.call(sub,3,1);

44.IE和DOM事件流的区别？
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

45.IE和标准下有哪些兼容性的写法？

Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

46.ajax请求的时候get 和post方式的区别？
一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的

47.call和apply的区别？

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

48.ajax请求时，如何解释json数据？
使用eval parse 鉴于安全性考虑使用parse更靠谱

49.new操作符具体干了什么呢?

 1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

 2、属性和方法被加入到 this 引用的对象中。

 3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

   var obj  = {};

   obj.__proto__ = Base.prototype;

    Base.call(obj);

50.写一个获取非行间样式的函数？

functiongetStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}

51.事件委托是什么？
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
http://www.webasily.com/?p=78 例子可见此链接

52.闭包是什么，有什么特性，对页面有什么影响？
闭包就是能够读取其他函数内部变量的函数。
http://blog.csdn.net/gaoshanwudi/article/details/7355794 此链接可查看（问这个问题的不是一个公司）

53.如何阻止事件冒泡和默认事件？
canceBubble return false

54.添加删除替换插入到某个接点的方法？
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

55.解释jsonp的原理，以及为什么不是真正的ajax？
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作

56.javascript的本地对象，内置对象和宿主对象？
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等

57.document load 和document ready的区别？
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)

58.”==”和“===”的不同？
前者会自动转换类型
后者不会

59.javascript的同源策略？
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

60.编写一个数组去重的方法？

function oSort(arr)

{

varresult ={};

varnewArr=[];

for(vari=0;i


61.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
62.行内元素有哪些？块级元素有哪些？空(void)元素有那些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。 
（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p 
（3）知名的空元素： 
 
   

鲜为人知的是：        
63.CSS的盒子模型？
（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了border 和 pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
64.link 和@import 的区别是?
（1）、link属于XHTML标签，而@import是CSS提供的;
（2）、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）、import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
（4）、link方式的样式的权重 高于@import的权重.
65.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li: nth - child）
可继承： font-sizefont-family color, UL LI DL DD DT;
不可继承 ：border paddingmargin width height ;
优先级就近原则，样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important >  id > class > tag 
important 比 内联优先级高
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 
 元素的每个 
 元素。
p:last-of-type  选择属于其父元素的最后 
 元素的每个 
 元素。
p:only-of-type  选择属于其父元素唯一的 
 元素的每个 
 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 
 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 
 元素。
:enabled、:disabled控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
66.如何居中div,如何居中一个浮动元素?
·      

  给div设置一个宽度，然后添加margin:0 auto属性

·            div{

·                width:200px;

·                margin:0 auto;

·             } 

·        居中一个浮动元素

·              确定容器的宽高 宽500 高 300 的层

·              设置层的外边距

·         

·             .div {

·              Width:500px ; height:300px;//高度可以不设

·              Margin: -150px 0 0 -250px;

·              position:relative;相对定位

·              background-color:pink;//方便看效果

·              left:50%;

·              top:50%;

·            }



67.浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？
   * IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；

   * png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

   * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

   * IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

     浮动ie产生的双倍距离 #box{float:left; width:10px; margin:0 0 0 100px;}

    这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

     渐进识别的方式，从总体中逐渐排除局部。

     首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
     接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

     css
          .bb{
           background-color:#f1ee18;/*所有识别*/
          .background-color:#00deff\9; /*IE6、7、8识别*/
          +background-color:#a200ff;/*IE6、7识别*/
          _background-color:#1e0bd1;/*IE6识别*/

          }

   *  IE下,可以使用获取常规属性的方法来获取自定义属性,
      也可以使用getAttribute()获取自定义属性;
      Firefox下,只能使用getAttribute()获取自定义属性.
      解决方法:统一通过getAttribute()获取自定义属性.

   *  IE下,even对象有x,y属性,但是没有pageX,pageY属性;
     Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

   * （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

   * Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

   超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
   L-V-H-A :  a:link {} a:visited {}a:hover {} a:active {}
68.html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
·        HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。
·        * 绘画 canvas 元素
·         
·          用于媒介回放的 video和 audio 元素
·         
·          本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失；
·          sessionStorage 的数据在浏览器关闭后自动删除
·         
·          语意化更好的内容元素，比如 article、footer、header、nav、section
·         
·          表单控件，calendar、date、time、email、url、search
·         
·          CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器 多背景 rgba
·         
·          新的技术webworker,websockt, Geolocation
·      移除的元素
·        纯表现的元素：basefont，big，center，font, s，strike，tt，u；
·         
·        对可用性产生负面影响的元素：frame，frameset，noframes；
·         
·        * 是IE8/IE7/IE6支持通过document.createElement方法产生的标签，
·          可以利用这一特性让这些浏览器支持HTML5新标签，
·         
·          浏览器支持新标签后，还需要添加标签默认的样式：
·         
·        * 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
·           
69.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏品字布局如何设计?
* 首先划分成头部、body、脚部；。。。。。

 实现效果图是最基本的工作，精确到2px；

 与设计师，产品经理的沟通和项目的参与

 做好的页面结构，页面重构和用户体验

 处理hack，兼容、写出优美的代码格式

 针对服务器的优化、拥抱 HTML5。
70.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
   * 使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超过91%。

 轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
 （理解这些框架的功能、性能、设计原理）

   * Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。

   * 城市选择插件，汽车型号选择插件、幻灯片插件。弹出层。（写过开源程序，加载器，js引擎更好）
1.    JavaScript原型，原型链 ? 有什么特点？
2.  *  原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
3.  *  原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
4.   
5.  * JavaScript的数据对象有那些属性值？
6.   
7.  　　writable：这个属性的值是否可以改。
8.   
9.  　　configurable：这个属性的配置是否可以删除，修改。
10.  
11. 　　enumerable：这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。
12.  
13. 　　value：属性值。
14.  
15. * 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性，如果没有的话，就会查找他的Prototype对象是否有这个属性。
16.  

function clone(proto) {


　　function Dummy() { }

　　Dummy.prototype = proto;

　Dummy.prototype.constructor = Dummy;

　　return new Dummy(); //等价于Object.create(Person);
 }

       functionobject(old) {
       function F() {};
        F.prototype =old;
        return new F();
      }
   var newObj = object(oldObject);



71.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
 1.    block 象块类型元素一样显示。
 none 缺省值。向行内元素类型一样显示。
 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
 list-item 象块类型元素一样显示，并添加样式列表标记。

 2.
 *absolute
       生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
 *fixed （老IE不支持）
       生成绝对定位的元素，相对于浏览器窗口进行定位。
 *relative
       生成相对定位的元素，相对于其正常位置进行定位。
 * static  默认值。没有定位，元素出现在正常的流中
 *（忽略 top, bottom, left,right z-index 声明）。
 * inherit 规定从父元素继承 position 属性的值。
72.页面重构怎么操作？
编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。
73.语义化的理解？
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
74.HTML5的离线储存？
localStorage    长期存储数据，浏览器关闭后数据不丢失；
sessionStorage  数据在浏览器关闭后自动删除。

75.为什么要初始化CSS样式。
·     因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
·     当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
*最简单的初始化方法就是： * {padding: 0;margin: 0;} （不建议）
   淘宝的样式初始化：
   

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li,pre, form, fieldset, legend, button, input, textarea, th, td { margin:0;padding:0; }

   body, button, input, select, textarea { font:12px/1.5tahoma, arial,\5b8b\4f53; }

   h1, h2, h3, h4, h5, h6{ font-size:100%; }

   address, cite, dfn, em, var { font-style:normal; }

   code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

   small{ font-size:12px; }

   ul, ol { list-style:none; }

   a { text-decoration:none; }

   a:hover { text-decoration:underline; }

   sup { vertical-align:text-top; }

   sub{ vertical-align:text-bottom; }

   legend { color:#000; }

   fieldset, img { border:0; }

   button, input, select, textarea { font-size:100%; }

   table { border-collapse:collapse; border-spacing:0; }



76.(写)描述一段语义的html代码吧。
   （HTML5中新增加的很多标签（如：
、