另外兩篇文章的連接如下：
結合我的秋招面經來看，效果更佳：2017年秋季校招前端面經（百度，騰訊，網易，華為，樂視等）
以及各個公司校招筆試題回憶錄：各個公司前端筆試題回顧
21、垃圾回收的兩種方法
標記清除：進入環境標記，離開環境，標記為離開
在引用計數中，每一個對象負責維護對象所有引用的計數值。當一個新的引用指向對象時，引用計數器就遞增，當去掉一個引用時，引用計數就遞減。當引用計數到零時，該對象就將釋放占有的資源。
22、判斷類型的方法：
23、正則和字符串
24、Prototype，construtor
Parent.prototype指向了原型對象，而Parent.prototype.construtor又指回了Parent；Parent的每一 個實例都包含一個內部屬性__proto__，該屬性指向Parent.prototype。實例雖然不包含方法和屬性，但卻可以通過查找獲得。
25、鏈式調用
26、事件委托
優點：通過上面的介紹，大家應該能夠體會到使用事件委托對於web應用程序帶來的幾個優點：
1.可以大量節省內存占用，減少事件注冊。
2.可以方便地動態添加和修改元素，不需要因為元素的改動而修改事件綁定
3.JavaScript和DOM節點之間的關聯變少了，這樣也就減少了因循環引用而帶來的內存泄漏發生的概率。
缺點：不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一樣冒泡。事實上blur和focus可以用事件捕獲而非事件冒泡的方法獲得（在IE之外的其它瀏覽器中）。
在管理鼠標事件的時候有些需要注意的地方。如果你的代碼處理mousemove事件的話你遇上性能瓶頸的風險可就大了，因為mousemove事件觸發非常頻繁。而mouseout則因為其怪異的表現而變得很難用事件代理來管理。
27、常用的正則總結
驗證數字：^[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)$ 正確格式為：01、09和1、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+)?$
28、CDN
CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。通過在網絡各處放置節點服務器所構成的在現有的互聯網基礎之上的一層智能虛擬網絡，CDN系統能夠實時地根據網絡流量和各節點的連接、負載狀況以及到用戶的距離和響應時間等綜合信息將用戶的請求重新導向離用戶最近的服務節點上。其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的狀況，提高用戶訪問網站的響應速度。
29、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")是最優的選擇，兼容的瀏覽器最多。
31、web頁面重構怎么操作？
頁面重構就是根據原有頁面內容和結構的基礎上，通過div+css寫出符合web標准的頁面結構。
具體實現要達到以下三點：
- 結構完整，可通過標准驗證
- 標簽語義化，結構合理
- 充分考慮到頁面在站點中的“作用和重要性”，並對其進行有針對性的優化
32、HTML5的離線儲存
使用 HTML5，通過創建 cache manifest 文件，可以輕松地創建 web 應用的離線版本。
HTML5引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網連接時進行訪問。 應用程序緩存為應用帶來三個優勢：
- 離線瀏覽 – 用戶可在應用離線時使用它們
- 速度 – 已緩存資源加載得更快
- 減少服務器負載 – 瀏覽器將只從服務器下載更新過或更改過的資源。
33、跨域資源共享 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的網站請求數據。
34、Localstrage
判斷瀏覽器是否支持
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等。
其他操作方法：點操作和[]
web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通對象一樣用點(.)操作符，及[]的方式進行數據存儲。
localStorage和sessionStorage的key和length屬性實現遍歷
storage事件
storage還提供了storage事件，當鍵值改變或者clear的時候，就可以觸發storage事件，如下面的代碼就添加了一個storage事件改變的監聽：
35、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 通道。 |
36、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更多資料參考
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
為什么選擇Web Storage而不是Cookie？
與Cookie相比，Web Storage存在不少的優勢，概括為以下幾點：
1. 存儲空間更大：IE8下每個獨立的存儲空間為10M，其他瀏覽器實現略有不同，但都比Cookie要大很多。
2. 存儲內容不會發送到服務器：當設置了Cookie后，Cookie的內容會隨着請求一並發送的服務器，這對於本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。
3. 更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，使得數據操作更為簡便。
4. 獨立的存儲空間：每個域（包括子域）有獨立的存儲空間，各個存儲空間是完全獨立的，因此不會造成數據混亂。
37、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的值
38、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）。 |
39、input type 屬性
| 值 |
描述 |
| button |
定義可點擊的按鈕（大多與 JavaScript 使用來啟動腳本） |
| checkbox |
定義復選框。 |
| color |
定義拾色器。 |
| date |
定義日期字段（帶有 calendar 控件） |
| datetime |
定義日期字段（帶有 calendar 和 time 控件） |
| datetime-local |
定義日期字段（帶有 calendar 和 time 控件） |
| month |
定義日期字段的月（帶有 calendar 控件） |
| week |
定義日期字段的周（帶有 calendar 控件） |
| time |
定義日期字段的時、分、秒（帶有 time 控件） |
| |
定義用於 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> 標簽來隱式地連接起來的。
41、MVC模式
MVC全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設計典范，用一種業務邏輯、數據、界面顯示分離的方法組織代碼，將業務邏輯聚集到一個部件里面，在改進和個性化定制界面及用戶交互的同時，不需要重新編寫業務邏輯。MVC被獨特的發展起來用於映射傳統的輸入、處理和輸出功能在一個邏輯的圖形化用戶界面的結構中。
MVC 模式同時提供了對 HTML、CSS 和 JavaScript 的完全控制。
Model（模型）是應用程序中用於處理應用程序數據邏輯的部分。通常模型對象負責在數據庫中存取數據。
View（視圖）是應用程序中處理數據顯示的部分。通常視圖是依據模型數據創建的。
Controller（控制器）是應用程序中處理用戶交互的部分。通常控制器負責從視圖讀取數據，控制用戶輸入，並向模型發送數據。
MVC 分層有助於管理復雜的應用程序，因為您可以在一個時間內專門關注一個方面。例如，您可以在不依賴業務邏輯的情況下專注於視圖設計。同時也讓應用程序的測試更加容易。
MVC 分層同時也簡化了分組開發。不同的開發人員可同時開發視圖、控制器邏輯和業務邏輯。
42、Angular
1、優點
模板功能強大豐富，並且是聲明式的，自帶了豐富的 Angular 指令；
是一個比較完善的前端MV*框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等所有功能
自定義 Directive，比 jQuery 插件還靈活，但是需要深入了解 Directive 的一些特性，簡單的封裝容易，復雜一點官方沒有提供詳細的介紹文檔，我們可以通過閱讀源代碼來找到某些我們需要的東西，如：在 directive 使用 $parse
ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對於敏捷開發的團隊來說非常有幫助，我們的項目從上線到目前，UI變化很大，在摸索中迭代產品，但是js的代碼基本上很少改動
補充：Angular支持單元測試和e2e-testing
2、缺點
驗證功能錯誤信息顯示比較薄弱，需要寫很多模板標簽，沒有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等模塊獨立出去，讓用戶自己去選擇
43、排序算法總結
44、循環遍歷
1、For in
枚舉過程中將會列出所有的屬性。所以中間可以用hasOwnProperty，確定對象是否有自己的屬性。
45、定義不可修改屬性
46、清除浮動
1、使用空標簽清除浮動
空標簽可以是div標簽，也可以是P標簽。也有很多人用<hr>，只是需要另外 為其清除邊框，但理論上可以是任何標簽。對於使用額外標簽清除浮動（閉合浮動元素），是W3C推薦的 做法。
這種方式是在需要清除浮動的父級元素內部的所有浮動元素后添加這樣一個標簽清除浮動，並為其定義CSS代 碼：clear:both。此方法的弊端在於增加了無意義的結構元素。
2、使用overflow屬性。
此方法有效地解決了通過空標簽元素清除浮動而不得不增加無意代碼的弊端。使用該方法是只需在需要清除浮動的元素中定義CSS屬性：overflow:auto，即可！”zoom:1″用於兼容IE6,也可以用width:100%。
不過使用overflow的時候，可能會對頁面表現帶來影響，而且這種影響是不確定的，你最好是能在多個瀏覽器上測試你的頁面；
3、使用after偽對象清除浮動。
該方法只適用於非IE瀏覽器 。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置height:0，否則該元素會比實際高出若干像 素；二、content屬性是必須的，但其值可以為空，藍色理想討論該方法的時候content屬性的值設為”.”，但我發現為空亦是可以的。
47、瀏覽器內核
JavaScript引擎是SpiderMonkey。
1、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）
2、Gecko
Gecko內核常見的瀏覽器：[1] Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位開源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon；
3、Presto
Presto(Opera前內核) (已廢棄)： Opera12.17及更早版本曾經采用的內核，現已停止開發並廢棄，該內核在2003年的Opera7中首次被使用，該款引擎的特點就是渲染速度的優化達到了極致，然而代價是犧牲了網頁的兼容性。
4、WebKit
WebKit內核常見的瀏覽器：傲游瀏覽器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器，
5、Blink
Blink是一個由Google和Opera Software開發的瀏覽器排版引擎，Google計划將這個渲染引擎作為Chromium計划的一部分，並且在2013年4月的時候公布了這一消息。 這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，並且在Chrome（28及往后版本）、Opera（15及往后版本）和 Yandex瀏覽器中使用。