前端面試筆試知識彙總2（含答案）

另外兩篇文章的鏈接以下：

前端面試筆試知識彙總1（含答案）；

前端面試筆試知識彙總3（含答案）；

 

結合個人秋招面經來看，效果更佳：2017年秋季校招前端面經（百度，騰訊，網易，華爲，樂視等）

以及各個公司校招筆試題回憶錄：各個公司前端筆試題回顧

 

2一、垃圾回收的兩種方法

標記清除：進入環境標記，離開環境，標記爲離開

在引用計數中，每個對象負責維護對象全部引用的計數值。當一個新的引用指向對象時，引用計數器就遞增，當去掉一個引用時，引用計數就遞減。當引用計數到零時，該對象就將釋放佔有的資源。

2二、判斷類型的方法：

 

 

 

 

2三、正則和字符串

 

 

2四、Prototype，construtor

Parent.prototype指向了原型對象，而Parent.prototype.construtor又指回了Parent；Parent的每一 個實例都包含一個內部屬性__proto__，該屬性指向Parent.prototype。實例雖然不包含方法和屬性，但卻能夠經過查找得到。

2五、鏈式調用

 

2六、事件委託

優勢：經過上面的介紹，你們應該可以體會到使用事件委託對於web應用程序帶來的幾個優勢：

1.能夠大量節省內存佔用，減小事件註冊。

2.能夠方便地動態添加和修改元素，不須要由於元素的改動而修改事件綁定

3.JavaScript和DOM節點之間的關聯變少了，這樣也就減小了因循環引用而帶來的內存泄漏發生的機率。

缺點：不是全部的事件都能冒泡的。blur、focus、load和unload不能像其它事件同樣冒泡。事實上blur和focus能夠用事件捕獲而非事件冒泡的方法得到（在IE以外的其它瀏覽器中）。

在管理鼠標事件的時候有些須要注意的地方。若是你的代碼處理mousemove事件的話你趕上性能瓶頸的風險可就大了，由於mousemove事件觸發很是頻繁。而mouseout則由於其怪異的表現而變得很難用事件代理來管理。

2七、經常使用的正則總結

驗證數字：^[0-9]*$

驗證n位的數字：^\d{n}$

驗證至少n位數字：^\d{n,}$

驗證m-n位的數字：^\d{m,n}$

驗證零和非零開頭的數字：^(0|[1-9][0-9]*)$

驗證有兩位小數的正實數：^[0-9]+(.[0-9]{2})?$

驗證有1-3位小數的正實數：^[0-9]+(.[0-9]{1,3})?$

驗證非零的正整數：^\+?[1-9][0-9]*$

驗證非零的負整數：^\-[1-9][0-9]*$

驗證非負整數（正整數 + 0）  ^\d+$

驗證非正整數（負整數 + 0）  ^((-\d+)|(0+))$

驗證長度爲3的字符：^.{3}$

驗證由26個英文字母組成的字符串：^[A-Za-z]+$

驗證由26個大寫英文字母組成的字符串：^[A-Z]+$

驗證由26個小寫英文字母組成的字符串：^[a-z]+$

驗證由數字和26個英文字母組成的字符串：^[A-Za-z0-9]+$

驗證由數字、26個英文字母或者下劃線組成的字符串：^\w+$

驗證用戶密碼:^[a-zA-Z]\w{5,17}$ 正確格式爲：以字母開頭，長度在6-18之間，只能包含字符、數字和下劃線。

驗證是否含有 ^%&',;=?$\" 等字符：[^%&',;=?$\x22]+

驗證漢字：^[\u4e00-\u9fa5],{0,}$

驗證Email地址：^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

驗證InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$

驗證電話號碼：^(\d3,4|\d{3,4}-)?\d{7,8}$：--正確格式爲：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。

驗證身份證號（15位或18位數字）：^\d{15}|\d{}18$

驗證一年的12個月：^(0?[1-9]|1[0-2])$ 正確格式爲：「01」-「09」和「1」「12」

