2016阿里面试题整理与分析（更新中。。。）

2016阿里前端面试题及其分析

分析持续更新中，非常欢迎您在评论中给出您的答案或者对我的分析有看法的。

1.以下对于HTTP和HTTPS描述错误的是

HTTP使用的80端口，HTTPS使用的是443端口
HTTP明文传输，HTTPS使用ssl加密
HTTPS中的SSL加密方式为MD5
HTTPS协议需要到ca申请证书

分析:

2.margin: 5px 10px 15px 20px; 请问左边距的值是多少

5px
10px
15px
20px

分析:

CSS margin 属性

设置外边距的最简单的方法就是使用 margin 属性。

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：

h1 {margin : 0.25in;}

下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}

与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：

margin: top right bottom left

另外，还可以为 margin 设置一个百分比数值：

p {margin : 10%;}

百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。

值复制

还记得吗？我们曾经在前两节中提到过值复制。下面我们为您讲解如何使用值复制。

有时，我们会输入一些重复的值：

p {margin: 0.5em 1em 0.5em 1em;}

通过值复制，您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的：

p {margin: 0.5em 1em;}

这两个值可以取代前面 4 个值。这是如何做到的呢？CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：

如果缺少左外边距的值，则使用右外边距的值。

如果缺少下外边距的值，则使用上外边距的值。

如果缺少右外边距的值，则使用上外边距的值。

下图提供了更直观的方法来了解这一点：



换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。

利用这个简单的机制，您只需指定必要的值，而不必全部都应用 4 个值，例如：

h1 {margin: 0.25em 1em 0.5em;}    /* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}        /* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}    　　　　 /* 等价于 1px 1px 1px 1px */

这种办法有一个小缺点，您最后肯定会遇到这个问题。假设希望把 p 元素的上外边距和左外边距设置为 20 像素，下外边距和右外边距设置为 30 像素。在这种情况下，必须写作：

p {margin: 20px 30px 30px 20px;}

这样才能得到您想要的结果。遗憾的是，在这种情况下，所需值的个数没有办法更少了。

再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是 auto（左外边距是 20px）：

p {margin: auto auto auto 20px;}

同样的，这样才能得到你想要的效果。问题在于，键入这些 auto 有些麻烦。如果您只是希望控制元素单边上的外边距，请使用单边外边距属性。

单边外边距属性

您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin（需要键入很多 auto），而是可以采用以下方法：

p {margin-left: 20px;}

您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

margin-top

margin-right

margin-bottom

margin-left

一个规则中可以使用多个这种单边属性，例如：

h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}

当然，对于这种情况，使用 margin 可能更容易一些：

p {margin: 20px 30px 30px 20px;}

不论使用单边属性还是使用 margin，得到的结果都一样。一般来说，如果希望为多个边设置外边距，使用 margin 会更容易一些。不过，从文档显示的角度看，实际上使用哪种方法都不重要，所以应该选择对自己来说更容易的一种方法。

提示和注释

提示：Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。

3.以下哪个标签不是HTML5语义化标签

mark
time
figure
date

分析:

新增的元素

结构元素：

section
article
aside
header
hgroup
footer
nav
figure

其他元素：

video
audio
embed
mark
progress
time
ruby
rt
rp
wbr
canvas
command
details/summary
datalist/input
datagrid
keygen
output
source
menu

新增的input元素的类型

email
url
number
range
Date Pickers:
data
month
week
time
datetime (UTC)
datetime-local (local)

新增的属性:

表单相关属性：

autofocus -> input(type=text),select,testarea,button
placeholder -> input(type=text),testarea
form -> input,output,select,testarea,button,fieldset
required -> input(type=text),textarea
autocomplete,min,max,multiple,pattern,step ->input
list,autocomplete -> datalist
formaction,formenctype,formmethod,formnovalidate,formtarget -> input,button
novalidate -> input,button,form

链接相关属性：

media -> a,area
hreflang,rel -> area
sizes -> link
target -> base

其他属性：

reversed -> ol
charset -> meta
type,label -> menu
scoped -> style
async -> script
manifest -> html
sandbox,seamless,srcdoc -> iframe

