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[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();

 

 

---

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