驗證一個月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$    正確格式爲：0一、09和一、31。

整數：^-?\d+$

非負浮點數（正浮點數 + 0）：^\d+(\.\d+)?$

正浮點數   ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

非正浮點數（負浮點數 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$

負浮點數  ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

浮點數  ^(-?\d+)(\.\d+)?$

2八、CDN

CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。經過在網絡各處放置節點服務器所構成的在現有的互聯網基礎之上的一層智能虛擬網絡，CDN系統可以實時地根據網絡流量和各節點的鏈接、負載情況以及到用戶的距離和響應時間等綜合信息將用戶的請求從新導向離用戶最近的服務節點上。其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的情況，提升用戶訪問網站的響應速度。

2九、CSS hack

因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、 解析不同，致使在不一樣瀏覽器的環境中呈現出不一致的頁面展示效果。這時，咱們爲了得到統一的頁面效果，就須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS 樣式，咱們把這個針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程，叫作CSS hack!

CSS hack的原理

因爲不一樣的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不同，以及CSS優先級對瀏覽器展示效果的影響，咱們能夠據此針對不一樣的瀏覽器情景來應用不一樣的CSS。

CSS hack分類

CSS Hack大體有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不一樣版本之間的表現差別而引入的。

• 屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。
• 選擇器前綴法(即選擇器Hack)：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
• IE條件註釋法(即HTML條件註釋Hack)： 針對全部IE(注：IE10+已經再也不支持條件註釋)： <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->，針對IE6及如下版本： <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。

CSS hack利弊

通常狀況下，咱們儘可能避免使用CSS hack，可是有些狀況爲了顧及用戶體驗實現向下兼容，不得已才使用hack。好比因爲IE8及如下版本不支持CSS3,而咱們的項目頁面使用了大量 CSS3新屬性在IE9/Firefox/Chrome下正常渲染，這種狀況下若是不使用css3pie或htc或條件註釋等方法時,可能就得讓IE8- 的專屬hack出馬了。使用hack雖然對頁面表現的一致性有好處，但過多的濫用會形成html文檔混亂不堪，增長管理和維護的負擔。相信只要你們一塊兒努力，少用、慎用hack，將來必定會促使瀏覽器廠商的標準愈來愈趨於統一，順利過渡到標準瀏覽器的主流時代。拋棄那些陳舊的IE hack，必將減輕咱們編碼的複雜度，少作無用功。

30、@import和link之間的區別

二者都是外部引用CSS的方式，可是存在必定的區別：

• 老祖宗的差異。link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。
• 加載順序的差異。link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
• 兼容性的差異。link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
• 使用dom控制樣式時的差異。link支持使用Javascript控制DOM去改變樣式；而@import不支持。

@import url(style.css) 和@import url("style.css")是最優的選擇，兼容的瀏覽器最多。

3一、web頁面重構怎麼操做？

頁面重構就是根據原有頁面內容和結構的基礎上，經過div+css寫出符合web標準的頁面結構。

具體實現要達到如下三點：

• 結構完整，可經過標準驗證
• 標籤語義化，結構合理
• 充分考慮到頁面在站點中的「做用和重要性」，並對其進行有針對性的優化

3二、HTML5的離線儲存

使用 HTML5，經過建立 cache manifest 文件，能夠輕鬆地建立 web 應用的離線版本。

HTML5引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。 應用程序緩存爲應用帶來三個優點：

• 離線瀏覽 – 用戶可在應用離線時使用它們
• 速度 – 已緩存資源加載得更快
• 減小服務器負載 – 瀏覽器將只從服務器下載更新過或更改過的資源。

3三、跨域資源共享 CORS 詳解

是一個W3C標準，全部瀏覽器都支持該功能，IE瀏覽器不能低於IE10。須要瀏覽器和服務器同時支持。整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。

瀏覽器將CORS請求分紅兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。只要同時知足如下兩大條件，就屬於簡單請求。

（1) 請求方法是如下三種方法之一：HEAD，GET，POST