4.下面哪个不属于CSS中表示尺寸的单位？

px、%
em、rem
mm、ck
pt、pc

分析:

这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章， 题目有点吓人，但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点，看过以后确实收获很大。平时都是用px来定义字 体，所以无法用浏览器字体放大的功能，而国外大多数网站都可以在IE下使用。因为：

　　1. IE无法调整那些使用px作为单位的字体大小;

　　2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;

　　3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。

　　px像素(Pixel)是相对长度单位，像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

　　em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

　　字体单位使用em能支持IE6下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应。

　　px是绝对单位，不支持IE的缩放。

　　em是相对单位，网页中的文字能放大和缩小。将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。

　　任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明 Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

　　em有如下特点：

　　1. em的值并不是固定的;

　　2. em会继续父级元素的字体大小。

　　所以我们在写CSS的时候，需要注意：

　　1. body选择器中声明Font-size=62.5%;(Font-size=63%;用于ie6兼容)

　　2. 将你的原来的px数值除以10，然后换上em作为单位;

　　3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

　　也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继续#content的字体高而变为了1em=12px。

　　但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有 其他的解释。

　　单位pt的说明

　　在印刷排版中,point是一个绝对值,它等于1/72英寸,可以用尺子丈量的,物理的英寸。但是在css中pt含义却并非如此。因为我们的显示器 被分割为了一个个的像素，单个像素只能有一种颜色 (为了简化，这里暂不讨论次像素反锯齿技术)，要在屏幕上显示，必须先把以 pt 为单位的长度转换为以像素为单位的长度，这个转换的媒介，就是 DPI (事实上，这里的所谓的 DPI，是操作系统和浏览器中使用的术语，即为 PPI, pixels per inch，和扫描仪、打印机、数码相机中的 DPI 是不同的概念)。

　　例如，无论在哪个操作系统中，Firefox 浏览器默认的 DPI 都是 96，那么实际上 9pt = 9 * 1/72 * 96 = 12px。

　　所以，虽然“DPI”中的“I”和“1pt 等于 1/72 inch”中的“inch”，都不代表物理上的英寸，但这两个单位互相之间是相等的，也就在相乘中约掉了。

　　那么，真实的物理长度怎么计算呢?请拿出一把尺子，丈量你的显示器的可见宽度 (我这里是 11.2992 英寸)，除以横向分辨率 (我这里是 1024 像素)，得到的就是每个像素的物理长度。

　　现在我们可以回答这样一个问题，网页上 9pt 的字体究竟占用了多宽的空间?答案是:　　9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英寸 = 0.3363 厘米。

　　虽然pt是绝对单位，但是那只是针对输出设备而言的，在文字排版工具(word，abobe)中是非常有用的字体单位。不管显示器的分辨率是多少，打印在纸面上的结果是一样的。

　　但是网页主要为了屏幕显示，而不是为了打印等其他需要的。而px能够精确地表示元素在屏幕中的位置和大小。

　　当然。在dpi是96的情况下，9pt=12px。

5.下面有关于JavaScript事件描述,哪个是错误的？

click、mouseenter、blur事件是可以冒泡的
mouseenter、mouseover在高级浏览器下是有区别的
事件流是分为捕获和冒泡两个阶段
在chrome中，可以使用addEventListener来给元素添加事件

分析:

6.把一个字面量对象，变成某个类的实例

function Type() {}
var a = {};
______________
// a instanceof Type === true

分析:

首先感谢@double Net的回复。

a.__proto__ = new Type;

那么，接下来，为什么是这样呢。进入分析正题：

一、prototype和__proto__的概念

prototype是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象。它是显示修改对象的原型的属性。

__proto__是一个对象拥有的内置属性（请注意：prototype是函数的内置属性，__proto__是对象的内置属性），是JS内部使用寻找原型链的属性。

用chrome和FF都可以访问到对象的__proto__属性，IE不可以。

二、new 的过程

var Person = function(){};
var p = new Person();

new的过程拆分成以下三步：

(1) var p={}; 也就是说，初始化一个对象p
(2) p.__proto__ = Person.prototype;
(3) Person.call(p); 也就是说构造p，也可以称之为初始化p

