1.前端頁面有哪三層構成，分別是什麼？作用是什麼？
構成：結構層、表示層、行為層 

分別是：HTML、CSS、JavaScript 
作用：HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。

2.cookie丶sessionStorage丶localStorage之間的區別和使用
cookie:儲存在使用者本地終端上的資料。有時也用cookies，指某些網站為了辨別使用者身份，進行session跟蹤而儲存在本地終端上的資料，通常經過加密。一般應用最典型的案列就是判斷註冊使用者是否已經登過該網站。
localStorage和sessionStorage都是h5在客戶端儲存資料的方法。localStorage - 沒有時間限制的資料儲存,第二天、第二週或下一年之後，資料依然可用。
sessionStorage - 針對一個 session 的資料儲存,當用戶關閉瀏覽器視窗後，資料會被刪除。

3.css隱藏元素的方法
 

1.設定元素的opacity(發音:[oʊˈpæsəti])
2.將 visibility 設為 hidden
3.將display設為none
4.將 position 設為 absolute

4.你曾經用過哪些瀏覽器測試，它們的核心是什麼？
IE瀏覽器：IE核心;火狐瀏覽器：Gecko核心;谷歌瀏覽器：webkit核心

5.ajax get和post有何區別？
1.GET請求會將引數跟在URL後進行傳遞，而POST請求則是作為HTTP訊息的實體內容傳送給WEB伺服器。
2.GET方式請求的資料會被瀏覽器快取起來
3.GET一般用來請求資料，POST一般用來提交表單資料。

6.如何理解事件委託
 

事件委託，通俗地來講，就是把一個元素響應事件（click、keydown......）的函式委託到另一個元素；

7.如何理解閉包？
在一個函式內部定義了一個子函式，並且返回到外部呼叫的方式叫做閉包。

8.請描述一下MVC,MVP,MVVM

9.ajax跨域問題
 

經常問的問題================================================

行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
CSS規範規定，每個元素都有display屬性，確定該元素的型別，每個元素都有預設的display值，如div的display預設值為“block”，則為“塊級”元素；span預設display屬性值為“inline”，是“行內”元素。
（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
    <br> <hr> <img> <input> <link> <meta>

頁面匯入樣式時，使用link和@import有什麼區別？
 

（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS;
（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題;

介紹一下你對瀏覽器核心的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎。

常見的瀏覽器核心有哪些？
Trident核心：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko核心：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto核心：Opera7及以上。 [Opera核心原為：Presto，現為：Blink;]
Webkit核心：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

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;

瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過app並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。
離線的情況下，瀏覽器就直接使用離線儲存的資源。

請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）。
cookie資料始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞。
sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。

儲存大小：
cookie資料大小不能超過4k。
sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

有期時間：
localStorage 儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
sessionStorage 資料在當前瀏覽器視窗關閉後自動刪除。
cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉


iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件；
*搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO;
*iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe新增src屬性值，這樣可以可以繞開以上兩個問題。


介紹一下CSS的盒子模型？
（1）有兩種， IE 盒子模型、標準盒子模型；IE的content部分包含了 border 和 pading;
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

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"]）
9.偽類選擇器（a: hover, li: nth - child）

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

如何居中div?如何居中一個浮動元素?(浮動元素導致display:block)
給div設定一個寬度，然後新增margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}

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