（2）HTTP的頭信息不超出如下幾種字段：Accept；Accept-Language；Content-Language；Last-Event-ID；Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain；

凡是不一樣時知足上面兩個條件，就屬於非簡單請求。

簡單請求

對於簡單請求，瀏覽器直接發出CORS請求。具體來講，就是在頭信息之中，增長一個Origin字段。下面是一個例子，瀏覽器發現此次跨源AJAX請求是簡單請求，就自動在頭信息之中，添加一個Origin字段。

GET /cors HTTP/1.1；Origin: http://api.bob.com；Host: api.alice.com；

Accept-Language: en-US；Connection: keep-alive；User-Agent: Mozilla/5.0...

上面的頭信息中，Origin字段用來講明，本次請求來自哪一個源（協議 + 域名 + 端口）。服務器根據這個值，決定是否贊成此次請求。

非簡單請求

非簡單請求是那種對服務器有特殊要求的請求，好比請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。非簡單請求的CORS請求，會在正式通訊以前，增長一次HTTP查詢請求，稱爲"預檢"請求（preflight）。

瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可使用哪些HTTP動詞和頭信息字段。只有獲得確定答覆，瀏覽器纔會發出正式的XMLHttpRequest請求，不然就報錯。下面是一段瀏覽器的JavaScript腳本。

var url = 'http://api.alice.com/cors';

var xhr = new XMLHttpRequest();

xhr.open('PUT', url, true);

xhr.setRequestHeader('X-Custom-Header', 'value');

xhr.send();

上面代碼中，HTTP請求的方法是PUT，而且發送一個自定義頭信息X-Custom-Header。

瀏覽器發現，這是一個非簡單請求，就自動發出一個"預檢"請求，要求服務器確承認以這樣請求。下面是這個"預檢"請求的HTTP頭信息。

OPTIONS /cors HTTP/1.1

Origin: http://api.bob.com；      Access-Control-Request-Method: PUT

Access-Control-Request-Headers: X-Custom-Header

Host: api.alice.com；             Accept-Language: en-US

Connection: keep-alive；          User-Agent: Mozilla/5.0...

"預檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭信息裏面，關鍵字段是Origin，表示請求來自哪一個源。

一旦服務器經過了"預檢"請求，之後每次瀏覽器正常的CORS請求，就都跟簡單請求同樣，會有一個Origin頭信息字段。服務器的迴應，也都會有一個Access-Control-Allow-Origin頭信息字段。

CORS與JSONP的使用目的相同，可是比JSONP更強大。

JSONP只支持GET請求，CORS支持全部類型的HTTP請求。JSONP的優點在於支持老式瀏覽器，以及能夠向不支持CORS的網站請求數據。

3四、Localstrage

判斷瀏覽器是否支持

 

localStorage和sessionStorage都具備相同的操做方法，例如setItem、getItem和removeItem等。

 

其餘操做方法：點操做和[]

web Storage不但能夠用自身的setItem,getItem等方便存取，也能夠像普通對象同樣用點(.)操做符，及[]的方式進行數據存儲。

 

localStorage和sessionStorage的key和length屬性實現遍歷

storage事件

storage還提供了storage事件，當鍵值改變或者clear的時候，就能夠觸發storage事件，以下面的代碼就添加了一個storage事件改變的監聽：

 

3五、Post  Get

在客戶機和服務器之間進行請求-響應時，兩種最常被用到的方法是：GET 和 POST。

GET - 從指定的資源請求數據；POST - 向指定的資源提交要被處理的數據

GET 方法

請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的：

/test/demo_form.asp?name1=value1&name2=value2；

POST 方法

請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的：

POST /test/demo_form.asp HTTP/1.1；    

Host: w3schools.com；             name1=value1&name2=value2；

比較 GET 與 POST

下面的表格比較了兩種 HTTP 方法：GET 和 POST。

	GET	POST
