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[n]/=total; data.distribution[n]+='%'; } }; 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();
分析（更新中.......）