1、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
（1）、 宣告位於文件中的最前面，處於 標籤之前。告知瀏覽器的解析器，用什麼文件型別 規範來解析這個文件。
（2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支援的最高標準執行。
（3）、在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）、DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。

2、行內元素有哪些？塊級元素有哪些？
（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、link 和@import 的區別是？
（1）link屬於XHTML標籤，而@import是CSS提供的;
（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
（3）import只在IE5以上才能識別，而link是XHTML標籤，無相容問題;
（4）link方式的樣式的權重 高於@import的權重.

4、瀏覽器的核心分別是什麼?
IE瀏覽器的核心Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera核心原為Presto，現為Blink；

5、HTML5有哪些新特性？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
繪畫 canvas 用於媒介回放的 video 和 audio 元素 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失； sessionStorage 的資料在瀏覽器關閉後自動刪除 語意化更好的內容元素，比如 article、footer、header、nav、section 表單控制元件，calendar、date、time、email、url、search 新的技術webworker, websockt, Geolocation

6、對語義化如何理解？
用正確的標籤做正確的事情！
HTML語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；在沒有樣式CCS情況下也以一種文件格式顯示，並且是容易閱讀的。搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

7、HTML5的離線儲存有幾種方式？

localStorage長期儲存資料，瀏覽器關閉後資料不丟失；sessionStorage 資料在瀏覽器關閉後自動刪除。

8、iframe有那些缺點？

iframe會阻塞主頁面的Onload事件；
iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe新增src屬性值，這樣可以可以繞開以上兩個問題。

9、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie在瀏覽器和伺服器間來回傳遞。 sessionStorage和localStorage不會sessionStorage和localStorage的儲存空間更大；sessionStorage和localStorage有更多豐富易用的介面；sessionStorage和localStorage各自獨立的儲存空間；

10、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”]）

可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;
優先順序就近原則，同權重情況下樣式定義最近者為準;
載入樣式以最後載入的定位為準;
優先順序為:
!important > id > class > tag important 比 內聯優先順序高

11、CSS3新增偽類舉例：
p:first-of-type 選擇屬於其父元素的首個元素的每個元素。
p:last-of-type 選擇屬於其父元素的最後元素的每個元素。
p:only-of-type 選擇屬於其父元素唯一的元素的每個元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個元素。
:enabled :disabled 控制表單控制元件的禁用態。
:checked單選框或複選框被選中。

12、如何居中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%;}

列出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 屬性的值。

13、為什麼要初始化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; }

14、css定義的權重
以下是權重的規則：標籤的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：/權重為1/div{}/權重為10/.class1{}/權重為100/#id1{}/權重為100+1=101/#id1 div{}/權重為10+1=11/.class1 div{}/權重為10+10+1=21/.class1 .class2 div{} 如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現

15、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

16、介紹一下CSS的盒子模型？
　　（1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

17.對WEB標準以及W3C的理解與認識？
標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外鏈css和js指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件，容易維護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性;

18.XHTML和HTML有什麼區別？
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言最主要的不同：
XHTML 元素必須被正確地巢狀。
XHTML 元素必須被關閉。標籤名必須用小寫字母。
XHTML 文件必須擁有根元素。

19.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於宣告文件使用那種規範(HTML/XHTML)一般為 嚴格 過度 基於框架的html文件
加入XMl宣告可觸發，解析方式更改為IE5.5 擁有IE5.5的bug

20.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding

21.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 匯入
區別 ：同時載入前者無相容性，後者CSS2.1以下瀏覽器不支援
Link 支援使用javascript改變樣式，後者不可

22.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先順序高

23.前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層 HTML 表示層 CSS 行為層 js

24.CSS的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}

25.你做的頁面在哪些流覽器測試過?這些瀏覽器的核心分別是什麼?
Ie(Ie核心) 火狐(Gecko) 谷歌(webkit) opear(Presto)

26.寫出幾種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)
9.ie 6 不支援!important

27.img標籤上title與alt屬性的區別是什麼?

Alt 當圖片不顯示是 用文字代表。
Title 為該屬性提供資訊

28.描述css reset的作用和用途。
Reset重置瀏覽器的css預設屬性 瀏覽器的品種不同，樣式不同，然後重置，讓他們統一

29.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量

30.瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什麼模式

31.你如何對網站的檔案和資源進行優化?期待的解決方案包括：
檔案合併
檔案最小化/檔案壓縮
使用CDN託管
快取的使用

32.什麼是語義化的HTML?
直觀的認識標籤 對於搜尋引擎的抓取有好處

33.清除浮動的幾種方式，各自的優缺點
1.使用空標籤清除浮動 clear:both(理論上能清楚任何標籤，增加無意義的標籤)
2.使用overflow:auto(空標籤元素清除浮動而不得不增加無意程式碼的弊端,使用zoom:1用於相容IE)
3.是用afert偽元素清除浮動(用於非IE瀏覽器)

