HTML基礎面試題彙總

本文主要和大家分享HTML基礎面試題目及答案，希望能幫助大家。

1 DOCTYPE有什麼作用？標準模式與混雜模式如何區分？它們有何意義?

告訴瀏覽器使用哪個版本的HTML規格來渲染文件。 DOCTYPE不存在或形式不正確會導致HTML文件以混雜模式呈現。
標準模式（Standards mode）以瀏覽器支援的最高標準運作；混雜模式（Quirks mode）中頁面是一種比較寬鬆的向後相容的方式顯示。

2 HTML5為什麼只需要寫 ？

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

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

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

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

4 頁面匯入樣式時，使用link和@import有什麼差別？

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

1. link是xhtml標籤，除了載入css外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能載入CSS

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

3. link是xhtml標籤，無相容問題；@import是在css2.1提出來的，低版本的瀏覽器不支援

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

5. link方式的樣式的權重高於@import的權重

6. import在html使用時候需要<style type="text/css"></style>標籤

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 常見的瀏覽器核心有哪些？

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

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

3. Presto：Opera7以上(Opera核心原為：Presto，現為：Blink)

4. Webkit：Safari Chrome

8 HTML5有哪些新功能,移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分HTML和HTML5

新增了映像、位置、儲存、多任務等功能。
新增元素：

1. canvas

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

3. 本機離線儲存。 localStorage長期儲存數據，瀏覽器關閉後數據不丟失;sessionStorage的數據在瀏覽器關閉後自動刪除

4. 語義化更好的內容元素，例如article footer header nav section

5. 位置API：Geolocation

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

7. 新的技術：web worker(web worker是運行在背景的JavaScript，獨立於其他腳本，不會影響頁面的效能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時web worker 在後台運行) web socket

8. 拖放API：drag、drop

移除的元素：

1. ##純粹表現的元素：basefont big center font s strike tt u<p></p>

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

#區分：

1. ##DOCTYPE宣告的方式是區分重要因素<p></p>
2. 根據新增加的結構、功能來區分<p></p>

#9 簡述你對HTML語意化的理解？

1. 去掉或遺失樣式的時候能夠讓頁面呈現出清晰的結構。 <p></p>
2. 有利於SEO和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的信息，爬蟲依賴標籤來確定上下文和各個關鍵字的權重。 <p></p>
3. 方便其它裝置解析。 <p></p>
4. 便於團隊開發和維護，語意化根據可讀性。 <p></p>

10 HTML5的檔案離線儲存怎麼使用，工作原理是什麼？

線上情況下，瀏覽器發現HTML頭部有manifest屬性，它會要求manifest文件，如果是第一次訪問，那麼瀏覽器就會根據manifest文件的內容下載相應的資源，並進行離線儲存。如果已經造訪過且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面。然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有改變，就不會做任何操作，如果文件改變了，那麼就會重新下載文件中的資源，並且進行離線存儲。例如，<p></p>在頁面頭加入manifest屬性<p></p>

在cache.manifest檔案中編寫離線儲存的資源<p></p>

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
Resourse/logo.png
FALLBACK:
 //offline.html

11 cookies，sessionStorage和localStorage的區別？

共同點：都是保存在瀏覽器端，且是同源的。 <p></p>區別：<p></p>

1. cookies是為了標識使用者身分而儲存在使用者本地端上的數據，始終在同源http請求中攜帶，即cookies在瀏覽器和伺服器間來回傳遞，而sessionstorage和localstorage不會自動把資料發給伺服器，只在本地保存。 <p></p>
2. 儲存大小的限制不同。 cookie保存的資料很小，不能超過4k，而sessionstorage和localstorage保存的資料大，可達到5M。 <p></p>
3. 資料的有效期限不同。 cookie在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。 sessionstorage僅在瀏覽器視窗關閉之前有效。 localstorage始終有效，視窗和瀏覽器關閉也一直保存，用作長久資料保存。 <p></p>
4. 作用域不同。 cookie在所有的同源視窗都是共享；sessionstorage不在不同的瀏覽器共享，即使同一頁面；localstorage在所有同源視窗都是共享<p></p>

12 iframe框架有那些優缺點？

優點：<p></p>

1. iframe能夠原封不動的把嵌入的網頁展現出來。 <p></p>
2. 如果有多個網頁引​​用iframe，那麼你只需要修改iframe的內容，就可以實現調用的每一個頁面內容的更改，方便快捷。 <p></p>
3. 網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來嵌套，可以增加程式碼的可重複使用。 <p></p>
4. 如果遇到載入緩慢的第三方內容如圖示和廣告，這些問題可以由iframe來解決。 <p></p>

缺點：<p></p>

1. 搜尋引擎的爬蟲程式無法解讀這種頁面<p></p>
2. 框架結構中出現各種捲軸<p></p>
3. 使用框架結構時，保證設定正確的導覽連結。 <p></p>
4. iframe頁面會增加伺服器的http請求<p></p>

#13 label的作用是什麼? 是怎麼用的?

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

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

<label>姓名</label><input>

ACCESSKEY屬性功能：表示存取label標籤所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將取得焦點。例如，<p></p>

<label>姓名</label><input>

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

HTML的輸入框可以擁有自動完成的功能，當你在輸入框輸入內容的時候，瀏覽器會從你先前的同名輸入框的歷史記錄中找到類似的內容並列在輸入框下面，這樣就不用全部輸入進去了，直接選擇清單中的項目就可以了。但有時我們希望關閉輸入框的自動完成功能，例如當使用者輸入內容的時候，我們希望使用AJAX技術從資料庫搜尋並列舉而不是在使用者的歷史記錄中搜尋。 <p></p>方法：<p></p>

1. 在IE的internet選項選單中的自動完成裡面設定<p></p>
2. 設定form輸入框的autocomplete為on或off來來開啟輸入框的自動完成功能<p></p>

15 如何实现浏览器内多个标签页之间的通信?

1. WebSocket SharedWorker

2. 也可以调用 localstorge、cookies 等本地存储方式。 localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

注意：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常

16 webSocket如何兼容低浏览器？

1. Adobe Flash Socket  ActiveX HTMLFile (IE)  基于 multipart 编码发送 XHR 基于长轮询的 XHR

2. 引用WebSocket.js这个文件来兼容低版本浏览器。

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

1. 通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。

2. 在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

17 如何在页面上实现一个圆形的可点击区域？

1. map+area或者svg

2. border-radius

3. 纯js实现，一个点不在圆上的算法

18  实现不使用 border 画出1px高的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果

<p></p>

19 网页验证码是干嘛的，是为了解决什么安全问题？

1. 区分用户是计算机还是人的程序;

2. 可以防止恶意破解密码、刷票、论坛灌水；

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是图片的解释文字。

相关推荐：

前端面试题小结

CSS基础面试题小结、

JavaScript面试基础知识题分享

以上是HTML基礎面試題彙總的詳細內容。更多資訊請關注PHP中文網其他相關文章！