HTML基礎(chǔ)面試題有哪些-創(chuàng)新互聯(lián)

小編給大家分享一下HTML基礎(chǔ)面試題有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司主營拜泉網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件開發(fā),拜泉h5微信小程序開發(fā)搭建,拜泉網(wǎng)站營銷推廣歡迎拜泉等地區(qū)企業(yè)咨詢

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

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

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

HTML5不基于SGML（Standard Generalized Markup Language 標(biāo)準(zhǔn)通用標(biāo)記語言），因此不需要對(duì)DTD（DTD 文檔類型定義）進(jìn)行引用，但是需要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)元素有哪些？塊級(jí)元素有哪些？空(void)元素有那些？

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

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

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

link是xhtml標(biāo)簽，除了加載css外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS
link引用CSS時(shí)候，頁面載入時(shí)同時(shí)加載；@import需要在頁面完全加載以后加載，而且@import被引用的CSS會(huì)等到引用它的CSS文件被加載完才加載
link是xhtml標(biāo)簽，無兼容問題；@import是在css2.1提出來的，低版本的瀏覽器不支持
link支持使用javascript控制去改變樣式，而@import不支持
link方式的樣式的權(quán)重高于@import的權(quán)重
import在html使用時(shí)候需要<style type="text/css">標(biāo)簽

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

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

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

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

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

渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁的語法解釋會(huì)有不同，所以渲染的效果也不相同。
JS引擎：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動(dò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

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

canvas
用于媒介回放的video和audio元素
本地離線存儲(chǔ)。localStorage長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
語意化更好的內(nèi)容元素，比如 article footer header nav section
位置API：Geolocation
表單控件，calendar date time email url search
新的技術(shù)：web worker(web worker是運(yùn)行在后臺(tái)的 JavaScript，獨(dú)立于其他腳本，不會(huì)影響頁面的性能。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊、選取內(nèi)容等等，而此時(shí) web worker 在后臺(tái)運(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 簡(jiǎn)述一下你對(duì)HTML語義化的理解？

去掉或丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)。
有利于SEO和搜索引擎建立良好溝通，有助于爬蟲抓取更多的信息，爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
方便其它設(shè)備解析。
便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化根據(jù)可讀性。

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

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

在頁面頭部加入manifest屬性

<html manifest='cache.manifest'>

在cache.manifest文件中編寫離線存儲(chǔ)的資源

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

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

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

區(qū)別：

cookies是為了標(biāo)識(shí)用戶身份而存儲(chǔ)在用戶本地終端上的數(shù)據(jù)，始終在同源http請(qǐng)求中攜帶，即cookies在瀏覽器和服務(wù)器間來回傳遞，而sessionstorage和localstorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲(chǔ)大小的限制不同。cookie保存的數(shù)據(jù)很小，不能超過4k，而sessionstorage和localstorage保存的數(shù)據(jù)大，可達(dá)到5M。
數(shù)據(jù)的有效期不同。cookie在設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或者瀏覽器關(guān)閉。sessionstorage僅在瀏覽器窗口關(guān)閉之前有效。localstorage始終有效，窗口和瀏覽器關(guān)閉也一直保存，用作長久數(shù)據(jù)保存。
作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的瀏覽器共享，即使同一頁面；localstorage在所有同源窗口都是共享

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

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

iframe能夠原封不動(dòng)的把嵌入的網(wǎng)頁展現(xiàn)出來。
如果有多個(gè)網(wǎng)頁引用iframe，那么你只需要修改iframe的內(nèi)容，就可以實(shí)現(xiàn)調(diào)用的每一個(gè)頁面內(nèi)容的更改，方便快捷。
網(wǎng)頁如果為了統(tǒng)一風(fēng)格，頭部和版本都是一樣的，就可以寫成一個(gè)頁面，用iframe來嵌套，可以增加代碼的可重用。
如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告，這些問題可以由iframe來解決。

缺點(diǎn)：

搜索引擎的爬蟲程序無法解讀這種頁面
框架結(jié)構(gòu)中出現(xiàn)各種滾動(dòng)條
使用框架結(jié)構(gòu)時(shí)，保證設(shè)置正確的導(dǎo)航鏈接。
iframe頁面會(huì)增加服務(wù)器的http請(qǐng)求

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

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

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

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

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

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

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

方法：

在IE的internet選項(xiàng)菜單中里的自動(dòng)完成里面設(shè)置
設(shè)置form輸入框的autocomplete為on或者off來來開啟輸入框的自動(dòng)完成功能

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

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

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

16 webSocket如何兼容低瀏覽器？

Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 編碼發(fā)送 XHR 基于長輪詢的 XHR
引用WebSocket.js這個(gè)文件來兼容低版本瀏覽器。

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

通過visibility state的值得檢測(cè)頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時(shí)間。
在頁面被切換到其他后臺(tái)進(jìn)程時(shí)，自動(dòng)暫停音樂或視頻的播放。

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

map+area或者svg
border-radius
純js實(shí)現(xiàn)，一個(gè)點(diǎn)不在圓上的算法

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

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

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

區(qū)分用戶是計(jì)算機(jī)還是人的程序;
可以防止惡意破解密碼、刷票、論壇灌水；

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

title屬性沒有明確意義，只表示標(biāo)題；h2表示層次明確的標(biāo)題，對(duì)頁面信息的抓取也有很大的影響
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í)設(shè)置的時(shí)候，alt作為圖片的替代文字出現(xiàn)，title是圖片的解釋文字。

以上是“HTML基礎(chǔ)面試題有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

分享文章：HTML基礎(chǔ)面試題有哪些-創(chuàng)新互聯(lián)
瀏覽路徑：http://aaarwkj.com/article6/hogig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站設(shè)計(jì)公司、Google、商城網(wǎng)站、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

HTML基礎(chǔ)面試題有哪些-創(chuàng)新互聯(lián)