2020年HTML5面試題及答案

HTML 已經(jīng)更新到了 HTML5 了，那么 HTML5的面試題你也應(yīng)該知道，本篇文章為你提供參考。

1、doctype的作用是什么？它的混雜模式和標(biāo)準(zhǔn)模式怎么區(qū)分？它們都有什么意義？

doctype 作用是告訴瀏覽器使用了哪個版本的 HTML 規(guī)范來渲染文檔。DOCTYPE 形式不正確或不存在會導(dǎo)致 HTML 文檔以混雜模式呈現(xiàn)。

標(biāo)準(zhǔn)模式（Standards mode）是以瀏覽器所支持的最高標(biāo)準(zhǔn)運(yùn)行；混雜模式（Quirks mode）中頁面是一種比較寬松的向后兼容的方式顯示。

2、 HTML5為什么只需要寫 ？

HTML5不基于 SGML（Standard Generalized Markup Language 標(biāo)準(zhǔn)通用標(biāo)記語言），因此不需要對 DTD（DTD 文檔類型定義）進(jìn)行引用，但是需要 DOCTYPE 來規(guī)范瀏覽器行為。

HTML4.01 基于 SGML，所以需要引用 DTD。才能告知瀏覽器文檔所使用的文檔類型，如下：

3、 行內(nèi)元素有哪些？塊級元素有哪些？

行內(nèi)元素： input、select、a、span、img

塊級元素：dl、dt、dd、h1、pdiv、ul、ol、li 

4、 頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

相同的地方，都是外部引用 CSS 方式，區(qū)別：

link 是 xhtml 標(biāo)簽，除了加載 css 外，還可以定義 RSS 等其他事務(wù)；@import 屬于 CSS 范疇，只能加載 CSS

link 引用 CSS 時候，頁面載入時同時加載；@import 需要在頁面完全加載以后加載，而且@import 被引用的 CSS 會等到引用它的CSS 文件被加載完才加載

link 是 xhtml 標(biāo)簽，無兼容問題；@import 是在 css2.1 提出來的，低版本的瀏覽器不支持

link 支持使用 javascript 控制去改變樣式，而@import 不支持

link 方式的樣式的權(quán)重高于@import 的權(quán)重

import 在 html 使用時候需要標(biāo)簽

5、 無樣式內(nèi)容閃爍（FOUC）Flash of Unstyle Content

@import 導(dǎo)入 CSS 文件會等到文檔加載完后再加載 CSS 樣式表。因此，在頁面 DOM 加載完成到 CSS 導(dǎo)入完成之間會有一段時間頁面上的內(nèi)容是沒有樣式的。

解決方法：使用 link 標(biāo)簽加載 CSS 樣式文件。因?yàn)?link 是順序加載的，這樣頁面會等到 CSS 下載完之后再下載 HTML 文件，這樣先布局好，就不會出現(xiàn) FOUC 問題。

6、 介紹一下你對瀏覽器內(nèi)核的理解？

主要分成兩部分：渲染引擎(Layout Engine 或 Rendering Engine)和 JS 引擎。

渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。

JS引擎：解析和執(zhí)行 javascript 來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果。

最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。

7、 常見的瀏覽器內(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)簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5

新增加了圖像、位置、存儲、多任務(wù)等功能。

新增元素：canvas 用于媒介回放的 video 和 audio 元素

本地離線存儲。localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除

語意化更好的內(nèi)容元素，比如 article footer header nav section

位置 API：Geolocation

表單控件，calendar date time email url search

新的技術(shù)：web worker(web worker是運(yùn)行在后臺的 JavaScript，獨(dú)立于其他腳本，不會影響頁面的性能。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊、選取內(nèi)容等等，而此時 web worker 在后臺運(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)、功能來區(qū)分

9、 簡述一下你對HTML語義化的理解？

去掉或丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)。

有利于 SEO 和搜索引擎建立良好溝通，有助于爬蟲抓取更多的信息，爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重。

方便其它設(shè)備解析。

便于團(tuán)隊開發(fā)和維護(hù)，語義化根據(jù)可讀性。

10、 HTML5的文件離線儲存怎么使用，工作原理是什么？

在線情況下，瀏覽器發(fā)現(xiàn) HTML 頭部有manifest 屬性，它會請求 manifest 文件，如果是第一次訪問，那么瀏覽器就會根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源，并進(jìn)行離線存儲。如果已經(jīng)訪問過并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面。然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發(fā)生改變，就不會做任何操作，如果文件改變了，那么就會重新下載文件中的資源，并且進(jìn)行離線存儲。

11、 cookies，sessionStorage和localStorage的區(qū)別？

共同點(diǎn)：都是保存在瀏覽器端，且是同源的。

區(qū)別：

cookies 是為了標(biāo)識用戶身份而存儲在用戶本地終端上的數(shù)據(jù)，始終在同源 http 請求中攜帶，即 cookies 在瀏覽器和服務(wù)器間來回傳遞，而 sessionstorage 和 localstorage 不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。

存儲大小的限制不同。cookie 保存的數(shù)據(jù)很小，不能超過4k，而 sessionstorage 和 localstorage 保存的數(shù)據(jù)大，可達(dá)到5M。

