2016年終前端HTML5開發面試題彙總整理
2016年終前端HTML5開發面試題彙總整理，僅部分問題有答案，其他請自行解決處理。
一、HTML常見題目
01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
02、HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
答：Html5不基於SGML，因此不需要對DTD進行引用，但是需要DOCTYPE來規範瀏覽器的行為（讓瀏覽器按照他們應該的方式來執行）而HTML4.01基於SGML，所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。
03、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
答：行內元素：a b span img input select strong
塊級元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等
空元素：<br> <hr> <img> <link> <meta>
04、頁面匯入樣式時，使用link和@import有什麼區別？
05、介紹一下你對瀏覽器核心的理解？
06、常見的瀏覽器核心有哪些？
07、Html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？
答：新特性，新增元素：
1）內容元素：article、footer、header、nav、section
2）表單控制元件：calendar、date、time、email、url、search
3）控制元件元素：webworker，websockt，Geolocation
移除元素：
1）顯現層元素：basefont，big，center，font，s，strike，tt，u
2）效能較差元素：frame，frameset，noframes
處理相容問題有兩種方式：
1）IE6/IE7/IE8支援通過document方法產生的標籤，利用這一特性讓這些瀏覽器支援HTML5新標籤。
2）使用是html5shim框架
另外，DOCTYPE宣告的方式是區分HTML和HTML5標誌的一個重要因素，此外，還可以根據新增的結構，功能元素來加以區分。
08、如何區分 HTML 和 HTML5？
答：1）在文件型別宣告上不同：
HTML是很長的一段程式碼，很難記住，而HTML5卻只有簡簡單單的宣告，方便記憶。
2）在結構語義上不同：
HTML：沒有體現結構語義化的標籤，通常都是這樣來命名的<div id="header"></div>，這樣表示網站的頭部。
HTML5：在語義上卻有很大的優勢。提供了一些新的標籤，比如：<header><article><footer>
09、簡述一下你對HTML語義化的理解？
答：1）用正確的標籤做正確的事情；
2）html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析；
3）即使在沒有樣式css情況下也以一種文件格式顯示，並且是容易閱讀的；
4）搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO；
5）使於都原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
答：localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
sessionStorage 資料在瀏覽器關閉後自動刪除。
11、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
12、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
13、iframe有那些缺點？
答：1）在網頁中使用框架結構最大的弊病是搜尋引擎的“蜘蛛”程式無法解讀這種頁面；
2）框架結構有時會讓人感到迷惑，頁面很混亂；
14、Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
15、HTML5的form如何關閉自動完成功能？
16、如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
17、webSocket如何相容低瀏覽器？(阿里)
18、頁面可見性（Page Visibility）API 可以有哪些用途？
19、如何在頁面上實現一個圓形的可點選區域？
20、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
21、網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
22、tite與h1的區別、b與strong的區別、i與em的區別？
01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
答：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
03、CSS優先順序演算法如何計算？
04、CSS3新增偽類有那些？
答：p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素；
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素；
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素；
p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素；
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素；
:enabled :disabled 控制表單控制元件的禁用狀態；
:checked 單選框或複選框被選中。
05、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
答：CSS3 實現圓角（border-radius:8px;），陰影（box-shadow:10px）,對文字加特效（text-shadow）,線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉，縮放，定位，傾斜增加了更多的 css 選擇器 多背景 rgba
09、請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？
10、用純CSS建立一個三角形的原理是什麼？
11、一個滿屏 品 字佈局 如何設計?
12、常見相容性問題？
13、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
14、經常遇到的瀏覽器的相容性有哪些？原因，解決方法是什麼，常用hack的技巧？
15、為什麼要初始化CSS樣式。
答：因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對 SEO 有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法是：*{padding:0;margin:0} (不建議)
淘寶的樣式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,
textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
16、absolute的containingblock計算方式跟正常流有什麼不同？
17、CSS裡的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
18、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
19、對BFC規範(塊級格式化上下文：block formatting context)的理解？
20、CSS權重優先順序是如何計算的？
21、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
22、移動端的佈局用過媒體查詢嗎？
23、使用 CSS 前處理器嗎？喜歡那個？
24、CSS優化、提高效能的方法有哪些？
25、瀏覽器是怎樣解析CSS選擇器的？
26、在網頁中的應該使用奇數還是偶數的字型？為什麼呢？
27、margin和padding分別適合什麼場景使用？
28、抽離樣式模組怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
29、元素豎向的百分比設定是相對於容器的高度嗎？
30、全屏滾動的原理是什麼？用到了CSS的那些屬性？
31、什麼是響應式設計？響應式設計的基本原理是什麼？如何相容低版本的IE？
32、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
33、::before 和:after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
34、如何修改chrome記住密碼後自動填充表單的黃色背景 ？
35、你對line-height是如何理解的？
36、設定元素浮動後，該元素的display值是多少？（自動變成display:block）
37、怎麼讓Chrome支援小於12px 的文字？
38、讓頁面裡的字型變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
39、font-style屬性可以讓它賦值為“oblique” oblique是什麼意思？
40、position:fixed;在Android下無效怎麼處理？
41、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
42、display:inline-block 什麼時候會顯示間隙？(攜程)
43、overflow: scroll時不能平滑滾動的問題怎麼處理？
44、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
45、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
46、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
47、style標籤寫在body後與body前有什麼區別？
三、JavaScript面試題
01、介紹JavaScript的基本資料型別。
02、說說寫JavaScript的基本規範？
03、JavaScript原型，原型鏈 ? 有什麼特點？
04、JavaScript有幾種型別的值？（堆：原始資料型別和棧：引用資料型別），你能畫一下他們的記憶體圖嗎？
05、Javascript如何實現繼承？
06、Javascript建立物件的幾種方式？
07、Javascript作用鏈域?
08、談談This物件的理解。
09、eval是做什麼的？
10、什麼是window物件? 什麼是document物件?
11、null，undefined的區別？
12、寫一個通用的事件偵聽器函式(機試題)。
13、[“1”, “2”, “3”].map(parseInt) 答案是多少？
14、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
15、什麼是閉包（closure），為什麼要用它？
16、javascript 程式碼中的”use strict”;是什麼意思 ? 使用它區別是什麼？
17、如何判斷一個物件是否屬於某個類？
18、new操作符具體幹了什麼呢?
19、用原生JavaScript的實現過什麼功能嗎？
20、Javascript中，有一個函式，執行時物件查詢時，永遠不會去查詢原型，這個函式是？
21、對JSON的瞭解？
22、[].forEach.call($$("*"),function(a){a.style.outline="1px solid#"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段程式碼的意思嗎？
23、js延遲載入的方式有哪些？
24、Ajax 是什麼? 如何建立一個Ajax？
25、同步和非同步的區別?
26、如何解決跨域問題?
27、頁面編碼和被請求的資源編碼如果不一致如何處理？
28、模組化開發怎麼做？
29、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？
30、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何快取的？）
31、讓你自己設計實現一個requireJS，你會怎麼做？
32、談一談你對ECMAScript6的瞭解？
33、ECMAScript6 怎麼寫class麼，為什麼會出現class這種東西?
34、非同步載入的方式有哪些？
35、documen.write和 innerHTML的區別?
36、DOM操作——怎樣新增、移除、移動、複製、建立和查詢節點?
37、.call() 和.apply() 的含義和區別？
38、陣列和物件有哪些原生方法，列舉一下？
39、JS 怎麼實現一個類。怎麼例項化這個類
40、JavaScript中的作用域與變數宣告提升？
41、如何編寫高效能的Javascript？
42、那些操作會造成記憶體洩漏？
43、jQuery的原始碼看過嗎？能不能簡單概況一下它的實現原理？
44、jQuery.fn的init方法返回的this指的是什麼物件？為什麼要返回this？
45、jquery中如何將陣列轉化為json字串，然後再轉化回來？
46、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
47、jquery.extend 與 jquery.fn.extend的區別？
48、jQuery 的佇列是如何實現的？佇列可以用在哪些地方？
49、談一下Jquery中的bind(),live(),delegate(),on()的區別？
50、JQuery一個物件可以同時繫結多個事件，這是如何實現的？
51、是否知道自定義事件。jQuery裡的fire函式是什麼意思，什麼時候用？
52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
53、針對 jQuery效能的優化方法？
54、Jquery與jQueryUI有啥區別？
55、JQuery的原始碼看過嗎？能不能簡單說一下它的實現原理？
56、jquery 中如何將陣列轉化為json字串，然後再轉化回來？
57、jQuery和Zepto的區別？各自的使用場景？
58、針對 jQuery 的優化方法？
59、Zepto的點透問題如何解決？
60、jQueryUI如何自定義元件?
61、需求：實現一個頁面操作不會整頁重新整理的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
62、如何判斷當前指令碼執行在瀏覽器還是node環境中？（阿里）
63、移動端最小觸控區域是多大？
64、jQuery 的slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，該如何處理呢?
65、把 Script 標籤 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？
66、移動端的點選事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）
67、知道各種JS框架(Angular,Backbone, Ember, React, Meteor, Knockout…)麼? 能講出他們各自的優點和缺點麼?
68、Underscore 對哪些 JS 原生物件進行了擴充套件以及提供了哪些好用的函式方法？
69、解釋JavaScript中的作用域與變數宣告提升？
70、那些操作會造成記憶體洩漏？
71、JQuery一個物件可以同時繫結多個事件，這是如何實現的？
72、Node.js的適用場景？(如果會用node)知道route,middleware, cluster, nodemon, pm2, server-side rendering麼?
73、解釋一下 Backbone 的 MVC 實現方式？
74、什麼是“前端路由”?什麼時候適合使用“前端路由”? “前端路由”有哪些優點和缺點?
75、知道什麼是webkit麼? 知道怎麼用瀏覽器的各種工具來除錯和debug程式碼麼?
76、如何測試前端程式碼麼? 知道BDD, TDD, Unit Test麼? 知道怎麼測試你的前端工程麼(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore,handlebars)是幹嘛的, 怎麼用?
78、簡述一下 Handlebars 的基本用法？
79、簡述一下 Handlerbars 的對模板的基本處理流程，如何編譯的？如何快取的？
80、用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
81、檢測瀏覽器版本版本有哪些方式？
82、我們給一個dom同時繫結兩個點選事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲。