摘要:但有時(shí)候我們希望關(guān)閉輸入框的自動(dòng)完成功能,例如當(dāng)用戶(hù)輸入內(nèi)容的時(shí)候,我們希望使用技術(shù)從數(shù)據(jù)庫(kù)搜索并列舉而不是在用戶(hù)的歷史記錄中搜索。
以下是我整理的一些HTML的基礎(chǔ)面試體,并自己整理了答案。
1 DOCTYPE有什么作用?標(biāo)準(zhǔn)模式與混雜模式如何區(qū)分?它們有何意義?
告訴瀏覽器使用哪個(gè)版本的HTML規(guī)范來(lái)渲染文檔。DOCTYPE不存在或形式不正確會(huì)導(dǎo)致HTML文檔以混雜模式呈現(xiàn)。
標(biāo)準(zhǔn)模式(Standards mode)以瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行;混雜模式(Quirks mode)中頁(yè)面是一種比較寬松的向后兼容的方式顯示。
2 HTML5為什么只需要寫(xiě) ?
HTML5不基于SGML(Standard Generalized Markup Language 標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言),因此不需要對(duì)DTD(DTD 文檔類(lèi)型定義)進(jìn)行引用,但是需要DOCTYPE來(lái)規(guī)范瀏覽器行為。
HTML4.01基于SGML,所以需要引用DTD。才能告知瀏覽器文檔所使用的文檔類(lèi)型,如下:
3 行內(nèi)元素有哪些?塊級(jí)元素有哪些? 空(void)元素有那些?
行內(nèi)元素:a span img input select
塊級(jí)元素:div ul ol li dl dt dd h1 p
空元素:
4 頁(yè)面導(dǎo)入樣式時(shí),使用link和@import有什么區(qū)別?
相同的地方,都是外部引用CSS方式,區(qū)別:
link是xhtml標(biāo)簽,除了加載css外,還可以定義RSS等其他事務(wù);@import屬于CSS范疇,只能加載CSS
link引用CSS時(shí)候,頁(yè)面載入時(shí)同時(shí)加載;@import需要在頁(yè)面完全加載以后加載,而且@import被引用的CSS會(huì)等到引用它的CSS文件被加載完才加載
link是xhtml標(biāo)簽,無(wú)兼容問(wèn)題;@import是在css2.1提出來(lái)的,低版本的瀏覽器不支持
link支持使用javascript控制去改變樣式,而@import不支持
link方式的樣式的權(quán)重高于@import的權(quán)重
import在html使用時(shí)候需要標(biāo)簽
5 無(wú)樣式內(nèi)容閃爍(FOUC)Flash of Unstyle Content
@import導(dǎo)入CSS文件會(huì)等到文檔加載完后再加載CSS樣式表。因此,在頁(yè)面DOM加載完成到CSS導(dǎo)入完成之間會(huì)有一段時(shí)間頁(yè)面上的內(nèi)容是沒(méi)有樣式的。
解決方法:使用link標(biāo)簽加載CSS樣式文件。因?yàn)閘ink是順序加載的,這樣頁(yè)面會(huì)等到CSS下載完之后再下載HTML文件,這樣先布局好,就不會(huì)出現(xiàn)FOUC問(wèn)題。
6 介紹一下你對(duì)瀏覽器內(nèi)核的理解?
主要分成兩部分:渲染引擎(Layout Engine或Rendering Engine)和JS引擎。
渲染引擎:負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計(jì)算網(wǎng)頁(yè)的顯示方式,然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同,所以渲染的效果也不相同。
JS引擎:解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。
最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確,后來(lái)JS引擎越來(lái)越獨(dú)立,內(nèi)核就傾向于只指渲染引擎。
7 常見(jiàn)的瀏覽器內(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)簽的瀏覽器兼容問(wèn)題?如何區(qū)分HTML和HTML5
新增加了圖像、位置、存儲(chǔ)、多任務(wù)等功能。
新增元素:
canvas
用于媒介回放的video和audio元素
本地離線存儲(chǔ)。localStorage長(zhǎng)期存儲(chǔ)數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
語(yǔ)意化更好的內(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ì)影響頁(yè)面的性能。您可以繼續(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)、功能來(lái)區(qū)分
9 簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解?
去掉或丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)。
有利于SEO和搜索引擎建立良好溝通,有助于爬蟲(chóng)抓取更多的信息,爬蟲(chóng)依賴(lài)于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
方便其它設(shè)備解析。
便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù),語(yǔ)義化根據(jù)可讀性。
10 HTML5的文件離線儲(chǔ)存怎么使用,工作原理是什么?
在線情況下,瀏覽器發(fā)現(xiàn)HTML頭部有manifest屬性,它會(huì)請(qǐng)求manifest文件,如果是第一次訪問(wèn),那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源,并進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問(wèn)過(guò)并且資源已經(jīng)離線存儲(chǔ)了,那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面。然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件,如果文件沒(méi)有發(fā)生改變,就不會(huì)做任何操作,如果文件改變了,那么就會(huì)重新下載文件中的資源,并且進(jìn)行離線存儲(chǔ)。例如,
在頁(yè)面頭部加入manifest屬性
在cache.manifest文件中編寫(xiě)離線存儲(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í)用戶(hù)身份而存儲(chǔ)在用戶(hù)本地終端上的數(shù)據(jù),始終在同源http請(qǐng)求中攜帶,即cookies在瀏覽器和服務(wù)器間來(lái)回傳遞,而sessionstorage和localstorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存。
存儲(chǔ)大小的限制不同。cookie保存的數(shù)據(jù)很小,不能超過(guò)4k,而sessionstorage和localstorage保存的數(shù)據(jù)大,可達(dá)到5M。
數(shù)據(jù)的有效期不同。cookie在設(shè)置的cookie過(guò)期時(shí)間之前一直有效,即使窗口或者瀏覽器關(guān)閉。sessionstorage僅在瀏覽器窗口關(guān)閉之前有效。localstorage始終有效,窗口和瀏覽器關(guān)閉也一直保存,用作長(zhǎng)久數(shù)據(jù)保存。
作用域不同。cookie在所有的同源窗口都是共享;sessionstorage不在不同的瀏覽器共享,即使同一頁(yè)面;localstorage在所有同源窗口都是共享
12 iframe框架有那些優(yōu)缺點(diǎn)?
優(yōu)點(diǎn):
iframe能夠原封不動(dòng)的把嵌入的網(wǎng)頁(yè)展現(xiàn)出來(lái)。
如果有多個(gè)網(wǎng)頁(yè)引用iframe,那么你只需要修改iframe的內(nèi)容,就可以實(shí)現(xiàn)調(diào)用的每一個(gè)頁(yè)面內(nèi)容的更改,方便快捷。
網(wǎng)頁(yè)如果為了統(tǒng)一風(fēng)格,頭部和版本都是一樣的,就可以寫(xiě)成一個(gè)頁(yè)面,用iframe來(lái)嵌套,可以增加代碼的可重用。
如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告,這些問(wèn)題可以由iframe來(lái)解決。
缺點(diǎn):
搜索引擎的爬蟲(chóng)程序無(wú)法解讀這種頁(yè)面
框架結(jié)構(gòu)中出現(xiàn)各種滾動(dòng)條
使用框架結(jié)構(gòu)時(shí),保證設(shè)置正確的導(dǎo)航鏈接。
iframe頁(yè)面會(huì)增加服務(wù)器的http請(qǐng)求
13 label的作用是什么? 是怎么用的?
label標(biāo)簽用來(lái)定義表單控件間的關(guān)系,當(dāng)用戶(hù)選擇該標(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)。例如,
ACCESSKEY屬性功能:表示訪問(wèn)label標(biāo)簽所綁定的元素的熱鍵,當(dāng)您按下熱鍵,所綁定的元素將獲取焦點(diǎn)。例如,
14 HTML5的form如何關(guān)閉自動(dòng)完成功能?
HTML的輸入框可以擁有自動(dòng)完成的功能,當(dāng)你往輸入框輸入內(nèi)容的時(shí)候,瀏覽器會(huì)從你以前的同名輸入框的歷史記錄中查找出類(lèi)似的內(nèi)容并列在輸入框下面,這樣就不用全部輸入進(jìn)去了,直接選擇列表中的項(xiàng)目就可以了。但有時(shí)候我們希望關(guān)閉輸入框的自動(dòng)完成功能,例如當(dāng)用戶(hù)輸入內(nèi)容的時(shí)候,我們希望使用AJAX技術(shù)從數(shù)據(jù)庫(kù)搜索并列舉而不是在用戶(hù)的歷史記錄中搜索。
方法:
在IE的internet選項(xiàng)菜單中里的自動(dòng)完成里面設(shè)置
設(shè)置form輸入框的autocomplete為on或者off來(lái)來(lái)開(kāi)啟輸入框的自動(dòng)完成功能
15 如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?
WebSocket SharedWorker
也可以調(diào)用 localstorge、cookies 等本地存儲(chǔ)方式。 localstorge 在另一個(gè)瀏覽上下文里被添加、修改或刪除時(shí),它都會(huì)觸發(fā)一個(gè)事件,我們通過(guò)監(jiān)聽(tīng)事件,控制它的值來(lái)進(jìn)行頁(yè)面信息通信。
注意:Safari 在無(wú)痕模式下設(shè)置 localstorge 值時(shí)會(huì)拋出QuotaExceededError 的異常
16 webSocket如何兼容低瀏覽器?
Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 編碼發(fā)送 XHR 基于長(zhǎng)輪詢(xún)的 XHR
引用WebSocket.js這個(gè)文件來(lái)兼容低版本瀏覽器。
16 頁(yè)面可見(jiàn)性(Page Visibility)API 可以有哪些用途?
通過(guò)visibility state的值得檢測(cè)頁(yè)面當(dāng)前是否可見(jiàn),以及打開(kāi)網(wǎng)頁(yè)的時(shí)間。
在頁(yè)面被切換到其他后臺(tái)進(jìn)程時(shí),自動(dòng)暫停音樂(lè)或視頻的播放。
17 如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域?
map+area或者svg
border-radius
純js實(shí)現(xiàn),一個(gè)點(diǎn)不在圓上的算法
18 實(shí)現(xiàn)不使用 border 畫(huà)出1px高的線,在不同瀏覽器的Quirks mode和CSS Compat模式下都能保持同一效果
19 網(wǎng)頁(yè)驗(yàn)證碼是干嘛的,是為了解決什么安全問(wèn)題?
區(qū)分用戶(hù)是計(jì)算機(jī)還是人的程序;
可以防止惡意破解密碼、刷票、論壇灌水;
20 title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別?
title屬性沒(méi)有明確意義,只表示標(biāo)題;h1表示層次明確的標(biāo)題,對(duì)頁(yè)面信息的抓取也有很大的影響
strong標(biāo)明重點(diǎn)內(nèi)容,語(yǔ)氣加強(qiáng)含義;b是無(wú)意義的視覺(jué)表示
em表示強(qiáng)調(diào)文本;i是斜體,是無(wú)意義的視覺(jué)表示
視覺(jué)樣式標(biāo)簽:b i u s
語(yǔ)義樣式標(biāo)簽:strong em ins del code
21 元素的alt和title有什么異同?
在alt和title同時(shí)設(shè)置的時(shí)候,alt作為圖片的替代文字出現(xiàn),title是圖片的解釋文字。
持續(xù)更新中...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/51841.html
摘要:獲取的對(duì)象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對(duì)象即使沒(méi)有代碼,也會(huì)把默認(rèn)的祖宗八代都顯示出來(lái)而只能獲取元素屬性中的樣式。因此對(duì)于一個(gè)光禿禿的元素,方法返回對(duì)象中屬性值如果有就是據(jù)我測(cè)試不同環(huán)境結(jié)果可能有差異而就是。 花了很長(zhǎng)時(shí)間整理的前端面試資源,喜歡請(qǐng)大家不要吝嗇star~ 別只收藏,點(diǎn)個(gè)贊,點(diǎn)個(gè)star再走哈~ 持續(xù)更新中……,可以關(guān)注下github 項(xiàng)目地址 https:...
摘要:背景想想自己為什么要寫(xiě)這個(gè),難道不是因?yàn)檫@篇道基礎(chǔ)面試題附答案文章最近被轉(zhuǎn)載的多,比較多而湊熱鬧蹭熱點(diǎn)顯然,肯定是因?yàn)檫@樣我才打算寫(xiě)的。繼承得到的樣式的優(yōu)先級(jí)最低。 背景 想想自己為什么要寫(xiě)這個(gè),難道不是因?yàn)檫@篇《50道CSS基礎(chǔ)面試題(附答案)》文章最近被轉(zhuǎn)載的多,比較多而湊熱鬧蹭熱點(diǎn)?顯然,肯定是因?yàn)檫@樣我才打算寫(xiě)的。而且還有就是,我的公眾號(hào)也很久沒(méi)有更新了,微信說(shuō)長(zhǎng)期不更新會(huì)關(guān)掉...
摘要:作為面試官,我是如何甄別應(yīng)聘者的包裝程度語(yǔ)言和等其他語(yǔ)言的對(duì)比分析和主從復(fù)制的原理詳解和持久化的原理是什么面試中經(jīng)常被問(wèn)到的持久化與恢復(fù)實(shí)現(xiàn)故障恢復(fù)自動(dòng)化詳解哨兵技術(shù)查漏補(bǔ)缺最易錯(cuò)過(guò)的技術(shù)要點(diǎn)大掃盲意外宕機(jī)不難解決,但你真的懂?dāng)?shù)據(jù)恢復(fù)嗎每秒 作為面試官,我是如何甄別應(yīng)聘者的包裝程度Go語(yǔ)言和Java、python等其他語(yǔ)言的對(duì)比分析 Redis和MySQL Redis:主從復(fù)制的原理詳...
閱讀 2119·2023-04-26 00:41
閱讀 1154·2021-09-24 10:34
閱讀 3580·2021-09-23 11:21
閱讀 4090·2021-09-22 15:06
閱讀 1563·2019-08-30 15:55
閱讀 906·2019-08-30 15:54
閱讀 1835·2019-08-30 15:48
閱讀 558·2019-08-29 13:58