20道HTML基礎面試題（附答案）
以下是我整理的一些HTML的基礎面試體，並自己整理了答案。
https://segmentfault.com/a/1190000013311880
1 DOCTYPE有什麼作用？標準模式與混雜模式如何區分？它們有何意義?
告訴瀏覽器使用哪個版本的HTML規範來渲染文件。DOCTYPE不存在或形式不正確會導致HTML文件以混雜模式呈現。
標準模式（Standards mode）以瀏覽器支援的最高標準執行；混雜模式（Quirks mode）中頁面是一種比較寬鬆的向後相容的方式顯示。
2 HTML5為什麼只需要寫 <!DOCTYPE HTML>？
HTML5不基於SGML（Standard Generalized Markup Language 標準通用標記語言），因此不需要對DTD（DTD 文件型別定義）進行引用，但是需要DOCTYPE來規範瀏覽器行為。
HTML4.01基於SGML，所以需要引用DTD。才能告知瀏覽器文件所使用的文件型別，如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a span img input select
塊級元素：div ul ol li dl dt dd h1 p
空元素：<br> <hr> <link> <meta>
4 頁面匯入樣式時，使用link和@import有什麼區別？
相同的地方，都是外部引用CSS方式，區別：
- link是xhtml標籤，除了載入css外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能載入CSS
- link引用CSS時候，頁面載入時同時載入；@import需要在頁面完全載入以後載入，而且@import被引用的CSS會等到引用它的CSS檔案被載入完才載入
- link是xhtml標籤，無相容問題；@import是在css2.1提出來的，低版本的瀏覽器不支援
- link支援使用javascript控制去改變樣式，而@import不支援
- link方式的樣式的權重高於@import的權重
- import在html使用時候需要
<style type="text/css">標籤
5 無樣式內容閃爍（FOUC）Flash of Unstyle Content
@import匯入CSS檔案會等到文件載入完後再載入CSS樣式表。因此，在頁面DOM載入完成到CSS匯入完成之間會有一段時間頁面上的內容是沒有樣式的。
解決方法：使用link標籤載入CSS樣式檔案。因為link是順序載入的，這樣頁面會等到CSS下載完之後再下載HTML檔案，這樣先佈局好，就不會出現FOUC問題。
6 介紹一下你對瀏覽器核心的理解？
主要分成兩部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。
JS引擎：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎。
7 常見的瀏覽器核心有哪些？
- Trident( MSHTML )：IE MaxThon TT The World 360 搜狗瀏覽器
- Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
- Presto：Opera7及以上(Opera核心原為：Presto，現為：Blink)
- Webkit：Safari Chrome
8 HTML5有哪些新特性,移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分HTML和HTML5
新增加了影象、位置、儲存、多工等功能。
新增元素：
- canvas
- 用於媒介回放的video和audio元素
- 本地離線儲存。localStorage長期儲存資料，瀏覽器關閉後資料不丟失;sessionStorage的資料在瀏覽器關閉後自動刪除
- 語意化更好的內容元素，比如 article footer header nav section
- 位置API：Geolocation
- 表單控制元件，calendar date time email url search
- 新的技術：web worker(web worker是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能。您可以繼續做任何願意做的事情：點選、選取內容等等，而此時 web worker 在後臺執行) web socket
- 拖放API：drag、drop
移除的元素：
- 純表現的元素：basefont big center font s strike tt u
- 效能較差元素：frame frameset noframes
區分：
- DOCTYPE宣告的方式是區分重要因素
- 根據新增加的結構、功能來區分
9 簡述一下你對HTML語義化的理解？
- 去掉或丟失樣式的時候能夠讓頁面呈現出清晰的結構。
- 有利於SEO和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的資訊，爬蟲依賴於標籤來確定上下文和各個關鍵字的權重。
- 方便其它裝置解析。
- 便於團隊開發和維護，語義化根據可讀性。
10 HTML5的檔案離線儲存怎麼使用，工作原理是什麼？
線上情況下，瀏覽器發現HTML頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源，並進行離線儲存。如果已經訪問過並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面。然後瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不會做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源，並且進行離線儲存。例如，
在頁面頭部加入manifest屬性
<html manifest='cache.manifest'>
在cache.manifest檔案中編寫離線儲存的資源
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
Resourse/logo.png
FALLBACK:
//offline.html
11 cookies，sessionStorage和localStorage的區別？
共同點：都是儲存在瀏覽器端，且是同源的。
區別：
- cookies是為了標識使用者身份而儲存在使用者本地終端上的資料，始終在同源http請求中攜帶，即cookies在瀏覽器和伺服器間來回傳遞，而sessionstorage和localstorage不會自動把資料發給伺服器，僅在本地儲存。
- 儲存大小的限制不同。cookie儲存的資料很小，不能超過4k，而sessionstorage和localstorage儲存的資料大，可達到5M。
- 資料的有效期不同。cookie在設定的cookie過期時間之前一直有效，即使視窗或者瀏覽器關閉。sessionstorage僅在瀏覽器視窗關閉之前有效。localstorage始終有效，視窗和瀏覽器關閉也一直儲存，用作長久資料儲存。
- 作用域不同。cookie在所有的同源視窗都是共享；sessionstorage不在不同的瀏覽器共享，即使同一頁面；localstorage在所有同源視窗都是共享
12 iframe框架有那些優缺點？
優點：
- iframe能夠原封不動的把嵌入的網頁展現出來。
- 如果有多個網頁引用iframe，那麼你只需要修改iframe的內容，就可以實現呼叫的每一個頁面內容的更改，方便快捷。
- 網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來巢狀，可以增加程式碼的可重用。
- 如果遇到載入緩慢的第三方內容如圖示和廣告，這些問題可以由iframe來解決。
缺點：
- 搜尋引擎的爬蟲程式無法解讀這種頁面
- 框架結構中出現各種滾動條
- 使用框架結構時，保證設定正確的導航連結。
- iframe頁面會增加伺服器的http請求
13 label的作用是什麼? 是怎麼用的?
label標籤用來定義表單控制元件間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。label 中有兩個屬性是非常有用的, FOR和ACCESSKEY。
FOR屬性功能：表示label標籤要繫結的HTML元素，你點選這個標籤的時候，所繫結的元素將獲取焦點。例如，
<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY屬性功能：表示訪問label標籤所繫結的元素的熱鍵，當您按下熱鍵，所繫結的元素將獲取焦點。例如，
<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">
14 HTML5的form如何關閉自動完成功能？
HTML的輸入框可以擁有自動完成的功能，當你往輸入框輸入內容的時候，瀏覽器會從你以前的同名輸入框的歷史記錄中查找出類似的內容並列在輸入框下面，這樣就不用全部輸入進去了，直接選擇列表中的專案就可以了。但有時候我們希望關閉輸入框的自動完成功能，例如當用戶輸入內容的時候，我們希望使用AJAX技術從資料庫搜尋並列舉而不是在使用者的歷史記錄中搜索。
方法：
- 在IE的internet選項選單中裡的自動完成裡面設定
- 設定form輸入框的autocomplete為on或者off來來開啟輸入框的自動完成功能
15 如何實現瀏覽器內多個標籤頁之間的通訊?
- WebSocket SharedWorker
- 也可以呼叫 localstorge、cookies 等本地儲存方式。 localstorge 在另一個瀏覽上下文裡被新增、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面資訊通訊。
注意：Safari 在無痕模式下設定 localstorge 值時會丟擲QuotaExceededError 的異常
16 webSocket如何相容低瀏覽器？
- Adobe Flash Socket ActiveX HTMLFile (IE) 基於 multipart 編碼傳送 XHR 基於長輪詢的 XHR
- 引用WebSocket.js這個檔案來相容低版本瀏覽器。
16 頁面可見性（Page Visibility）API 可以有哪些用途？
- 通過visibility state的值得檢測頁面當前是否可見，以及開啟網頁的時間。
- 在頁面被切換到其他後臺程序時，自動暫停音樂或視訊的播放。
17 如何在頁面上實現一個圓形的可點選區域？
- map+area或者svg
- border-radius
- 純js實現，一個點不在圓上的演算法
18 實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirks mode和CSS Compat模式下都能保持同一效果
<div style="height:1px;overflow:hidden;background:red"></div>
19 網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
- 區分使用者是計算機還是人的程式;
- 可以防止惡意破解密碼、刷票、論壇灌水；
20 title與h1的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義，只表示標題；h1表示層次明確的標題，對頁面資訊的抓取也有很大的影響
strong標明重點內容，語氣加強含義；b是無意義的視覺表示
em表示強調文字；i是斜體，是無意義的視覺表示
視覺樣式標籤：b i u s
語義樣式標籤：strong em ins del code
21 元素的alt和title有什麼異同？
在alt和title同時設定的時候，alt作為圖片的替代文字出現，title是圖片的解釋文字。