明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML基礎(chǔ)面試題總結(jié)

發(fā)表時間：2023-09-17 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本文主要和大家分享HTML基礎(chǔ)面試題及答案，希望能幫助到大家。1 DOCTYPE有什么作用？標(biāo)準(zhǔn)模式與混雜模式如何區(qū)分？它們有何意義?告訴瀏覽器使用哪個版本的HTML規(guī)范來渲染文檔。DOCTYPE不存在或形式不正確會導(dǎo)致HTML文檔以混雜模式呈現(xiàn)。標(biāo)準(zhǔn)模式（Standards mode）以瀏覽器支...
本文主要和大家分享HTML基礎(chǔ)面試題及答案，希望能幫助到大家。

1 DOCTYPE有什么作用？標(biāo)準(zhǔn)模式與混雜模式如何區(qū)分？它們有何意義?

告訴瀏覽器使用哪個版本的HTML規(guī)范來渲染文檔。DOCTYPE不存在或形式不正確會導(dǎo)致HTML文檔以混雜模式呈現(xiàn)。
標(biāo)準(zhǔn)模式（Standards mode）以瀏覽器支持的最高標(biāo)準(zhǔn)運行；混雜模式（Quirks mode）中頁面是一種比較寬松的向后兼容的方式顯示。

2 HTML5為什么只需要寫 <!DOCTYPE HTML>？

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

HTML4.01基于SGML，所以需要引用DTD。才能告知瀏覽器文檔所使用的文檔類型，如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

行內(nèi)元素：a span img input select
塊級元素：p ul ol li dl dt dd h1 p
空元素：<br> <hr> <link> <meta>

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

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

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

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

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

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

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

  6. import在html使用時候需要<style type="text/css">標(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樣式文件。因為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)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。
JS引擎：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。

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

7 常見的瀏覽器內(nèi)核有哪些？

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

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

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

  4. Webkit：Safari Chrome

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

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

  1. canvas

  2. 用于媒介回放的video和audio元素

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

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

  5. 位置API：Geolocation

  6. 表單控件，calendar date time email url search

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

  8. 拖放API：drag、drop

移除的元素：

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

  2. 性能較差元素：frame frameset noframes

區(qū)分：

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

  2. 根據(jù)新增加的結(jié)構(gòu)、功能來區(qū)分

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

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

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

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

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

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

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

在頁面頭部加入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的區(qū)別？

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

區(qū)別：

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

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

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

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

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

優(yōu)點：

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

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

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

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

缺點：

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

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

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

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

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

label標(biāo)簽用來定義表單控件間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。label 中有兩個屬性是非常有用的, FOR和ACCESSKEY。
FOR屬性功能：表示label標(biāo)簽要綁定的HTML元素，你點擊這個標(biāo)簽的時候，所綁定的元素將獲取焦點。例如，

<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

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

<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">

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

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

方法：

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

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

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

  1. WebSocket SharedWorker

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

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

16 webSocket如何兼容低瀏覽器？

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

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

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

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

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

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

  1. map+area或者svg

  2. border-radius

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

18 實現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的Quirks mode和CSS Compat模式下都能保持同一效果

<p style="height:1px;overflow:hidden;background:red"></p>

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

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

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

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

title屬性沒有明確意義，只表示標(biāo)題；h1表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響
strong標(biāo)明重點內(nèi)容，語氣加強含義；b是無意義的視覺表示
em表示強調(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)推薦：

前端面試題小結(jié)

CSS基礎(chǔ)面試題小結(jié)、

JavaScript面試基礎(chǔ)知識題分享

以上就是HTML基礎(chǔ)面試題匯總的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。