小編給大家分享一下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ū)分?它們有何意義?
告訴瀏覽器使用哪個版本的HTML規(guī)范來渲染文檔。DOCTYPE不存在或形式不正確會導(dǎo)致HTML文檔以混雜模式呈現(xiàn)。
標(biāo)準(zhǔn)模式(Standards mode)以瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行;混雜模式(Quirks mode)中頁面是一種比較寬松的向后兼容的方式顯示。
2 HTML5為什么只需要寫 ?
HTML5不基于SGML(Standard Generalized Markup Language 標(biāo)準(zhǔn)通用標(biāo)記語言),因此不需要對DTD(DTD 文檔類型定義)進(jìn)行引用,但是需要DOCTYPE來規(guī)范瀏覽器行為。
HTML4.01基于SGML,所以需要引用DTD。才能告知瀏覽器文檔所使用的文檔類型,如下:
3 行內(nèi)元素有哪些?塊級元素有哪些? 空(void)元素有那些?
行內(nèi)元素:a span img input select
塊級元素:p ul ol li dl dt dd h2 p
空元素:
4 頁面導(dǎo)入樣式時,使用link和@import有什么區(qū)別?
相同的地方,都是外部引用CSS方式,區(qū)別:
link是xhtml標(biāo)簽,除了加載css外,還可以定義RSS等其他事務(wù);@import屬于CSS范疇,只能加載CSS
link引用CSS時候,頁面載入時同時加載;@import需要在頁面完全加載以后加載,而且@import被引用的CSS會等到引用它的CSS文件被加載完才加載
link是xhtml標(biāo)簽,無兼容問題;@import是在css2.1提出來的,低版本的瀏覽器不支持
link支持使用javascript控制去改變樣式,而@import不支持
link方式的樣式的權(quán)重高于@import的權(quán)重
import在html使用時候需要標(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樣式文件。因?yàn)閘ink是順序加載的,這樣頁面會等到CSS下載完之后再下載HTML文件,這樣先布局好,就不會出現(xiàn)FOUC問題。
6 介紹一下你對瀏覽器內(nèi)核的理解?
主要分成兩部分:渲染引擎(Layout Engine或Rendering Engine)和JS引擎。
渲染引擎:負(fù)責(zé)取得網(wǎng)頁的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計(jì)算網(wǎng)頁的顯示方式,然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同,所以渲染的效果也不相同。
JS引擎:解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎ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
新增加了圖像、位置、存儲、多任務(wù)等功能。
新增元素:
canvas
用于媒介回放的video和audio元素
本地離線存儲。localStorage長期存儲數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
語意化更好的內(nèi)容元素,比如 article footer header nav section
位置API:Geolocation
表單控件,calendar date time email url search
新的技術(shù):web worker(web worker是運(yùn)行在后臺的 JavaScript,獨(dú)立于其他腳本,不會影響頁面的性能。您可以繼續(xù)做任何愿意做的事情:點(diǎn)擊、選取內(nèi)容等等,而此時 web worker 在后臺運(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 簡述一下你對HTML語義化的理解?
去掉或丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)。
有利于SEO和搜索引擎建立良好溝通,有助于爬蟲抓取更多的信息,爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重。
方便其它設(shè)備解析。
便于團(tuán)隊(duì)開發(fā)和維護(hù),語義化根據(jù)可讀性。
10 HTML5的文件離線儲存怎么使用,工作原理是什么?
在線情況下,瀏覽器發(fā)現(xiàn)HTML頭部有manifest屬性,它會請求manifest文件,如果是第一次訪問,那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源,并進(jìn)行離線存儲。如果已經(jīng)訪問過并且資源已經(jīng)離線存儲了,那么瀏覽器就會使用離線的資源加載頁面。然后瀏覽器會對比新的manifest文件與舊的manifest文件,如果文件沒有發(fā)生改變,就不會做任何操作,如果文件改變了,那么就會重新下載文件中的資源,并且進(jìn)行離線存儲。例如,
在頁面頭部加入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ū)別?
共同點(diǎn):都是保存在瀏覽器端,且是同源的。
區(qū)別:
cookies是為了標(biāo)識用戶身份而存儲在用戶本地終端上的數(shù)據(jù),始終在同源http請求中攜帶,即cookies在瀏覽器和服務(wù)器間來回傳遞,而sessionstorage和localstorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存。
存儲大小的限制不同。cookie保存的數(shù)據(jù)很小,不能超過4k,而sessionstorage和localstorage保存的數(shù)據(jù)大,可達(dá)到5M。
數(shù)據(jù)的有效期不同。cookie在設(shè)置的cookie過期時間之前一直有效,即使窗口或者瀏覽器關(guān)閉。sessionstorage僅在瀏覽器窗口關(guān)閉之前有效。localstorage始終有效,窗口和瀏覽器關(guān)閉也一直保存,用作長久數(shù)據(jù)保存。
作用域不同。cookie在所有的同源窗口都是共享;sessionstorage不在不同的瀏覽器共享,即使同一頁面;localstorage在所有同源窗口都是共享
12 iframe框架有那些優(yōu)缺點(diǎn)?
優(yōu)點(diǎn):
iframe能夠原封不動的把嵌入的網(wǎng)頁展現(xiàn)出來。
如果有多個網(wǎng)頁引用iframe,那么你只需要修改iframe的內(nèi)容,就可以實(shí)現(xiàn)調(diào)用的每一個頁面內(nèi)容的更改,方便快捷。
網(wǎng)頁如果為了統(tǒng)一風(fēng)格,頭部和版本都是一樣的,就可以寫成一個頁面,用iframe來嵌套,可以增加代碼的可重用。
如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告,這些問題可以由iframe來解決。
缺點(diǎn):
搜索引擎的爬蟲程序無法解讀這種頁面
框架結(jié)構(gòu)中出現(xiàn)各種滾動條
使用框架結(jié)構(gòu)時,保證設(shè)置正確的導(dǎo)航鏈接。
iframe頁面會增加服務(wù)器的http請求
13 label的作用是什么? 是怎么用的?
label標(biāo)簽用來定義表單控件間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時,瀏覽器會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。label 中有兩個屬性是非常有用的, FOR和ACCESSKEY。
FOR屬性功能:表示label標(biāo)簽要綁定的HTML元素,你點(diǎn)擊這個標(biāo)簽的時候,所綁定的元素將獲取焦點(diǎn)。例如,
ACCESSKEY屬性功能:表示訪問label標(biāo)簽所綁定的元素的熱鍵,當(dāng)您按下熱鍵,所綁定的元素將獲取焦點(diǎn)。例如,
14 HTML5的form如何關(guān)閉自動完成功能?
HTML的輸入框可以擁有自動完成的功能,當(dāng)你往輸入框輸入內(nèi)容的時候,瀏覽器會從你以前的同名輸入框的歷史記錄中查找出類似的內(nèi)容并列在輸入框下面,這樣就不用全部輸入進(jìn)去了,直接選擇列表中的項(xiàng)目就可以了。但有時候我們希望關(guān)閉輸入框的自動完成功能,例如當(dāng)用戶輸入內(nèi)容的時候,我們希望使用AJAX技術(shù)從數(shù)據(jù)庫搜索并列舉而不是在用戶的歷史記錄中搜索。
方法:
在IE的internet選項(xiàng)菜單中里的自動完成里面設(shè)置
設(shè)置form輸入框的autocomplete為on或者off來來開啟輸入框的自動完成功能
15 如何實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?
WebSocket SharedWorker
也可以調(diào)用 localstorge、cookies 等本地存儲方式。 localstorge 在另一個瀏覽上下文里被添加、修改或刪除時,它都會觸發(fā)一個事件,我們通過監(jiān)聽事件,控制它的值來進(jìn)行頁面信息通信。
注意:Safari 在無痕模式下設(shè)置 localstorge 值時會拋出QuotaExceededError 的異常
16 webSocket如何兼容低瀏覽器?
Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 編碼發(fā)送 XHR 基于長輪詢的 XHR
引用WebSocket.js這個文件來兼容低版本瀏覽器。
16 頁面可見性(Page Visibility)API 可以有哪些用途?
通過visibility state的值得檢測頁面當(dāng)前是否可見,以及打開網(wǎng)頁的時間。
在頁面被切換到其他后臺進(jìn)程時,自動暫停音樂或視頻的播放。
17 如何在頁面上實(shí)現(xiàn)一個圓形的可點(diǎn)擊區(qū)域?
map+area或者svg
border-radius
純js實(shí)現(xiàn),一個點(diǎn)不在圓上的算法
18 實(shí)現(xiàn)不使用 border 畫出1px高的線,在不同瀏覽器的Quirks mode和CSS Compat模式下都能保持同一效果
19 網(wǎng)頁驗(yàn)證碼是干嘛的,是為了解決什么安全問題?
區(qū)分用戶是計(jì)算機(jī)還是人的程序;
可以防止惡意破解密碼、刷票、論壇灌水;
20 title與h2的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別?
title屬性沒有明確意義,只表示標(biāo)題;h2表示層次明確的標(biāo)題,對頁面信息的抓取也有很大的影響
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è)置的時候,alt作為圖片的替代文字出現(xiàn),title是圖片的解釋文字。
以上是“HTML基礎(chǔ)面試題有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道!