一、HTML部分
1、瀏覽器頁面有哪三層構成，分別是什麼?作用是什麼?
構成：結構層、表示層、行爲層
分別是：HTML、CSS、JavaScript
作用：HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。
2、HTML5的優點與缺點
優點：
a、網絡標準統一、HTML5本身是由W3C推薦出來的。
b、多設備、跨平臺
c、即時更新。
d、提高可用性和改進用戶的友好體驗；
e、有幾個新的標籤，這將有助於開發人員定義重要的內容；
f、可以給站點帶來更多的多媒體元素(視頻和音頻)；
g、可以很好的替代Flash和Silverlight；
h、涉及到網站的抓取和索引的時候，對於SEO很友好；
i、被大量應用於移動應用程序和遊戲。
缺點：
a、安全：像之前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。
b、完善性：許多特性各瀏覽器的支持程度也不一樣。
c、技術門檻：HTML5簡化開發者工作的同時代表了有許多新的屬性和API需要開發者學習，像web worker、web socket、web storage 等新特性，後臺甚至瀏覽器原理的知識，機遇的同時也是巨大的挑戰
d、性能：某些平臺上的引擎問題導致HTML5性能低下。
e、瀏覽器兼容性：最大缺點，IE9以下瀏覽器幾乎全軍覆沒。
3、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤之前。告知瀏覽器的解析器，用什麼文檔類型 規範來解析這個文檔。
（2）、嚴格模式的排版和JS 運作模式是以該瀏覽器支持的最高標準運行。
（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點無法工作。
（4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
4、HTML5有哪些新特性、移除了哪些元素？
html5 有新增了哪些元素廢棄了哪些元素
Html5新增了27個元素，廢棄了16個元素，根據現有的標準規範，把HTML5的元素按優先級定義爲結構性屬性、級塊性元素、行內語義性元素和交互性元素4大類。
結構性元素主要負責web上下文結構的定義
section：在web頁面應用中，該元素也可以用於區域的章節描述。
header：頁面主體上的頭部，header元素往往在一對body元素中。
footer：頁面的底部（頁腳），通常會標出網站的相關信息。
nav：專門用於菜單導航、鏈接導航的元素，是navigator的縮寫。
article：用於表現一篇文章的主體內容，一般爲文字集中顯示的區域。
級塊性元素主要完成web頁面區域的劃分，確保內容的有效分割。
aside：用於表達註記、貼士、側欄、摘要、插入的引用等作爲補充主體的內容。
figure：是對多個元素進行組合並展示的元素，通常與ficaption聯合使用。
code：表示一段代碼塊。
dialog：用於表達人與人之間的對話，該元素包含dt和dd這兩個組合元素，dt用於表示說話者，而dd用來表示說話內容。
行內語義性元素主要完成web頁面具體內容的引用和描述，是豐富內容展示的基礎。
meter：表示特定範圍內的數值，可用於工資、數量、百分比等。
time：表示時間值。
progress：用來表示進度條，可通過對其max、min、step等屬性進行控制，完成對進度的表示和監事。
video：視頻元素，用於支持和實現視頻文件的直接播放，支持緩衝預載和多種視頻媒體格式。
audio：音頻元素，用於支持和實現音頻文件的直接播放，支持緩衝預載和多種音頻媒體格式。
交互性元素主要用於功能性的內容表達，會有一定的內容和數據的關聯，是各種事件的基礎。
details：用來表示一段具體的內容，但是內容默認可能不顯示，通過某種手段（如單擊）與legend交互纔會顯示出來。
datagrid：用來控制客戶端數據與顯示，可以由動態腳本及時更新。
menu：主要用於交互菜單（曾被廢棄又被重新啓用的元素）。
command：用來處理命令按鈕。
5、你做的網頁在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?
a、IE: trident內核
b、Firefox：gecko內核
c、Safari:webkit內核
d、Opera:以前是presto內核，Opera現已改用Google Chrome的Blink內核
e、Chrome:Blink(基於webkit，Google與Opera Software共同開發)
6、每個HTML文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）
7、Doctype的作用 ? 嚴格模式與混雜模式如何區分?它們有何意義?
doctype聲明指出閱讀程序應該用什麼規則集來解釋文檔中的標記。在Web文檔的情況下，“閱讀程序”通常是瀏覽器或者校驗器這樣的一個程序，“規則”則是W3C所發佈的一個文檔類型定義（DTD）中包含的規則。
(1)<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的HTML 文檔。
(2)所謂的標準模式是指，瀏覽器按 W3C 標準解析執行代碼；怪異模式則是使用瀏覽器自己的方式解析執行代碼，因爲不同瀏覽器解析執行的方式不一樣，所以我們稱之爲怪異模式。
嚴格模式是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD，不允許使用任何表現層的語法，如<br/>。嚴格模式的排版和JS 運作模式是以該瀏覽器支持的最高標準運行混雜模式則是一種向後兼容的解析方法，說的透明點就是可以實現IE5.5以下版本瀏覽器的渲染模式。
(3)瀏覽器解析時到底使用標準模式還是怪異模式，與你網頁中的 DTD 聲明直接相關， DTD 聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略 DTD 聲明 ,將使網頁進入怪異模式。
8、對WEB標準以及W3C的理解與認識
標籤閉合、標籤小寫、不亂嵌套、提高搜索機器人搜索機率、使用外 鏈css和js腳本、結構行爲表現的分離、
文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，
容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要複製內容、提高網站易用性。
9、行內元素有哪些? 塊級元素有哪些? 空元素有哪些?
(1)行內元素
a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計算機代碼(在引用源碼的時候需要)
* dfn - 定義字段
* em - 強調
* font - 字體設定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標籤
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義範例計算機代碼
* select - 項目選擇
* small - 小字體文本
* span - 常用內聯容器，定義文本內區塊
* strike - 中劃線
* strong - 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變量
(2)塊元素(block element)
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易，也是css layout的主要標籤
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
* noscript - ）可選腳本內容（對於不支持script的瀏覽器顯示此內容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
可變元素
可變元素爲根據上下文語境決定該元素爲塊元素或者內聯元素。
* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區塊(map)
* object - object對象
* script - 客戶端腳本
(3)空元素(在HTML[1] 元素中，沒有內容的 HTML 元素被稱爲空元素)
<br/> //換行
<hr> //分隔線
<input> //文本框等
<img> //圖片
<link> <meta>
10、什麼是WebGL,它有什麼優點
WebGL（全寫Web Graphics Library）是一種3D繪圖標準，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以爲HTML5 Canvas提供硬件3D加速渲染，這樣Web開發人員就可以藉助系統顯卡來在瀏覽器裏更流暢地展示3D場景和模型了，還能創建複雜的導航和數據視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用於創建具有複雜3D結構的網站頁面，甚至可以用來設計3D網頁遊戲等等。
WebGL完美地解決了現有的Web交互式三維動畫的兩個問題：
第一，它通過HTML腳本本身實現Web交互式三維動畫的製作，無需任何瀏覽器插件支持;
第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是通過統一的、標準的、跨平臺的OpenGL接口實現的。
通俗說WebGL中canvas繪圖中的3D版本。因爲原生的WebGL很複雜，我們經常會使用一些三方的庫，如three.js等，這些庫多數用於HTML5遊戲開發。
11、請描述一下 cookies，sessionStorage 和 localStorage 的區別
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web請求之間保存數據。有了本地數據，就可以避免數據在瀏覽器和服務器間不必要地來回傳遞。
sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage 的概念很特別，引入了一個“瀏覽器窗口”的概念。sessionStorage 是在同源的同窗口（或tab）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即使刷新頁面或進入同源另一頁面，數據仍然存在。關閉窗口後，sessionStorage 即被銷燬。同時“獨立”打開的不同窗口，即使是同一頁面，sessionStorage 對象也是不同的
cookies會發送到服務器端。其餘兩個不會。
Microsoft 指出 Internet Explorer 8 增加cookie 限制爲每個域名50個，但IE7 似乎也允許每個域名50個cookie。Firefox 每個域名cookie 限制爲50個。Opera每個域名cookie 限制爲30個。Firefox 和Safari 允許cookie 多達4097個字節，包括名（name）、值（value）和等號。Opera 許cookie 多達4096個字節，包括：名（name）、值（value）和等號。Internet Explorer 允許cookie 多達4095個字節，包括：名（name）、值（value）和等號。
區別：
- Cookie
+ 每個域名存儲量比較小（各瀏覽器不同，大致4K）
+ 所有域名的存儲量有限制（各瀏覽器不同，大致4K）
+ 有個數限制（各瀏覽器不同）
+ 會隨請求發送到服務器
- LocalStorage
+ 永久存儲
+ 單個域名存儲量比較大（推薦5MB，各瀏覽器不同）
+ 總體數量無限制
- SessionStorage
+ 只在 Session 內有效
+ 存儲量更大（推薦沒有限制，但是實際上各瀏覽器也不同）
12、語義化的理解
(1)什麼是HTML語義化？
<基本上都是圍繞着幾個主要的標籤，像標題（H1~H6）、列表（li）、強調（strong em）等等>
根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
(2)爲什麼要語義化？
爲了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構:爲了裸奔時好看；
用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用；
有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
(3) 語義化標籤
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article> SM:用來在頁面中表示一套結構完整且獨立的內容部分
<aslde></aside> SM:主題的附屬信息(用途很廣，主要就是一個附屬內容)，如果article裏面爲一篇文章的話，那麼文章的作者以及信息內容就是這篇文章的附屬內容了
<figure></figure>SM:媒體元素，比如一些視頻，圖片啊等等
<datalist></datalist>
SM:選項列表，與input元素配合使用，來定義input可能的值
<details></details>
SM:用於描述文檔或者文檔某個部分的細節~ 默認屬性爲open~
ps:配合summary一起使用
13、link和@import的區別
XML/HTML代碼
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代碼
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
兩者都是外部引用CSS的方式，但是存在一定的區別：
區別1：link是XHTML標籤，除了加載CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能加載CSS。
區別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以後加載。
區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。
14、說說你對SVG理解
SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯網標準組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。SVG嚴格遵從XML語法，並用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。SVG於2003年1月14日成爲 W3C 推薦標準。
特點：
(1)任意放縮
用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。
(2)文本獨立
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們製作時完全相同的畫面。
(3)較小文件
總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。
(4)超強顯示效果
SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。
(5)超級顏色控制
SVG圖像提供一個1600萬種顏色的調色板，支持ICC顏色描述文件標準、RGB、線X填充、漸變和蒙版。
(6)交互X和智能化。SVG面臨的主要問題一個是如何和已經佔有重要市場份額的矢量圖形格式Flash競爭的問題，另一個問題就是SVG的本地運行環境下的廠家支持程度。
瀏覽器支持：
Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。
IE8和早期版本都需要一個插件 - 如Adobe SVG瀏覽器，這是免費提供的。
15、HTML全局屬性(global attribute)有哪些
參考資料：MDN: html global attribute或者W3C HTML global-attributes
accesskey:設置快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift + a可激活元素class:爲元素設置類標識，多個類名用空格分開，CSS和javascript可通過class屬性獲取元素contenteditable: 指定元素內容是否可編輯contextmenu: 自定義鼠標右鍵彈出菜單內容data-*: 爲元素增加自定義屬性dir: 設置元素文本方向draggable: 設置元素是否可拖拽dropzone: 設置元素拖放類型： copy, move, linkhidden: 表示一個元素是否與文檔。樣式上會導致元素不顯示，但是不能用這個屬性實現樣式效果id: 元素id，文檔內唯一lang: 元素內容的的語言spellcheck: 是否啓動拼寫和語法檢查style: 行內css樣式tabindex: 設置元素可以獲得焦點，通過tab可以導航title: 元素相關的建議信息translate: 元素和子孫節點內容是否需要本地化
16、瀏覽器標準模式和怪異模式之間的區別是什麼？
在“標準模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器爲了兼容很早之前針對舊版本瀏覽器設計、並未嚴格遵循 W3C 標準的網頁而產生的一種頁面渲染模式。瀏覽器基於頁面中文件類型描述的存在以決定採用哪種渲染模式；如果存在一個完整的`DOCTYPE`則瀏覽器將會採用標準模式，而如果它缺失則瀏覽器將會採用怪異模式。
強烈建議閱讀加深理解：[怪異模式（Quirks Mode）對 HTML 頁面的影響](http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/)，這裏列下瀏覽器標準模式和怪異模式的區別：
（1）盒模型：
在怪異模式下，盒模型爲IE盒模型而非標準模式下的W3C 盒模型：在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border right，
box height = content height + padding top + padding bottom + border top + border bottom。
而在 W3C 標準的盒模型中，box 的大小就是 content 的大小。
（2）圖片元素的垂直對齊方式:
對於`inline`元素和`table-cell`元素，在 IE Standards Mode 下 vertical-align 屬性默認取值爲`baseline`。而當`inline`元素的內容只有圖片時，如`table`的單元格`table-cell`。在 IE Quirks Mode 下，`table`單元格中的圖片的 `vertical-align` 屬性默認爲`bottom`，因此，在圖片底部會有幾像素的空間。
（3）`<table>`元素中的字體:
CSS 中，描述`font`的屬性有`font-family`，`font-size`，`font-style`，`font-weigh`,上述屬性都是可以繼承的。而在 IE Quirks Mode 下，對於`table` 元素，字體的某些屬性將不會從`body`或其他封閉元素繼承到`table`中，特別是 `font-size`屬性。
（4） 內聯元素的尺寸:
在 IE Standards Mode 下，non-replaced inline 元素無法自定義大小，而在 IE Quirks Mode 下，定義這些元素的`width`和`height` 屬性，能夠影響該元素顯示的大小尺寸。
（5） 元素的百分比高度:
CSS 中對於元素的百分比高度規定如下，百分比爲元素包含塊的高度，不可爲負值。如果包含塊的高度沒有顯式給出，該值等同於“auto”（即取決於內容的高度）。所以百分比的高度必須在父元素有聲明高度時使用。
當一個元素使用百分比高度時，在 IE Standards Mode 下，高度取決於內容的變化，而在 Quirks Mode 下，百分比高度則被正確應用。
（6） 元素溢出的處理：
在 IE Standard Mode 下，`overflow`取默認值 `visible`，即溢出可見，這種情況下，溢出內容不會被裁剪，呈現在元素框外。而在 Quirks Mode 下，該溢出被當做擴展`box`來對待，即元素的大小由其內容決定，溢出不會被裁剪，元素框自動調整，包含溢出內容。
另可參考閱讀：<https://www.cs.tut.fi/~jkorpela/quirks-mode.html>
17、`data-`屬性的作用是什麼？
`data-`爲前端開發者提供自定義的屬性，這些屬性集可以通過對象的`dataset`屬性獲取，不支持該屬性的瀏覽器可以通過`getAttribute`方法獲取:
`<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>`
`div.dataset.commentNum; // 10`
需要注意的是，`data-`之後的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峯風格。並不是所有的瀏覽器都支持.`dataset`屬性，測試的瀏覽器中只有Chrome 和Opera 支持。
即：當沒有合適的屬性和元素時，自定義的 data 屬性是能夠存儲頁面或 App 的私有的自定義數據。
18、介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。
19、常見的瀏覽器內核有哪些？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]20、iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
21、Label的作用是什麼？是怎麼用的？
label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
22、如何實現瀏覽器內多個標籤頁之間的通信?
WebSocket、SharedWorker；
也可以調用localstorge、cookies等本地存儲方式；
localstorge另一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面信息通信；
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；
23、如何在頁面上實現一個圓形的可點擊區域？
a、map+area或者svg
b、border-radius
c、純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標座標等等
24、title與h1的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展示強調內容。
i內容展示爲斜體，em表示強調的文本；
Physical Style Elements -- 自然樣式標籤
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標籤
strong, em, ins, del, code
應該準確使用語義樣式標籤, 但不能濫用, 如果不能確定時首選使用自然樣式標籤。
25、實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
26、怪異Quirks模式是什麼？它和標準Standards模式有什麼區別
從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規範上的正確處理達到在指定瀏覽器中的程度。
在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，然而這時的問題就來了，因爲有很多頁面是基於舊的佈局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？
在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數爲真時，我們就使用新功能，而如果這個參數 不爲真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當成了這個“參數”，因爲以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味着這個頁面將採用對CSS支持更好的佈局，而如果沒有，則採用兼容之前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：總體會有佈局、樣式解析和腳本執行三個方面的區別。
盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
（還有很多，答出什麼不重要，關鍵是看他答出的這些是不是自己經驗遇到的，還是說都是看文章看的，甚至完全不知道。）
27、簡述一下src與href的區別。
src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。
<script src ="js.js"></script>
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是爲什麼將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加
<link href="common.css" rel="stylesheet"/>
那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源並且不會停止對當前文檔的處理。這也是爲什麼建議使用link方式來加載css，而不是使用@import方式。
28、談談你對canvas的理解
canvas是HTML5中新增一個HTML5標籤與操作canvas的javascript API，它可以實現在網頁中完成動態的2D與3D圖像技術。<canvas> 標記和 SVG以及 VML 之間的一個重要的不同是，<canvas> 有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。
canvas可以完成動畫、遊戲、圖表、圖像處理等原來需要Flash完成的一些功能。
29、WebSocket與消息推送
B/S架構的系統多使用HTTP協議，HTTP協議的特點：
1 無狀態協議
2 用於通過 Internet 發送請求消息和響應消息
3 使用端口接收和發送消息，默認爲80端口
底層通信還是使用Socket完成。
HTTP協議決定了服務器與客戶端之間的連接方式，無法直接實現消息推送（F5已壞）,一些變相的解決辦法：
雙向通信與消息推送
輪詢：客戶端定時向服務器發送Ajax請求，服務器接到請求後馬上返回響應信息並關閉連接。 優點：後端程序編寫比較容易。 缺點：請求中有大半是無用，浪費帶寬和服務器資源。 實例：適於小型應用。
長輪詢：客戶端向服務器發送Ajax請求，服務器接到請求後hold住連接，直到有新消息才返回響應信息並關閉連接，客戶端處理完響應信息後再向服務器發送新的請求。 優點：在無消息的情況下不會頻繁的請求，耗費資小。 缺點：服務器hold連接會消耗資源，返回數據順序無保證，難於管理維護。 Comet異步的ashx， 實例：WebQQ、Hi網頁版、Facebook IM。
長連接：在頁面裏嵌入一個隱蔵iframe，將這個隱蔵iframe的src屬性設爲對一個長連接的請求或是採用xhr請求，服務器端就能源源不斷地往客戶端輸入數據。 優點：消息即時到達，不發無用請求；管理起來也相對便。 缺點：服務器維護一個長連接會增加開銷。 實例：Gmail聊天
Flash Socket：在頁面中內嵌入一個使用了Socket類的 Flash 程序JavaScript通過調用此Flash程序提供的Socket接口與服務器端的Socket接口進行通信，JavaScript在收到服務器端傳送的信息後控制頁面的顯示。 優點：實現真正的即時通信，而不是僞即時。 缺點：客戶端必須安裝Flash插件；非HTTP協議，無法自動穿越防火牆。 實例：網絡互動遊戲。
Websocket:
WebSocket是HTML5開始提供的一種瀏覽器與服務器間進行全雙工通訊的網絡技術。依靠這種技術可以實現客戶端和服務器端的長連接，雙向實時通信。
特點:
a、事件驅動
b、異步
c、使用ws或者wss協議的客戶端socket
d、能夠實現真正意義上的推送功能
缺點：少部分瀏覽器不支持，瀏覽器支持的程度與方式有區別。
30、img的title和alt有什麼區別
Alt 用於圖片無法加載時顯示
Title 爲該屬性提供信息，通常當鼠標滑動到元素上的時候顯示
本博客大部分數據來源於各大網站的收集整理改編，主要有GitHub(https://github.com)、題來了(http://www.tilaile.com)、牛客網(https://www.nowcoder.com)、一些英文網站，還有一些論壇、博客、IT招聘等網站。還有少部分數據時來源於本人自己整理添加，添加的內容主要是本人認爲比較重要知識點，面試時可能會問到的題目，自己整理題目以及參考答案，答案僅供參考，答案可能存有錯誤或不足，歡迎大家批評指正或補充更好的答案。好讓我及時更正，以免誤導其他人。本博客僅提供參考作用。