34.javascript的typeof返回哪些資料型別

Object number function boolean underfind

35.例舉3種強制型別轉換和2種隱式型別轉換?
強制（parseInt,parseFloat,number）
隱式（== – ===）

36.split() join() 的區別
前者是切割成陣列的形式，後者是將陣列轉換成字串

37.陣列方法pop() push() unshift() shift()
Push()尾部新增 pop()尾部刪除
Unshift()頭部新增 shift()頭部刪除

38.事件繫結和普通事件有什麼區別

39.IE和DOM事件流的區別
1.執行順序不一樣、
2.引數不一樣
3.事件加不加on
4.this指向問題

40.IE和標準下有哪些相容性的寫法

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

41.ajax請求的時候get 和post方式的區別

一個在url後面 一個放在虛擬載體裡面
有大小限制
安全問題
應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的

42.call和apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

43.ajax請求時，如何解釋json資料
使用eval parse 鑑於安全性考慮 使用parse更靠譜

44.閉包是什麼，有什麼特性，對頁面有什麼影響
閉包就是能夠讀取其他函式內部變數的函式。

45.如何阻止事件冒泡和預設事件
canceBubble return false

46.新增 刪除 替換 插入到某個接點的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

47.解釋jsonp的原理，以及為什麼不是真正的ajax
動態建立script標籤，回撥函式
Ajax是頁面無重新整理請求資料操作

48.javascript的本地物件，內建物件和宿主物件

本地物件為array obj regexp等可以new例項化
內建物件為gload Math 等不可以例項化的
宿主為瀏覽器自帶的document,window 等

49.document load 和document ready的區別
Document.onload 是在結構和樣式載入完才執行js
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

50.””和“=”的不同

前者會自動轉換型別
後者不會

51.javascript的同源策略

一段指令碼只能讀取來自於同一來源的視窗和文件的屬性，這裡的同一來源指的是主機名、協議和埠號的組合

52.編寫一個數組去重的方法

function oSort(arr)
　　{
　　var result ={};
　　var newArr=[];
　　for(var i=0;i<arr.length;i++)
　　{
　　if(!result[arr])
　　{
　　newArr.push(arr)
　　result[arr]=1
　　}
　　}
　　return newArr
　　}
</arr.length;i++)

53.你認為最常遇到的相容Bug有哪些?有哪些問題是你認為解決起來最麻煩的?
IE6 PNG
IE6 Fixed

54.CSS定位方式有哪些?position屬性的值有哪些?他們之間的區別是什麼?
在CSS中關於定位的內容是：position:relative | absolute | static | fixed
static 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。
relative 不脫離文件流，參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。
absolute 脫離文件流，通過 top,bottom,left,right 定位。選53D6其最近的父級定位元素，當父級 position 為 static 時，absolute元素將以body座標原點進行定位，可以通過z-index進行層次分級。
fixed 固定定位，這裡他所固定的對像是可視視窗而並非是body或是父級元素。可通過z-index進行層次分級。

55.函式的幾種定義方法？

function a(){},
var a = function(){}

56.物件的定義方法？

a = new Object(), a = {}

57.類的定義方法（prototype）（繼承）

Var a = function(){}
a.prototype = {}
new a();

58.this 關鍵字的指向
obj.foo() == obj //方法呼叫模式,this指向obj
foo() == window; //函式呼叫模式,this指向window
new obj.foo() == obj //構造器呼叫模式, this指向新建立物件
foo.call(obj) == obj;//APPLY呼叫模式,this指向obj

59.非同步ajax的優缺點都有什麼？
優點：
相對於同步ajax：不會造成UI卡死，使用者體驗好。
相對於重新整理頁面，省流量
缺點：
後退按鈕無效；
多個請求同時觸發時，由於回撥時間不確定，會造成混亂，避免這種混亂需要複雜的判斷機制。
搜尋引擎不友好
資料安全

60、介紹js的基本資料型別。
number,string,boolean,object,undefined
　　
61、Javascript如何實現繼承？
通過原型和構造器

62、如何建立一個物件? （畫出此物件的記憶體圖）

function Person(name, age) { this.name = name; this.age = age; this.sing = function() { alert(this.name) } }
　
63、談談This物件的理解。
this是js的一個關鍵字，隨著函式使用場合不同，this的值會發生變化。但是有一個總原則，那就是this指的是呼叫函式的那個物件。this一般情況下：是全域性物件Global。 作為方法呼叫，那麼this就是指這個物件

64、事件是什麼？IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
（1） 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點選一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。
（2） 事件處理機制：IE是事件冒泡、火狐是 事件捕獲；
（3） ev.stopPropagation();

65、如何判斷一個物件是否屬於某個類？
使用instanceof （待完善） if(a instanceof Person){ alert(‘yes’); }

66、Javascript中，有一個函式，執行時物件查詢時，永遠不會去查詢原型，這個函式是？
hasOwnProperty