後退按鈕/刷新	無害	數據會被從新提交（瀏覽器應該告知用戶數據會被從新提交）。
書籤	可收藏爲書籤	不可收藏爲書籤
緩存	能被緩存	不能緩存
編碼類型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。爲二進制數據使用多重編碼。
歷史	參數保留在瀏覽器歷史中。	參數不會保存在瀏覽器歷史中。
對數據長度的限制	是的。當發送數據時，GET 方法向 URL 添加數據；URL 的長度是受限制的（URL 的最大長度是 2048 個字符）。	無限制。
對數據類型的限制	只容許 ASCII 字符。	沒有限制。也容許二進制數據。
安全性	與 POST 相比，GET 的安全性較差，由於所發送的數據是 URL 的一部分。在發送密碼或其餘敏感信息時毫不要使用 GET ！	POST 比 GET 更安全，由於參數不會被保存在瀏覽器歷史或 web 服務器日誌中。
可見性	數據在 URL 中對全部人都是可見的。	數據不會顯示在 URL 中。

 

其餘 HTTP 請求方法

下面的表格列出了其餘一些 HTTP 請求方法：

方法	描述
HEAD	與 GET 相同，但只返回 HTTP 報頭，不返回文檔主體。
PUT	上傳指定的 URI 表示。
DELETE	刪除指定資源。
OPTIONS	返回服務器支持的 HTTP 方法。
CONNECT	把請求鏈接轉換到透明的 TCP/IP 通道。

3六、Cookie、sessionStorage 和 localStrorage

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，能夠方便的在web請求之間保存數據。有了本地數據，就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。

sessionStorage 、localStorage 和 cookie 之間的區別：

共同點：都是保存在瀏覽器端，且同源的。

區別：cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。

sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。Web Storage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。

userdata，只有ie支持，單個容量64kb，每一個域名最多可存10個共計640k數據。默認保存在C:\Documents and Settings\Administrator\UserData\目錄下，保存格式爲xml。關於userdata更多資料參考

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/reference/behaviors/userdata.asp

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

爲何選擇Web Storage而不是Cookie？

與Cookie相比，Web Storage存在很多的優點，歸納爲如下幾點：

1. 存儲空間更大：IE8下每一個獨立的存儲空間爲10M，其餘瀏覽器實現略有不一樣，但都比Cookie要大不少。

2. 存儲內容不會發送到服務器：當設置了Cookie後，Cookie的內容會隨着請求一併發送的服務器，這對於本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。

3. 更多豐富易用的接口：Web Storage提供了一套更爲豐富的接口，使得數據操做更爲簡便。

4. 獨立的存儲空間：每一個域（包括子域）有獨立的存儲空間，各個存儲空間是徹底獨立的，所以不會形成數據混亂。

3七、html5（websocket等）

1. 新的Doctype ：儘管使用<!DOCTYPE html>，即便瀏覽器不懂這句話也會按照標準模式去渲染

2. Figure元素

用<figure>和<figcaption>來語義化地表示帶標題的圖片

 

3. 從新定義的<small>

<small>已經被從新定義了，如今被用來表示小的排版，如網站底部的版權聲明

4. 去掉link和script標籤裏面的type屬性

5. 加/不加 括號 ：HTML5沒有嚴格的要求屬性必須加引號，閉合不閉合，可是建議加上引號和閉合標籤

6. 讓你的內容可編輯，只須要加一個contenteditable屬性

7. Email Inputs ：若是咱們給Input的type設置爲email，瀏覽器就會驗證這個輸入是不是email類型，固然不能只依賴前端的校驗，後端也得有相應的校驗

8. Placeholders ：這個input屬性的意義就是沒必要經過javascript來作placeholder的效果了

9. Local Storage ：使用Local Storage能夠永久存儲大的數據片斷在客戶端（除非主動刪除），目前大部分瀏覽器已經支持，在使用以前能夠檢測一下window.localStorage是否存在

10. 語義化的header和footer

11. 更多的HTML5表單特性

12. IE和HTML5 ：默認的，HTML5新元素被以inline的方式渲染，不過能夠經過下面這種方式讓 其以block方式渲染

