HTML與瀏覽器
Doctype 作用？標准模式與兼容模式各有什么區別？
DOCTYPE是用來聲明文檔類型和DTD規范的。<!DOCTYPE html>聲明位於HTML文檔中的第一行，不是一個 html 標簽，處於 html 標簽之前。告訴瀏覽器的解析器用什么文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現
標准模式的排版 和 JS 運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。
在HTML4.01中<!doctype>聲明指向一個DTD，由於HTML4.01基於SGML，所以DTD指定了標記規則以保證瀏覽器正確渲染內容 HTML5 不基於SGML，所以不用指定DTD
HTML 全局屬性
全局屬性是所有HTML元素共有的屬性；它們可以用於所有元素，即使屬性可能對某些元素不起作用。
canvas和svg的區別
canvas是html5提供的新元素，而svg存在的歷史要比canvas久遠，已經有十幾年了。svg並不是html5專有的標簽，最初svg是xml技術(超文本擴展語言，可以自定義標簽或屬性)描述二維圖形的語言。在H5中看似canvas和svg很像，但是，它們有巨大的差別。
首先，從它們的功能上講，canvas可以看做是一個畫布。其繪制出來的圖形為標量圖，因此，可以在canvas中引入.jpg或.png這類格式的圖片，在實際開發中，大型的網絡游戲都是用canvas畫布做出來的，並且canvas的技術現在已經相當嫻熟。另外，我們喜歡用canvas來做一些統計用的圖表，如柱狀圖曲線圖或餅狀圖等。而svg，所繪制的圖形為矢量圖，所以其用法上受到了限制。因為只能繪制矢量圖，所以svg中不能引入普通的圖片，因為矢量圖的不會失真效果，在項目中我們會用來做小圖標。但是由於其本質為矢量圖，可以被無限放大而不會失真，這很適合被用來做地圖，而百度地圖就是用svg技術做出來的。
另外從技術方面來講canvas里面繪制的圖形不能被引擎抓取，如我們要讓canvas里面的一個圖片跟隨鼠標事件：canvas.onmouseover = function(){}。而svg里面的圖形可以被引擎抓取，支持事件的綁定。另外canvas中我們繪制圖形通常是通過JavaScript來實現，而svg更多的是通過標簽來實現，如在svg中繪制正矩形，這里我們不能用屬性style="width:xxx;height:xxx"來定義。
行內元素有哪些？塊級元素有哪些？空元素有哪些？
定義：CSS規范規定，每個元素都有 display 屬性，確定該元素的類型，每個元素都有默認的 display 值，如 div 的 display 默認值為“block”，則為“塊級”元素；span 默認 display 屬性值為“inline”，是“行內”元素。
- 行內元素有：a b span img input select strong
- 塊級元素有：div ul ol li dl dt dd h1 h2 h3 ....p
- 空元素：
- 常見：br hr img link input meta
- 不常見：area base col command embed keygen param source track wbr
不同瀏覽器（版本）、HTML4（5）、CSS2等實際略有差別 參考http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements
介紹一下你對瀏覽器內核的理解？
主要分兩部分：渲染引擎(layout engineer 或 Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后渲染到用戶的屏幕上。
JS引擎：解析和執行 JavaScript 來實現邏輯和控制 DOM 進行交互。
最開始渲染引擎和JS引擎並沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向於渲染引擎。
HTML和DOM的關系
- HTML只是一個字符串
- DOM由HTML解析而來
- JS可以維護DOM
主流瀏覽器及其內核
| 瀏覽器 | 內核 | 備注 |
| IE | trident | IE、獵豹、360、百度 |
| firefox | gecko | |
| Safari | webkit | 從 Safari 推出之時，它的渲染引擎就是webkit，一提到webkit，首先想到的便是chrome，webkit的鼻祖其實是Safari |
| chrome | Chromium/Blink | 在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置於 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。大部分國產瀏覽器最新版都采用 Blink 內核。二次開發 |
| Opera | blink | Opera內核原為：Presto，現在跟隨chrome用blink內核 |
簡述一下你對HTML語義化的理解？
- 用正確的標簽做正確的事情。
- html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器，搜索引擎解析
- 即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的
- 搜索引擎的爬蟲也依賴於 html 標記來確定上下文和各個關鍵字的權重，利於SEO
- 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解
描述一下 cookies、sessionStorage 和 localStorage的區別
- cookie 是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）
- cookie 數據始終在同源的http請求中攜帶（即使不需要），即會在瀏覽器和服務器間來回傳遞。
- sessionStorage 和 localStorage 不會自動把數據發給服務器，僅會在本地保存。
- 存儲大小：
- cookie 數據大小不能超過 4k
- sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比 cookie 大得多，可以達到 5M 或更大
- 有效期（生命周期）
- localStorage：存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據
- sessionStorage：數據在當前瀏覽器關閉后自動刪除
- cookie：設置的 cookie 過期時間之前一直有效，即使窗口或瀏覽器關閉
- 共享
- sessionStorage不能共享，localStorage在同源文檔之間共享，cookie在同源且符合path規則的文檔之間共享
為什么我們要棄用table標簽
table的缺點在於服務器把代碼加載到本地服務器的過程中，本來是加載一行執行一行，但是table標簽是里面的東西全都下載完之后才會顯示出來，那么如果圖片很多的話就會導致網頁一直加載不出來，除非所有的圖片和內容都加載完。如果要等到所有的圖片全部加載完之后才顯示出來會影響網頁的性能，所以table標簽現在我們基本放棄使用了。
移動端項目需要注意的4個問題
meta中設置viewport
阻止用戶手滑放大或縮小頁面，需要在 index.html 中添加meta元素，設置viewport。
CSS樣式統一問題
我們需要重置頁面樣式，因為在不同的手機瀏覽器上，默認的css樣式不是統一的。解決方法：使用reset.css重置所有元素的默認樣式
一像素邊框問題
有的手機分辨率比較高，是2倍屏或3倍屏，手機上的瀏覽器就會把CSS中的1像素值展示為2個或3個物理寬度。解決方法：添加一個border.css庫，將利用scroll縮放的原理將邊框重置。當我們需要使用一像素邊框時只需要在標簽上添加類名，如設置底部一像素邊框就在標簽上加入“border-bottom”的class名
300毫秒點擊延遲問題
在移動端開發中，某些機型上使用click事件會延遲300ms才執行，這樣影響了用戶體驗。解決方法：引入fastclick.js
HTML5 的 form 如何關閉自動補全功能？
給不想要提示的 form 或某個 input 設置為 autocomplete = off
如何實現瀏覽器多個標簽之間的通信？
- WebSocket、ShareWorker
- 也可以調用 localStorage、cookies 等本地存儲方式
localStorage 另一個瀏覽器上下文里被添加、修改、或刪除時，它都會觸發一個storage事件，我們通過監聽事件，控制它的值來進行頁面信息通信；
webSocket 如何兼容低瀏覽器？
- Adobe Flash Socket
- ActiveXHTMLFile(IE)
- 基於 multipart 編碼發送 XHR
- 基於長輪詢的 XHR
html5 有哪些新特性、移除了哪些元素？如何處理 HTML5 新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5
- HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等。功能的增加：
- 繪畫canvas
- 用於媒介播放的 video 和 audio 元素
- 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
- sessionStorage 的數據在瀏覽器關閉后自動刪除
- 語義化更好的內容元素，比如 article、footer、header、nav、section
- 表單控件： calendar、date、time、email、url、search
- 新的技術 webworker、websocket、Geolocation
- 移出的元素：
- 純表現的元素：basefont、big、center、font、s、strike、u
- 對可用性產生負面影響的元素：frame、frameset、noframes
- 支持 HTML5 新標簽：
- IE8/IE7/IE6支持通過 document.createElement 方法產生的標簽
- 可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽
- 瀏覽器支持新標簽后，還需要添加標簽默認的樣式
- 如何區分 HTML5：DOCTYPE 聲明\新增的結構元素\功能元素
HTML5 的離線儲存怎么使用，解釋工作原理
在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。
原理：HTML5 的離線緩存是基於一個新建的 .appcache 文件的緩存機制（不是存儲技術），通過這個文件上的解析清單離線存儲資源，這些資源就會像 cookie 一樣被存儲下來。之后當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用：
- 頁面頭部像下面一樣加入一個 manifest 的屬性；
- 在 cache.manifest 文件的編寫離線存儲的資源
CACHE MANIFEST #v1.0 CACHE: js/app.js css/style.css NETWORK: assets/logo.png FALLBACK: /html5/ /404.html
瀏覽器是怎么對 HTML5 的離線存儲資源進行管理和加載的
- 在線的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問 app，那么瀏覽器就會根據 manifest 文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過 app 並且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源並進行離線存儲。
- 離線的情況下，瀏覽器就直接使用離線存儲的資源
在離線狀態時，操作 window.applicationCache 進行需求實現
iframe 有哪些缺點
- iframe 會阻塞主頁面的Onload事件
- 搜索引擎的檢索程序無法解讀這種頁面，不利於SEO
- iframe和主頁面共享連接池，而瀏覽器對相同域的鏈接有限制，所以會影響頁面的並行加載
使用iframe 之前需要考慮這兩個缺點，如果需要使用 iframe，最好是通過JavaScript
動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
Label的作用是什么？是怎么用的？
label 標簽來定義表單控制間的關系，當用戶選擇該標簽是，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
頁面可見性可以有那些用途
- 通過visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等
- 在頁面被切換到其他后台進程的時候，自動暫停音樂或視頻的播放
如何在頁面上實現一個圓形的可點擊區域？
- map+area 或者 svg
- border-radius
- 純js實現，需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等