2020年HTML5面試題及答案

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

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

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

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

2、 HTML5為什么只需要寫 ？

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

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

3、 行內元素有哪些？塊級元素有哪些？

行內元素： input、select、a、span、img

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

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

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

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 使用時候需要標簽

5、 無樣式內容閃爍（FOUC）Flash of Unstyle Content

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

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

6、 介紹一下你對瀏覽器內核的理解？

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

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

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

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

7、 常見的瀏覽器內核有哪些？

Trident( MSHTML )：IE MaxThon TT The World 360 搜狗瀏覽器

Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey

Presto：Opera7及以上(Opera內核原為：Presto，現(xiàn)為：Blink)

Webkit：Safari Chrome

8、 HTML5有哪些新特性,移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5

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

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

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

語意化更好的內容元素，比如 article footer header nav section

位置 API：Geolocation

表單控件，calendar date time email url search

新的技術：web worker(web worker是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續(xù)做任何愿意做的事情：點擊、選取內容等等，而此時 web worker 在后臺運行) web socket

拖放API：drag、drop

移除的元素：

純表現(xiàn)的元素：basefont big center font s strike tt u

性能較差元素：frame frameset noframes

區(qū)分：

DOCTYPE聲明的方式是區(qū)分重要因素

根據(jù)新增加的結構、功能來區(qū)分

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

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

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

方便其它設備解析。

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

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

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

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

共同點：都是保存在瀏覽器端，且是同源的。

區(qū)別：

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

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

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

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

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

優(yōu)點：

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

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

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

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

缺點：

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

框架結構中出現(xiàn)各種滾動條

使用框架結構時，保證設置正確的導航鏈接。

iframe 頁面會增加服務器的 http 請求

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

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

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

ACCESSKEY 屬性功能：表示訪問 label 標簽所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。

14、 HTML5的form如何關閉自動完成功能？

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

方法：

在 IE 的 internet 選項菜單中里的自動完成里面設置

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

15、 如何實現(xiàn)瀏覽器內多個標簽頁之間的通信?

WebSocket SharedWorker

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

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

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

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

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

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

通過 visibility state 的值得檢測頁面當前是否可見，以及打開網頁的時間。

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

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

map+area或者svg

border-radius

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

19、 網頁驗證碼是干嘛的，是為了解決什么安全問題？

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

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

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

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

strong 標明重點內容，語氣加強含義；?b?是無意義的視覺表示

em 表示強調文本；?i ?是斜體，是無意義的視覺表示

視覺樣式標簽：b i u s

語義樣式標簽：strong em ins del code

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

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

以上就是小編整理的關于 HTML5的面試題及答案。

轉載自：https://www.cnblogs.com/CaseyWei/