溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下HTML基礎面試題有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1 DOCTYPE有什么作用？標準模式與混雜模式如何區分？它們有何意義?
告訴瀏覽器使用哪個版本的HTML規范來渲染文檔。DOCTYPE不存在或形式不正確會導致HTML文檔以混雜模式呈現。
標準模式（Standards mode）以瀏覽器支持的最高標準運行；混雜模式（Quirks mode）中頁面是一種比較寬松的向后兼容的方式顯示。
2 HTML5為什么只需要寫 <!DOCTYPE HTML>？
HTML5不基于SGML（Standard Generalized Markup Language 標準通用標記語言），因此不需要對DTD（DTD 文檔類型定義）進行引用，但是需要DOCTYPE來規范瀏覽器行為。
HTML4.01基于SGML，所以需要引用DTD。才能告知瀏覽器文檔所使用的文檔類型，如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a span img input select
塊級元素：p ul ol li dl dt dd h2 p
空元素：<br> <hr> <link> <meta>
4 頁面導入樣式時，使用link和@import有什么區別？
相同的地方，都是外部引用CSS方式，區別：
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使用時候需要<style type="text/css">標簽
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 常見的瀏覽器內核有哪些？
Trident( MSHTML )：IE MaxThon TT The World 360 搜狗瀏覽器
Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
Presto：Opera7及以上(Opera內核原為：Presto，現為：Blink)
Webkit：Safari Chrome
8 HTML5有哪些新特性,移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5
新增加了圖像、位置、存儲、多任務等功能。
新增元素：
canvas
用于媒介回放的video和audio元素
本地離線存儲。localStorage長期存儲數據，瀏覽器關閉后數據不丟失;sessionStorage的數據在瀏覽器關閉后自動刪除
語意化更好的內容元素，比如 article footer header nav section
位置API：Geolocation
表單控件，calendar date time email url search
新的技術：web worker(web worker是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續做任何愿意做的事情：點擊、選取內容等等，而此時 web worker 在后臺運行) web socket
拖放API：drag、drop
移除的元素：
純表現的元素：basefont big center font s strike tt u
性能較差元素：frame frameset noframes
區分：
DOCTYPE聲明的方式是區分重要因素
根據新增加的結構、功能來區分
9 簡述一下你對HTML語義化的理解？
去掉或丟失樣式的時候能夠讓頁面呈現出清晰的結構。
有利于SEO和搜索引擎建立良好溝通，有助于爬蟲抓取更多的信息，爬蟲依賴于標簽來確定上下文和各個關鍵字的權重。
方便其它設備解析。
便于團隊開發和維護，語義化根據可讀性。
10 HTML5的文件離線儲存怎么使用，工作原理是什么？
在線情況下，瀏覽器發現HTML頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問，那么瀏覽器就會根據manifest文件的內容下載相應的資源，并進行離線存儲。如果已經訪問過并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面。然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不會做任何操作，如果文件改變了，那么就會重新下載文件中的資源，并且進行離線存儲。例如，
在頁面頭部加入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的區別？
共同點：都是保存在瀏覽器端，且是同源的。
區別：
cookies是為了標識用戶身份而存儲在用戶本地終端上的數據，始終在同源http請求中攜帶，即cookies在瀏覽器和服務器間來回傳遞，而sessionstorage和localstorage不會自動把數據發給服務器，僅在本地保存。
存儲大小的限制不同。cookie保存的數據很小，不能超過4k，而sessionstorage和localstorage保存的數據大，可達到5M。
數據的有效期不同。cookie在設置的cookie過期時間之前一直有效，即使窗口或者瀏覽器關閉。sessionstorage僅在瀏覽器窗口關閉之前有效。localstorage始終有效，窗口和瀏覽器關閉也一直保存，用作長久數據保存。
作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的瀏覽器共享，即使同一頁面；localstorage在所有同源窗口都是共享
12 iframe框架有那些優缺點？
優點：
iframe能夠原封不動的把嵌入的網頁展現出來。
如果有多個網頁引用iframe，那么你只需要修改iframe的內容，就可以實現調用的每一個頁面內容的更改，方便快捷。
網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來嵌套，可以增加代碼的可重用。
如果遇到加載緩慢的第三方內容如圖標和廣告，這些問題可以由iframe來解決。
缺點：
搜索引擎的爬蟲程序無法解讀這種頁面
框架結構中出現各種滾動條
使用框架結構時，保證設置正確的導航鏈接。
iframe頁面會增加服務器的http請求
13 label的作用是什么? 是怎么用的?
label標簽用來定義表單控件間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。label 中有兩個屬性是非常有用的, FOR和ACCESSKEY。
FOR屬性功能：表示label標簽要綁定的HTML元素，你點擊這個標簽的時候，所綁定的元素將獲取焦點。例如，
<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY屬性功能：表示訪問label標簽所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。例如，
<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">
14 HTML5的form如何關閉自動完成功能？
HTML的輸入框可以擁有自動完成的功能，當你往輸入框輸入內容的時候，瀏覽器會從你以前的同名輸入框的歷史記錄中查找出類似的內容并列在輸入框下面，這樣就不用全部輸入進去了，直接選擇列表中的項目就可以了。但有時候我們希望關閉輸入框的自動完成功能，例如當用戶輸入內容的時候，我們希望使用AJAX技術從數據庫搜索并列舉而不是在用戶的歷史記錄中搜索。
方法：
在IE的internet選項菜單中里的自動完成里面設置
設置form輸入框的autocomplete為on或者off來來開啟輸入框的自動完成功能
15 如何實現瀏覽器內多個標簽頁之間的通信?
WebSocket SharedWorker
也可以調用 localstorge、cookies 等本地存儲方式。 localstorge 在另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面信息通信。
注意：Safari 在無痕模式下設置 localstorge 值時會拋出QuotaExceededError 的異常
16 webSocket如何兼容低瀏覽器？
Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 編碼發送 XHR 基于長輪詢的 XHR
引用WebSocket.js這個文件來兼容低版本瀏覽器。
16 頁面可見性（Page Visibility）API 可以有哪些用途？
通過visibility state的值得檢測頁面當前是否可見，以及打開網頁的時間。
在頁面被切換到其他后臺進程時，自動暫停音樂或視頻的播放。
17 如何在頁面上實現一個圓形的可點擊區域？
map+area或者svg
border-radius
純js實現，一個點不在圓上的算法
18 實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirks mode和CSS Compat模式下都能保持同一效果
<p style="height:1px;overflow:hidden;background:red"></p>
19 網頁驗證碼是干嘛的，是為了解決什么安全問題？
區分用戶是計算機還是人的程序;
可以防止惡意破解密碼、刷票、論壇灌水；
20 title與h2的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義，只表示標題；h2表示層次明確的標題，對頁面信息的抓取也有很大的影響
strong標明重點內容，語氣加強含義；b是無意義的視覺表示
em表示強調文本；i是斜體，是無意義的視覺表示
視覺樣式標簽：b i u s
語義樣式標簽：strong em ins del code
21 元素的alt和title有什么異同？
在alt和title同時設置的時候，alt作為圖片的替代文字出現，title是圖片的解釋文字。
以上是“HTML基礎面試題有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