數(shù)據(jù)的有效期不同。cookie 在設(shè)置的 cookie 過期時間之前一直有效，即使窗口或者瀏覽器關(guān)閉。sessionstorage 僅在瀏覽器窗口關(guān)閉之前有效。localstorage 始終有效，窗口和瀏覽器關(guān)閉也一直保存，用作長久數(shù)據(jù)保存。

作用域不同。cookie 在所有的同源窗口都是共享；sessionstorage 不在不同的瀏覽器共享，即使同一頁面；localstorage 在所有同源窗口都是共享

12、 iframe框架有那些優(yōu)缺點(diǎn)？

優(yōu)點(diǎn)：

iframe 能夠原封不動的把嵌入的網(wǎng)頁展現(xiàn)出來。

如果有多個網(wǎng)頁引用 iframe，那么你只需要修改 iframe 的內(nèi)容，就可以實(shí)現(xiàn)調(diào)用的每一個頁面內(nèi)容的更改，方便快捷。

網(wǎng)頁如果為了統(tǒng)一風(fēng)格，頭部和版本都是一樣的，就可以寫成一個頁面，用 iframe 來嵌套，可以增加代碼的可重用。

如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告，這些問題可以由 iframe 來解決。

缺點(diǎn)：

搜索引擎的爬蟲程序無法解讀這種頁面

框架結(jié)構(gòu)中出現(xiàn)各種滾動條

使用框架結(jié)構(gòu)時，保證設(shè)置正確的導(dǎo)航鏈接。

iframe 頁面會增加服務(wù)器的 http 請求

13、 label的作用是什么? 是怎么用的?

label 標(biāo)簽用來定義表單控件間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。label 中有兩個屬性是非常有用的, FOR 和 ACCESSKEY。 

FOR 屬性功能：表示label標(biāo)簽要綁定的HTML元素，你點(diǎn)擊這個標(biāo)簽的時候，所綁定的元素將獲取焦點(diǎn)。

ACCESSKEY 屬性功能：表示訪問 label 標(biāo)簽所綁定的元素的熱鍵，當(dāng)您按下熱鍵，所綁定的元素將獲取焦點(diǎn)。

14、 HTML5的form如何關(guān)閉自動完成功能？

HTML 的輸入框可以擁有自動完成的功能，當(dāng)你往輸入框輸入內(nèi)容的時候，瀏覽器會從你以前的同名輸入框的歷史記錄中查找出類似的內(nèi)容并列在輸入框下面，這樣就不用全部輸入進(jìn)去了，直接選擇列表中的項(xiàng)目就可以了。但有時候我們希望關(guān)閉輸入框的自動完成功能，例如當(dāng)用戶輸入內(nèi)容的時候，我們希望使用 AJAX 技術(shù)從數(shù)據(jù)庫搜索并列舉而不是在用戶的歷史記錄中搜索。

方法：

在 IE 的 internet 選項(xiàng)菜單中里的自動完成里面設(shè)置

設(shè)置 form 輸入框的 autocomplete 為 on 或者 off 來來開啟輸入框的自動完成功能

15、 如何實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?

WebSocket SharedWorker

也可以調(diào)用 localstorge、cookies 等本地存儲方式。 localstorge 在另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發(fā)一個事件，我們通過監(jiān)聽事件，控制它的值來進(jìn)行頁面信息通信。

注意：Safari 在無痕模式下設(shè)置 localstorge 值時會拋出 QuotaExceededError 的異常

16、 webSocket如何兼容低瀏覽器？

Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 編碼發(fā)送 XHR 基于長輪詢的 XHR

引用 WebSocket.js 這個文件來兼容低版本瀏覽器。

17、 頁面可見性（Page Visibility）API 可以有哪些用途？

通過 visibility state 的值得檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時間。

在頁面被切換到其他后臺進(jìn)程時，自動暫停音樂或視頻的播放。

18、 如何在頁面上實(shí)現(xiàn)一個圓形的可點(diǎn)擊區(qū)域？

map+area或者svg

border-radius

純 js 實(shí)現(xiàn)，一個點(diǎn)不在圓上的算法

19、 網(wǎng)頁驗(yàn)證碼是干嘛的，是為了解決什么安全問題？

區(qū)分用戶是計算機(jī)還是人的程序;

可以防止惡意破解密碼、刷票、論壇灌水；

20、title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

title 屬性沒有明確意義，只表示標(biāo)題；?h1?表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響

strong 標(biāo)明重點(diǎn)內(nèi)容，語氣加強(qiáng)含義；?b?是無意義的視覺表示

em 表示強(qiáng)調(diào)文本；?i ?是斜體，是無意義的視覺表示

視覺樣式標(biāo)簽：b i u s

語義樣式標(biāo)簽：strong em ins del code

21、元素的alt和title有什么異同？

在 alt 和 title 同時設(shè)置的時候，?alt? 作為圖片的替代文字出現(xiàn)，?title? 是圖片的解釋文字。

以上就是小編整理的關(guān)于 HTML5的面試題及答案。

轉(zhuǎn)載自：https://www.cnblogs.com/CaseyWei/