header, footer, article, section, nav, menu, hgroup {

    display: block;

}

不幸的是IE會忽略這些樣式，能夠像下面這樣fix:

 

13. hgroup ：通常在header裏面用來將一組標題組合在一塊兒，如

<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>

14. Required屬性：required屬性定義了一個input是不是必須的，你能夠像下面這樣聲明

<input type=」text」 name=」someInput」 required>

或者

<input type=」text」 name=」someInput」 required=」required」>

15. Autofocus屬性：正如它的詞義，就是聚焦到輸入框裏面

<input type=」text」 name=」someInput」 placeholder=」Douglas Quaid」 required autofocus>

16. Audio支持：HTML5提供了<audio>標籤，你不須要再按照第三方插件來渲染音頻，大多數現代瀏覽器提供了對於HTML5 Audio的支持，不過目前仍舊須要提供一些兼容處理，如

<audio autoplay=」autoplay」 controls=」controls」>
<source src=」file.ogg」 /><!–FF–>
<source src=」file.mp3″ /><!–Webkit–>
<a href=」file.mp3″>Download this file.</a>
</audio>

17. Video支持：和 Audio很像，<video>標籤提供了對於video的支持，因爲HTML5文檔並無給video指定一個特定的編碼，因此瀏 覽器去決定要支持哪些編碼，致使了不少不一致。Safari和IE支持H.264編碼的格式，Firefox和Opera支持Theora和Vorbis 編碼的格式，當使用HTML5 video的時候，你必須都提供：

18. 預加載視頻：preload屬性就像它的字面意思那麼簡單，你須要決定是否須要在頁面加載的時候去預加載視頻

<video preload>

19. 顯示視頻控制：<video preload controls>

20. 正則表達式：因爲pattern屬性，咱們能夠在你的markup裏面直接使用正則表達式了

21. 檢測屬性支持：除了Modernizr以外咱們還能夠經過javascript簡單地檢測一些屬性是否支持，如：

 

22. Mark元素：把<mark>元素看作是高亮的做用，當我選擇一段文字的時候，javascript對於HTML的markup效果應該是這樣的：

23. 何時用<div> ：HTML5已經引入了這麼多元素，那麼div咱們還要用嗎？div你能夠在沒有更好的元素的時候去用。

26. Data屬性

<div id=」myDiv」 data-custom-attr=」My Value」> Bla Bla </div>

CSS中使用：

27. Output元素：<output>元素用來顯示計算結果，也有一個和label同樣的for屬性

28. 用Range Input來建立滑塊：HTML5引用的range類型能夠建立滑塊，它接受min, max, step和value屬性

可使用css的:before和:after來顯示min和max的值

 

3八、form表單

action 屬性定義在提交表單時執行的動做。若是省略 action 屬性，則 action 會被設置爲當前頁面。若是要正確地被提交，每一個輸入字段必須設置一個 name 屬性。

本例只會提交 "Last name" 輸入字段：

實例

用 <fieldset> 組合表單數據

<fieldset> 元素組合表單中的相關數據

<legend> 元素爲 <fieldset> 元素定義標題。

實例

屬性	描述
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集）。
action	規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete	規定瀏覽器應該自動完成表單（默認：開啓）。
enctype	規定被提交數據的編碼（默認：url-encoded）。
method	規定在提交表單時所用的 HTTP 方法（默認：GET）。
name	規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate	規定瀏覽器不驗證表單。
target	規定 action 屬性中地址的目標（默認：_self）。

3九、input type 屬性