关键在于第二步，我们来证明一下：

var Person = function(){};
var p = new Person();
alert(p.__proto__ === Person.prototype);

这段代码会返回true。说明我们步骤2是正确的。

三、示例

var Person = function(){};
Person.prototype.sayName = function() {
alert("My Name is Jacky");
};

Person.prototype.age = 27;
var p = new Person();
p.sayName();

p是一个引用指向Person的对象。我们在Person的原型上定义了一个sayName方法和age属性，当我们执行p.age时，会先在this的内部查找（也就是构造函数内部），如果没有找到然后再沿着原型链向上追溯。

这里的向上追溯是怎么向上的呢？这里就要使用__proto__属性来链接到原型（也就是Person.prototype）进行查找。最终在原型上找到了age属性。

所以此题也可以：

a.__proto__ = Type.prototype

也能得到

a instanceof Type === true

7.请填入内容，使得数组从小到大排序；

var arr = [6,2,10,5,9,5];
arr.sort(              )

分析：

考对sort这个函数。MDN上解释灰常清晰，附上：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

function(a,b){return a-b}

8.把两个字符串相加并且最终的结果字符顺序反转。

var str1 = 'abcd';
var str2 = 'jjhhgg';
var str3 = str1.___________(str2);
var str4 = str3.___________('').reverse().concat('');

分析：

这题目有问题，最后一句cancat('')是个什么鬼，题目意思？

var str1 = 'abcd';
var str2 = 'jjhhgg';
var str3 = str1.concat(str2);
var str4 = str3.split('').reverse().join('');

对于题目本身意思，我觉得应该是这样的。

9.请问’click’事件在移动端表现与PC端有什么区别？请给出方案消除这种区别？

分析：

10.使用原生JavaScript实现：一个shuffle方法，将数组中的元素随机乱序排列。

分析：

一种方法：

var arr=[1,2,3,4,5,6,7,8,9];
arr.sort(function(){
return Math.random()>Math.random()
})

11.请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。

分析：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>border</title>
</head>
<body>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>

</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</tbody>
</table>

</body>
</html>

td {
width:100px
}
tbody tr:nth-child(odd) {
background-color: white;
}
tbody tr:nth-child(even) {
background-color: gray;
}

tbody tr:hover {
background-color: yellow;
}

直观的效果可以来这个传送门：http://runjs.cn/code/whsdwthw

另外一份题目

1、下面哪个不属于W3C标准盒模型？

a.内容
b.边框
c.内边距
d.轮廓

分析：

2、下列事件哪个不属于鼠标触发的事件？

a.click
b.contextmenu
c.mouseout
d.keydown

分析：

keydown呗，翻译翻译...

contextmenu是新的，下面解释下：

为 <p> 元素规定一个上下文菜单。该菜单会在用户右键点击该元素时出现：

<p contextmenu="supermenu">这个段落附加了一个名为 "supermenu" 的上下文菜单。</p>

<menu id="supermenu">
<command label="Step 1: Write Tutorial" onclick="doSomething()">
<command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>

浏览器支持

目前没有任何主流浏览器支持 contextmenu 属性。就是说没什么卵用！

定义和用法

contextmenu 属性为元素规定上下文菜单。这个菜单会在用户右键点击元素时出现。

contextmenu 属性的值是需要打开的 <menu> 元素的 id。

HTML 4.01 与 HTML 5 之间的差异

contextmenu 属性是 HTML5 中的新属性。

语法

<element contextmenu="menu_id">

属性值

值	描述
menu_id	要打开的 <menu> 元素的 id。

3、一个实现搜索结果的页面，如果你想实现高亮搜索关键词，应该使用下面哪个tag？

a.<strong>
b.<mark>
c.<em>
d.<highlight>

分析：

mark：

突出显示部分文本：

<p>Do not forget to buy <mark>milk</mark> today.</p>

浏览器支持

IE	Firefox	Chrome	Safari	Opera
√	√	√	√	√

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <mark> 标签。

注释：Internet Explorer 8 以及更早的版本不支持 <mark> 标签。