67、對JSON 的瞭解？
　　JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。它是基於JavaScript的一個子集。資料格式簡單, 易於讀寫, 佔用頻寬小{‘age’:‘12’, ‘name’:‘back’}

68、簡述一下src與href的區別
href 是指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的連結，用於超連結。
src是指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文件內，例如js指令碼，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是為什麼將js指令碼放在底部而不是頭部。

69、簡述同步和非同步的區別

同步是阻塞模式，非同步是非阻塞模式。
同步就是指一個程序在執行某個請求的時候，若該請求需要一段時間才能返回資訊，那麼這個程序將會一直等待下去，直到收到返回資訊才繼續執行下去；
非同步是指程序不需要一直等下去，而是繼續執行下面的操作，不管其他程序的狀態。當有訊息返回時系統會通知程序進行處理，這樣可以提高執行的效率。

70、px和em的區別
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字型大小。
瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

71、什麼叫優雅降級和漸進增強？
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。
優雅降級 graceful degradation：
一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。
區別：
a. 優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給
b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要
c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶

72、瀏覽器的核心分別是什麼?
IE: trident核心
Firefox：gecko核心
Safari：webkit核心
Opera：以前是presto核心，Opera現已改用Google Chrome的Blink核心
Chrome：Blink(基於webkit，Google與Opera Software共同開發)

73、如何消除一個數組裡面重復的元素？

// 方法一：

var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
    if(arr2.indexOf(arr1[i]) < 0){
        arr2.push(arr1[i]);
    }
}
document.write(arr2); // 1,2,3,4,5,6

74、在Javascript中什麼是偽陣列？如何將偽陣列轉化為標準陣列？
偽陣列（類陣列）：無法直接呼叫陣列方法或期望length屬性有什麼特殊的行為，但仍可以對真正陣列遍歷方法來遍歷它們。典型的是函式的argument引數，還有像呼叫getElementsByTagName,document.childNodes之類的,它們都返回NodeList物件都屬於偽陣列。可以使用Array.prototype.slice.call(fakeArray)將陣列轉化為真正的Array物件。
function log(){
var args = Array.prototype.slice.call(arguments);
//為了使用unshift陣列方法，將argument轉化為真正的陣列
args.unshift(’(app)’);

  console.log.apply(console, args);

};

75、Javascript中callee和caller的作用？
caller是返回一個對函式的引用，該函式呼叫了當前函式；
callee是返回正在被執行的function函式，也就是所指定的function物件的正文。

76、請描述一下cookies，sessionStorage和localStorage的區別
sessionStorage用於本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。因此sessionStorage不是一種持久化的本地儲存，僅僅是會話級別的儲存。而localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。
web storage和cookie的區別
Web Storage的概念和cookie相似，區別是它是為了更大容量儲存設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了頻寬，另外cookie還需要指定作用域，不可以跨域呼叫。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與伺服器進行互動，作為HTTP規範的一部分而存在 ，而Web Storage僅僅是為了在本地“儲存”資料而生。

77、手寫陣列快速排序

關於快排演算法的詳細說明，可以參考阮一峰老師的文章快速排序
“快速排序”的思想很簡單，整個排序過程只需要三步：
（1）在資料集之中，選擇一個元素作為”基準”（pivot）。
（2）所有小於”基準”的元素，都移到”基準”的左邊；所有大於”基準”的元素，都移到”基準”的右邊。
（3）對”基準”左邊和右邊的兩個子集，不斷重複第一步和第二步，直到所有子集只剩下一個元素為止。

78、統計字串”aaaabbbccccddfgh”中字母個數或統計最多字母數。

var str = "aaaabbbccccddfgh";
var obj  = {};
for(var i=0;istr.length;i++){
    var v = str.charAt(i);
    if(obj[v] & obj[v].value == v){
        obj[v].count = ++ obj[v].count;
    }else{
        obj[v] = {};
        obj[v].count = 1;
        obj[v].value = v;
    }
}
for(key in obj){
    document.write(obj[key].value +'='+obj[key].count+' '); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 
}

79、一次完整的HTTP事務是怎樣的一個過程？

基本流程：

a. 域名解析

b. 發起TCP的3次握手

c. 建立TCP連線後發起http請求

d. 伺服器端響應http請求，瀏覽器得到html程式碼

e. 瀏覽器解析html程式碼，並請求html程式碼中的資源

f. 瀏覽器對頁面進行渲染呈現給使用者

80、對前端工程師這個職位你是怎麼樣理解的？

a. 前端是最貼近使用者的程式設計師，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

b. 參與專案，快速高質量完成實現效果圖，精確到1px；

c. 與團隊成員，UI設計，產品經理的溝通；

d. 做好的頁面結構，頁面重構和使用者體驗；

e. 處理hack，相容、寫出優美的程式碼格式；

f. 針對伺服器的優化、擁抱最新前端技術。
歡迎討論