值	描述
button	定義可點擊的按鈕（大多與 JavaScript 使用來啓動腳本）
checkbox	定義複選框。
color	定義拾色器。
date	定義日期字段（帶有 calendar 控件）
datetime	定義日期字段（帶有 calendar 和 time 控件）
datetime-local	定義日期字段（帶有 calendar 和 time 控件）
month	定義日期字段的月（帶有 calendar 控件）
week	定義日期字段的周（帶有 calendar 控件）
time	定義日期字段的時、分、秒（帶有 time 控件）
email	定義用於 e-mail 地址的文本字段
file	定義輸入字段和 "瀏覽..." 按鈕，供文件上傳
hidden	定義隱藏輸入字段
image	定義圖像做爲提交按鈕
number	定義帶有 spinner 控件的數字字段
password	定義密碼字段。字段中的字符會被遮蔽。
radio	定義單選按鈕。
range	定義帶有 slider 控件的數字字段。
reset	定義重置按鈕。重置按鈕會將全部表單字段重置爲初始值。
search	定義用於搜索的文本字段。
submit	定義提交按鈕。提交按鈕向服務器發送數據。
tel	定義用於電話號碼的文本字段。
text	默認。定義單行輸入字段，用戶可在其中輸入文本。默認是 20 個字符。
url	定義用於 URL 的文本字段。

40、Label for屬性

for 屬性規定 label 與哪一個表單元素綁定。

隱式和顯式的聯繫：標記一般如下面兩種方式中的一種來和表單控件相聯繫：將表單控件做爲標記標籤的內容，這樣的就是隱式形式，或者爲 <label> 標籤下的 for 屬性命名一個目標表單 id，這樣就是顯式形式。

例如，在 XHTML 中：

第一個標記是以顯式形式將文本 "Social Security Number:" 和表單的社會安全號碼的文本輸入控件 ("SocSecNum") 聯繫起來，它的 for 屬性的值和控件的 id 同樣，都是 SSN。第二個標記 ("Date of Birth:") 不須要 for 屬性，它的相關控件也不須要 id 屬性，它們是經過在 <label> 標籤中放入 <input> 標籤來隱式地鏈接起來的。

4一、MVC模式

MVC全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設計典範，用一種業務邏輯、數據、界面顯示分離的方法組織代碼，將業務邏輯彙集到一個部件裏面，在改進和個性化定製界面及用戶交互的同時，不須要從新編寫業務邏輯。MVC被獨特的發展起來用於映射傳統的輸入、處理和輸出功能在一個邏輯的圖形化用戶界面的結構中。

MVC 模式同時提供了對 HTML、CSS 和 JavaScript 的徹底控制。

Model（模型）是應用程序中用於處理應用程序數據邏輯的部分。一般模型對象負責在數據庫中存取數據。

View（視圖）是應用程序中處理數據顯示的部分。一般視圖是依據模型數據建立的。

Controller（控制器）是應用程序中處理用戶交互的部分。一般控制器負責從視圖讀取數據，控制用戶輸入，並向模型發送數據。

MVC 分層有助於管理複雜的應用程序，由於您能夠在一個時間內專門關注一個方面。例如，您能夠在不依賴業務邏輯的狀況下專一於視圖設計。同時也讓應用程序的測試更加容易。

MVC 分層同時也簡化了分組開發。不一樣的開發人員可同時開發視圖、控制器邏輯和業務邏輯。

4二、Angular

一、優勢

模板功能強大豐富，而且是聲明式的，自帶了豐富的 Angular 指令；

是一個比較完善的前端MV*框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等全部功能

自定義 Directive，比 jQuery 插件還靈活，可是須要深刻了解 Directive 的一些特性，簡單的封裝容易，複雜一點官方沒有提供詳細的介紹文檔，咱們能夠經過閱讀源代碼來找到某些咱們須要的東西，如：在 directive 使用 $parse

ng模塊化比較大膽的引入了Java的一些東西（依賴注入），可以很容易的寫出可複用的代碼，對於敏捷開發的團隊來講很是有幫助，咱們的項目從上線到目前，UI變化很大，在摸索中迭代產品，可是js的代碼基本上不多改動

補充：Angular支持單元測試和e2e-testing

二、缺點

驗證功能錯誤信息顯示比較薄弱，須要寫不少模板標籤，沒有JQuery Validate方便，因此咱們本身封裝了驗證的錯誤信息提示，詳細參考 why520crazy/w5c-validator-angular · GitHub