定义和用法

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

4、浏览器在一次HTTP请求中，需要传输一个4097字节的文本数据至服务器，可以采用哪些方式？

a.存入indexdDB
b.存入COOKIE
c.放在URL参数
d.写入Session
e.使用post
f.放在Local Storage

分析：

5、下面哪个不是CSS中表示尺寸的单位？

a.px、%
b.em、rem
c.mm、ck
d.pt、pc

分析：c

6、请在____处填写答案，从而达到题目的要求

var arr = [1, 2, 3, 4, 5];
var result = arr.sort(_______________________________).join("+");
console.log(result);

分析：

题目要求？

7、把一个字面量对象，变成某个类的实例

function Type() {}
var a = {};
______________
// a instanceof Type === true

分析：重复

8、补充下面的函数，判断p为Array

function isArray(p){
return Object.prototype._____.apply(p)==='_____';

}

分析：

获得对象类属性的方法：

Object.prototype.toString()

故：

function isArray(p){
return Object.prototype.toString.apply(p) === '[object Array]';

}

9、请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。

分析：重复

10、实现一个程序，输入为一段英文文本，示例如下：

Alibaba Group Holding Limited is a Chinese e-commerce company that provides consumer-to-consumer, business-to-consumer and business-to-business sales services via web portals. It also provides electronic payment services, a shopping search engine and data-centric cloud computing services. The group began in 1999 when Jack Ma founded the website Alibaba.com, a business-to-business portal to connect Chinese manufacturers with overseas buyers. In 2012, two of Alibaba’s portals handled 1.1 trillion yuan ($170 billion) in sales.

统计这段文本中单词的出现频率、分布区间，要求如下：

1. 仅统计英文单词，1999 $170 1.1 标点符号之类的不算做单词

2. 区间分 4个：少（出现1-5次）、 中（出现6-10次）、高（出现 11－20），极高（出现 >20 次） ，给出每个区间单词数目在总单词数中的百分比

3. 返回如下的 JSON 对象：

{
　　'occurrence': [/** 数据元素的第一个元素为单词，第二个位出现次数**/
　　['alibaba', 10],
　　['consumer', 10],
　　['business', 8],......
],
'distribution': {
　　'high': '30%',
　　'low': '20%',
　　'medium': '40%',
　　'veryHeigh': '10%',
}
}

分析：

function func() {
//这个方法，只用了一个for循环，没有用多重循环。利用最少的时间和空间。
var str = "Alibaba Group Holding Limited is a Chinese e-commerce company that provides consumer-to-consumer, business-to-consumer and business-to-business sales services via web portals. It also provides electronic payment services, a shopping search engine and data-centric cloud computing services. The group began in 1999 when Jack Ma founded the website Alibaba.com, a business-to-business portal to connect Chinese manufacturers with overseas buyers. In 2012, two of Alibaba’s portals handled 1.1 trillion yuan ($170 billion) in sales.";

var wordsPool = str.split(' ');
var isWord = /^([a-z]|-)+$/img;
var strTotalLength = str.length;
var data = {
'occurrence': [],
'distribution': {
'low': 0,
'medium': 0,
'high': 0,
'veryHeigh': 0
}
};
var calc = function () {
var total= (data.occurrence.length / 100);
for(var n in data.distribution){
data.distribution
/=total;
data.distribution
+='%';
}
};
for (var i = 0, word, wordLength, count; i < wordsPool.length; i++) {
word = wordsPool[i];
if (isWord.test(word)) {
wordLength = word.length;
count = (strTotalLength - str.replace(new RegExp(word, 'g'), '').length) / wordLength;
if (count < 6) {
data.distribution.low += 1;
} else if (count < 11) {
data.distribution.medium += 1;
} else if (count < 20) {
data.distribution.high += 1;
} else {
data.distribution.veryHeigh += 1;
}
data.occurrence.push([word, count]);
}
if (i == wordsPool.length - 1) {
calc();
}
}
data.occurrence = data.occurrence.sort(function (a, b) {
return a[1] > b[1]
});
return data;
}
func();

分析（更新中.......）