關於筆經面經參考：2015校園招聘阿里巴巴前端筆經面經
請解釋一下什么是語義化的HTML。語義化HTML的優點
根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
語義化HTML優點：
1，去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
2，有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標簽來確定上下文和各個關鍵字的權重；
3，方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標准的團隊都遵循這個標准，可以減少差異化。
寫html時注意點：
盡可能少的使用無語義的標簽div和span；
在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
不要使用純樣式標簽，如：b、font、u等，改用css設置。
需要強調的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
表單域要用fieldset標簽包起來，並用legend標簽說明表單的用途；
每個input標簽對應的說明文本都需要使用label標簽，並且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。
HTML與XHTML——二者有什么區別，你覺得應該使用哪一個並說出理由。
區別：
1.所有的標記都必須要有一個相應的結束標記
2.所有標簽的元素和屬性的名字都必須使用小寫
3.所有的XML標記都必須合理嵌套
4.所有的屬性必須用引號""括起來
5.把所有<和&特殊符號用編碼表示
6.給所有屬性賦一個值
7.不要在注釋內容中使“--”
8.圖片必須有說明文字
浮動元素——怎么使用它們、它們有什么問題以及怎么解決這些問題。
需要浮動的元素可使用CSS中float屬性來定義元素的浮動位置，left：往左浮動，right：往右浮動
浮動元素引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對於問題1，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
1，額外標簽法，<div style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標簽使HTML結構看起來不夠簡潔。）
2，使用after偽類
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3,浮動外部元素
4,設置overflow為hidden或者auto
盒模型——外邊距、內邊距和邊框之間的關系，IE 8以下版本的瀏覽器中的盒模型有什么不同。
一個元素盒模型的層次從內到外分別為：內邊距、邊框和外邊距
IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框
嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。
在標准模式中，瀏覽器根據規范呈現頁面；
在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示。
瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE，那么它一般以標准模式
呈現。對於HTML
4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面以標准模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標准模式呈現，但是有過
渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。
apply 和 call的作用
動態改變某個類的某個方法的運行環境。
****************************senior***********************************
你能描述一下漸進增強和優雅降級之間的不同嗎?
* 如果提到了特性檢測，可以加分。
優雅降級和漸進增強印象中是隨着css3流出來的一個概念。由於低級瀏覽器不支持css3，但css3的效果又太優秀不忍放棄，所以在高級瀏覽中使用css3而低級瀏覽器只保證最基本的功能。咋一看兩個概念差不多，都是在關注不同瀏覽器下的不同體驗，關鍵的區別是他們所側重的內容，以及這種不同造成的工作流程的差異。
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：優雅降級是從復雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處於安全地帶。
什么是FOUC？你如何來避免FOUC？
如果使用import方法對CSS進行導入,會導致某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:以無樣式顯示頁面內容的瞬間閃爍,這種現象稱之為文檔樣式短暫失效(Flash of Unstyled Content),簡稱為FOUC.原因大致為：
1，使用import方法導入樣式表。
2，將樣式表放在頁面底部
3，有幾個樣式表，放在html結構的不同位置。其實原理很清楚：當樣式表晚於 結構性html 加載，當加載到此樣式表時，頁面將停止之前的渲染。此樣式表被下載和解析后，將重新渲染頁面，也就出現了短暫 的 花屏現象。解決方法：使用LINK標簽將樣式表放在文檔HEAD中更多
javascript對象的幾種創建方式
1，工廠模式
2，構造函數模式
3，原型模式
4，混合構造函數和原型模式
5，動態原型模式
6，寄生構造函數模式
7，穩妥構造函數模式
javascript繼承的6種方法
1，原型鏈繼承
2，借用構造函數繼承
3，組合繼承(原型+借用構造)
4，原型式繼承
5，寄生式繼承
6，寄生組合式繼承
接下來復習：
1， 輸入網址到出現頁面的過程（IP解析，DNS解析等）
分為4個步驟：
（1），當發送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啟一個線程來處理這個請求，同時在遠程DNS服務器上啟動一個DNS查詢。這能使瀏覽器獲得請求對應的IP地址。
（2），瀏覽器與遠程Web服務器通過TCP三次握手協商來建立一個TCP/IP連接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務器應答並接受客戶端的請求，最后由客戶端發出該請求已經被接受的報文。
（3），一旦TCP/IP連接建立，瀏覽器會通過該連接向遠程服務器發送HTTP的GET請求。遠程服務器找到資源並使用HTTP響應返回該資源，值為200的HTTP響應狀態表示一個正確的響應。
（4），此時，Web服務器提供資源服務，客戶端開始下載資源。
2， ajax過程
(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象.
(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.
3， 兼容性問題
1， 浮動雙邊距。
ie6下的bug，當給一個div元素設置float屬性后，margin值會加倍，解決方法:給 div 設置display:inline;
2，設置元素的最小高度和最小寬度
(原因： ie6中元素高度是根據內容的高度而變化的，並且無法識別min-height屬性，所以要顯示給容器設置height。)
ie6不能識別屬性min-height 和 min-width（采用!important方法修復）
3，上下margin重合。
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的代碼編寫習慣，同時采用margin-top或者同時采用margin-bottom。
4, ie6下無法設置微高
（原因：ie6下會拒絕高度小於字號的設置）
解決方案：font-size: 0; line-height:0;
5，ie6對png圖片格式支持不好(引用一段腳本處理)
6, ie6下hover偽類的bug，ie6只支持a:hover，其它的偽類不支持
解決辦法是： 采用javascript或jQuery來解決。
4， BOM
5， 框架源碼和框架間的比較
jQuery, EXT, YUI, angular, ember, backbone, requireJS, seaJs, cordova等等。
6， javascript設計模式
7， 跨域請求
同源策略：同源指的是協議，域名，端口是否相同，同源策略是一種安全協議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
跨域請求的解決方案：
1，jsonp
2，document.domain
3，window.name
4，window.postMessage
8， 正則表達式
1, 身份證的正則表達式
var re = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X\x)$)/;
2, 非負整數
var re = /^(0|([1-9]\d*))$/;
3, 整整數
var re = /^[1-9]\d*$/;
4, 非正整數
var re = /^(0|())$/;
9， 前端工具
npm, grunt, bower, YUI comprosser, google clojure, IETester, YSlow
10， 准備材料
包括一些獲獎證書，實習證書，聘書等等
11，異步加載和延遲加載
異步加載的方案： 動態插入script標簽
通過ajax去獲取js代碼，然后通過eval執行
script標簽上添加defer或者async屬性
創建並插入iframe，讓它異步執行js
延遲加載：有些 js 代碼並不是頁面初始化的時候就立刻需要的，而稍后的某些情況才需要的。
案例（瀑布流）
!important在 CSS 中表示優先調用， ie6不能識別這個屬性
以上筆記都是平時容易忽略的。
可以Focus 我的github，接下來打算把之前寫的一些整理優質代碼push到github上。
我的github地址：https://github.com/liufeng-cheng
有問題可以留言，需要資料可以給我發郵件哦（包括個人簡歷都可以看情況提供參考）~
另外推薦前端書籍：
javascript 權威指南
git權威指南
Nodejs權威指南
高性能javascript
基於mvc的javascript富客戶端應用
angularjs開發下一代web應用
精通正則表達式
javascript框架設計
HTML5高級程序設計
這幾個站點不錯，可以收藏一下
http://www.nowamagic.net/ 簡明現代魔法，獨立博客，我看了2年了
http://tomxu.cnblogs.com/ 湯姆大叔設計模式那一部分可以慢慢消化，感覺對閉包、作用域講的挺深的，贊一個！！
http://www.css88.com/ css88，還可以啦
http://javascript.ruanyifeng.com/ javascript在線參考教程，挺不錯的，寫的很好，很全面
**********************alibaba front-end requirements***********************************
阿里要求：
在這里，你將參與交互設計師一起，美化產品線 Web功能的設計；
與視覺設計師一起，參與完成產品線 Web功能的開發與實現；
有機會參與各產品線用戶體驗、性能、架構等方面的改進與優化；
你還將加入到我們業內最前沿Web技術的研究與開發中。
我們希望你，可以熟練使用各種 Web 前端技術，包括(X)HTML/CSS/Javascript/JSON 等，並有相關的項目開發經驗或成果；
我們希望你，有基於Ajax 應用的開發經驗；深刻理解 Web 標准，對可用性、可訪問性等相關知識有實際的了解； 對算法、數據結構以及后台開發(PHP/Java等)有一定了解；
我們希望你，關注新事物、新技術，有較強的學習能力，喜歡挑戰；並且，個性樂觀開朗，邏輯性強，善於和各種背景的人合作。
還等什么呢？快來加入我們的阿里巴巴，期待你的大展身手！