ngView只能有一個，不能嵌套多個視圖，雖然有 angular-ui/ui-router · GitHub 解決，可是貌似ui-router 對於URL的控制不是很靈活，必須是嵌套式的（也許我沒有深刻了解或者新版本有改進）

對於特別複雜的應用場景，貌似性能有點問題，特別是在Windows下使用chrome瀏覽器，不知道是內存泄漏了仍是什麼其餘問題，沒有找到好的解決方案，奇怪的是在IE10下反而很快，對此還在觀察中

此次從1.0.X升級到1.2.X，貌似有比較大的調整，沒有完美兼容低版本，升級以後可能會致使一個兼容性的BUG，具體詳細信息參考官方文檔 AngularJS ，對應的中文版本：Angular 1.0到1.2 遷移指南

ng提倡在控制器裏面不要有操做DOM的代碼，對於一些JQuery 插件的使用，若是想不破壞代碼的整潔性，須要寫一些directive去封裝一下JQ插件，可是如今有不少插件的版本已經支持Angular了，如：jQuery File Upload Demo

Angular 太笨重了，沒有讓用戶選擇一個輕量級的版本，固然1.2.X後，Angular也在作一些更改，好比把route，animate等模塊獨立出去，讓用戶本身去選擇

4三、排序算法總結

 

4四、循環遍歷

一、For in

枚舉過程當中將會列出全部的屬性。因此中間能夠用hasOwnProperty，肯定對象是否有本身的屬性。

4五、定義不可修改屬性

4六、清除浮動

1、使用空標籤清除浮動

空標籤能夠是div標籤，也能夠是P標籤。也有不少人用<hr>，只是須要另外 爲其清除邊框，但理論上能夠是任何標籤。對於使用額外標籤清除浮動（閉合浮動元素），是W3C推薦的 作法。

這種方式是在須要清除浮動的父級元素內部的全部浮動元素後添加這樣一個標籤清除浮動，併爲其定義CSS代 碼：clear:both。此方法的弊端在於增長了無心義的結構元素。

 

二、使用overflow屬性。

此方法有效地解決了經過空標籤元素清除浮動而不得不增長無心代碼的弊端。使用該方法是隻需在須要清除浮動的元素中定義CSS屬性：overflow:auto，便可！」zoom:1″用於兼容IE6,也能夠用width:100%。

不過使用overflow的時候，可能會對頁面表現帶來影響，並且這種影響是不肯定的，你最好是能在多個瀏覽器上測試你的頁面；

 

3、使用after僞對象清除浮動。

 該方法只適用於非IE瀏覽器 。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置height:0，不然該元素會比實際高出若干像 素；2、content屬性是必須的，但其值能夠爲空，藍色理想討論該方法的時候content屬性的值設爲」.」，但我發現爲空亦是能夠的。

 

 

4七、瀏覽器內核

JavaScript引擎是SpiderMonkey。

一、Trident

內核的常見瀏覽器有IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；^[1]  360安全瀏覽器（1.0-5.0爲Trident，6.0爲Trident+Webkit，7.0爲Trident+Blink）獵豹極輕瀏覽器，360極速瀏覽器（7.5以前爲Trident+Webkit，7.5爲Trident+Blink）

二、Gecko

Gecko內核常見的瀏覽器：^[1]  Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位開源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon；

三、Presto

Presto(Opera前內核) (已廢棄)： Opera12.17及更早版本曾經採用的內核，現已中止開發並廢棄，該內核在2003年的Opera7中首次被使用，該款引擎的特色就是渲染速度的優化達到了極致，然而代價是犧牲了網頁的兼容性。

四、WebKit

WebKit內核常見的瀏覽器：傲遊瀏覽器三、^[1]  Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器，

五、Blink

Blink是一個由Google和Opera Software開發的瀏覽器排版引擎，Google計劃將這個渲染引擎做爲Chromium計劃的一部分，而且在2013年4月的時候公佈了這一消息。 這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，而且在Chrome（28及日後版本）、Opera（15及日後版本）和 Yandex瀏覽器中使用。