HTML 已經(jīng)更新到了 HTML5 了，那么 HTML5的面試題你也應(yīng)該知道，本篇文章為你提供參考。
1、doctype的作用是什么？它的混雜模式和標(biāo)準(zhǔn)模式怎么區(qū)分？它們都有什么意義？
doctype 作用是告訴瀏覽器使用了哪個(gè)版本的 HTML 規(guī)范來(lái)渲染文檔。DOCTYPE 形式不正確或不存在會(huì)導(dǎo)致 HTML 文檔以混雜模式呈現(xiàn)。
標(biāo)準(zhǔn)模式（Standards mode）是以瀏覽器所支持的最高標(biāo)準(zhǔn)運(yùn)行；混雜模式（Quirks mode）中頁(yè)面是一種比較寬松的向后兼容的方式顯示。
2、 HTML5為什么只需要寫(xiě) ？
HTML5不基于 SGML（Standard Generalized Markup Language 標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言），因此不需要對(duì) DTD（DTD 文檔類型定義）進(jìn)行引用，但是需要 DOCTYPE 來(lái)規(guī)范瀏覽器行為。
HTML4.01 基于 SGML，所以需要引用 DTD。才能告知瀏覽器文檔所使用的文檔類型，如下：
3、 行內(nèi)元素有哪些？塊級(jí)元素有哪些？
行內(nèi)元素： input、select、a、span、img
塊級(jí)元素：dl、dt、dd、h1、pdiv、ul、ol、li
4、 頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？
相同的地方，都是外部引用 CSS 方式，區(qū)別：
link 是 xhtml 標(biāo)簽，除了加載 css 外，還可以定義 RSS 等其他事務(wù)；@import 屬于 CSS 范疇，只能加載 CSS
link 引用 CSS 時(shí)候，頁(yè)面載入時(shí)同時(shí)加載；@import 需要在頁(yè)面完全加載以后加載，而且@import 被引用的 CSS 會(huì)等到引用它的CSS 文件被加載完才加載
link 是 xhtml 標(biāo)簽，無(wú)兼容問(wèn)題；@import 是在 css2.1 提出來(lái)的，低版本的瀏覽器不支持
link 支持使用 javascript 控制去改變樣式，而@import 不支持
link 方式的樣式的權(quán)重高于@import 的權(quán)重
import 在 html 使用時(shí)候需要標(biāo)簽
5、 無(wú)樣式內(nèi)容閃爍（FOUC）Flash of Unstyle Content
@import 導(dǎo)入 CSS 文件會(huì)等到文檔加載完后再加載 CSS 樣式表。因此，在頁(yè)面 DOM 加載完成到 CSS 導(dǎo)入完成之間會(huì)有一段時(shí)間頁(yè)面上的內(nèi)容是沒(méi)有樣式的。
解決方法：使用 link 標(biāo)簽加載 CSS 樣式文件。因?yàn)?link 是順序加載的，這樣頁(yè)面會(huì)等到 CSS 下載完之后再下載 HTML 文件，這樣先布局好，就不會(huì)出現(xiàn) FOUC 問(wèn)題。
6、 介紹一下你對(duì)瀏覽器內(nèi)核的理解？
主要分成兩部分：渲染引擎(Layout Engine 或 Rendering Engine)和 JS 引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。
JS引擎：解析和執(zhí)行 javascript 來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。
最開(kāi)始渲染引擎和 JS 引擎并沒(méi)有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。
7、 常見(jiàn)的瀏覽器內(nèi)核有哪些？
Trident( MSHTML )：IE MaxThon TT The World 360 搜狗瀏覽器
Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
Presto：Opera7及以上(Opera內(nèi)核原為：Presto，現(xiàn)為：Blink)
Webkit：Safari Chrome
8、 HTML5有哪些新特性,移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分HTML和HTML5
新增加了圖像、位置、存儲(chǔ)、多任務(wù)等功能。
新增元素：canvas 用于媒介回放的 video 和 audio 元素
本地離線存儲(chǔ)。localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
語(yǔ)意化更好的內(nèi)容元素，比如 article footer header nav section
位置 API：Geolocation
表單控件，calendar date time email url search
新的技術(shù)：web worker(web worker是運(yùn)行在后臺(tái)的 JavaScript，獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊、選取內(nèi)容等等，而此時(shí) web worker 在后臺(tái)運(yùn)行) web socket
拖放API：drag、drop
移除的元素：
純表現(xiàn)的元素：basefont big center font s strike tt u
性能較差元素：frame frameset noframes
區(qū)分：
DOCTYPE聲明的方式是區(qū)分重要因素
根據(jù)新增加的結(jié)構(gòu)、功能來(lái)區(qū)分
9、 簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解？
去掉或丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)。
有利于 SEO 和搜索引擎建立良好溝通，有助于爬蟲(chóng)抓取更多的信息，爬蟲(chóng)依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
方便其它設(shè)備解析。
便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化根據(jù)可讀性。
10、 HTML5的文件離線儲(chǔ)存怎么使用，工作原理是什么？
在線情況下，瀏覽器發(fā)現(xiàn) HTML 頭部有manifest 屬性，它會(huì)請(qǐng)求 manifest 文件，如果是第一次訪問(wèn)，那么瀏覽器就會(huì)根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源，并進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問(wèn)過(guò)并且資源已經(jīng)離線存儲(chǔ)了，那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面。然后瀏覽器會(huì)對(duì)比新的 manifest 文件與舊的 manifest 文件，如果文件沒(méi)有發(fā)生改變，就不會(huì)做任何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源，并且進(jìn)行離線存儲(chǔ)。
11、 cookies，sessionStorage和localStorage的區(qū)別？
共同點(diǎn)：都是保存在瀏覽器端，且是同源的。
區(qū)別：
cookies 是為了標(biāo)識(shí)用戶身份而存儲(chǔ)在用戶本地終端上的數(shù)據(jù)，始終在同源 http 請(qǐng)求中攜帶，即 cookies 在瀏覽器和服務(wù)器間來(lái)回傳遞，而 sessionstorage 和 localstorage 不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲(chǔ)大小的限制不同。cookie 保存的數(shù)據(jù)很小，不能超過(guò)4k，而 sessionstorage 和 localstorage 保存的數(shù)據(jù)大，可達(dá)到5M。
數(shù)據(jù)的有效期不同。cookie 在設(shè)置的 cookie 過(guò)期時(shí)間之前一直有效，即使窗口或者瀏覽器關(guān)閉。sessionstorage 僅在瀏覽器窗口關(guān)閉之前有效。localstorage 始終有效，窗口和瀏覽器關(guān)閉也一直保存，用作長(zhǎng)久數(shù)據(jù)保存。
作用域不同。cookie 在所有的同源窗口都是共享；sessionstorage 不在不同的瀏覽器共享，即使同一頁(yè)面；localstorage 在所有同源窗口都是共享
12、 iframe框架有那些優(yōu)缺點(diǎn)？
優(yōu)點(diǎn)：
iframe 能夠原封不動(dòng)的把嵌入的網(wǎng)頁(yè)展現(xiàn)出來(lái)。
如果有多個(gè)網(wǎng)頁(yè)引用 iframe，那么你只需要修改 iframe 的內(nèi)容，就可以實(shí)現(xiàn)調(diào)用的每一個(gè)頁(yè)面內(nèi)容的更改，方便快捷。
網(wǎng)頁(yè)如果為了統(tǒng)一風(fēng)格，頭部和版本都是一樣的，就可以寫(xiě)成一個(gè)頁(yè)面，用 iframe 來(lái)嵌套，可以增加代碼的可重用。
如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告，這些問(wèn)題可以由 iframe 來(lái)解決。
缺點(diǎn)：
搜索引擎的爬蟲(chóng)程序無(wú)法解讀這種頁(yè)面
框架結(jié)構(gòu)中出現(xiàn)各種滾動(dòng)條
使用框架結(jié)構(gòu)時(shí)，保證設(shè)置正確的導(dǎo)航鏈接。
iframe 頁(yè)面會(huì)增加服務(wù)器的 http 請(qǐng)求
13、 label的作用是什么? 是怎么用的?
label 標(biāo)簽用來(lái)定義表單控件間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。label 中有兩個(gè)屬性是非常有用的, FOR 和 ACCESSKEY。
FOR 屬性功能：表示label標(biāo)簽要綁定的HTML元素，你點(diǎn)擊這個(gè)標(biāo)簽的時(shí)候，所綁定的元素將獲取焦點(diǎn)。
ACCESSKEY 屬性功能：表示訪問(wèn) label 標(biāo)簽所綁定的元素的熱鍵，當(dāng)您按下熱鍵，所綁定的元素將獲取焦點(diǎn)。
14、 HTML5的form如何關(guān)閉自動(dòng)完成功能？
HTML 的輸入框可以擁有自動(dòng)完成的功能，當(dāng)你往輸入框輸入內(nèi)容的時(shí)候，瀏覽器會(huì)從你以前的同名輸入框的歷史記錄中查找出類似的內(nèi)容并列在輸入框下面，這樣就不用全部輸入進(jìn)去了，直接選擇列表中的項(xiàng)目就可以了。但有時(shí)候我們希望關(guān)閉輸入框的自動(dòng)完成功能，例如當(dāng)用戶輸入內(nèi)容的時(shí)候，我們希望使用 AJAX 技術(shù)從數(shù)據(jù)庫(kù)搜索并列舉而不是在用戶的歷史記錄中搜索。
方法：
在 IE 的 internet 選項(xiàng)菜單中里的自動(dòng)完成里面設(shè)置
設(shè)置 form 輸入框的 autocomplete 為 on 或者 off 來(lái)來(lái)開(kāi)啟輸入框的自動(dòng)完成功能
15、 如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?
WebSocket SharedWorker
也可以調(diào)用 localstorge、cookies 等本地存儲(chǔ)方式。 localstorge 在另一個(gè)瀏覽上下文里被添加、修改或刪除時(shí)，它都會(huì)觸發(fā)一個(gè)事件，我們通過(guò)監(jiān)聽(tīng)事件，控制它的值來(lái)進(jìn)行頁(yè)面信息通信。
注意：Safari 在無(wú)痕模式下設(shè)置 localstorge 值時(shí)會(huì)拋出 QuotaExceededError 的異常
16、 webSocket如何兼容低瀏覽器？
Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 編碼發(fā)送 XHR 基于長(zhǎng)輪詢的 XHR
引用 WebSocket.js 這個(gè)文件來(lái)兼容低版本瀏覽器。
17、 頁(yè)面可見(jiàn)性（Page Visibility）API 可以有哪些用途？
通過(guò) visibility state 的值得檢測(cè)頁(yè)面當(dāng)前是否可見(jiàn)，以及打開(kāi)網(wǎng)頁(yè)的時(shí)間。
在頁(yè)面被切換到其他后臺(tái)進(jìn)程時(shí)，自動(dòng)暫停音樂(lè)或視頻的播放。
18、 如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？
map+area或者svg
border-radius
純 js 實(shí)現(xiàn)，一個(gè)點(diǎn)不在圓上的算法
19、 網(wǎng)頁(yè)驗(yàn)證碼是干嘛的，是為了解決什么安全問(wèn)題？
區(qū)分用戶是計(jì)算機(jī)還是人的程序;
可以防止惡意破解密碼、刷票、論壇灌水；
20、title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？
title 屬性沒(méi)有明確意義，只表示標(biāo)題；?h1?表示層次明確的標(biāo)題，對(duì)頁(yè)面信息的抓取也有很大的影響
strong 標(biāo)明重點(diǎn)內(nèi)容，語(yǔ)氣加強(qiáng)含義；?b?是無(wú)意義的視覺(jué)表示
em 表示強(qiáng)調(diào)文本；?i ?是斜體，是無(wú)意義的視覺(jué)表示
視覺(jué)樣式標(biāo)簽：b i u s
語(yǔ)義樣式標(biāo)簽：strong em ins del code
21、元素的alt和title有什么異同？
在 alt 和 title 同時(shí)設(shè)置的時(shí)候，?alt? 作為圖片的替代文字出現(xiàn)，?title? 是圖片的解釋文字。
以上就是小編整理的關(guān)于 HTML5的面試題及答案。
轉(zhuǎn)載自：https://www.cnblogs.com/CaseyWei/
