Doctype作用盯拱?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
(1)、<!DOCTYPE>聲明位于位于HTML文檔中的第一行,處于 <html> 標(biāo)簽之前穿肄。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)际看。
(2)咸产、標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中仲闽,頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作脑溢。</html>
HTML5 為什么只需要寫<!DOCTYPE> ?
HTML5 不基于 SGML赖欣,因此不需要對(duì)DTD進(jìn)行引用屑彻,但是需要doctype來規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行)验庙; 而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用,才能告知瀏覽器文檔所使用的文檔類型社牲。
行內(nèi)元素有哪些粪薛?塊級(jí)元素有哪些? 空(void)元素有那些搏恤?
首先:CSS規(guī)范規(guī)定违寿,每個(gè)元素都有display屬性,確定該元素的類型挑社,每個(gè)元素都有默認(rèn)的display值陨界,如div的display默認(rèn)值為“block”,則為“塊級(jí)”元素痛阻;span默認(rèn)display屬性值為“inline”菌瘪,是“行內(nèi)”元素。
(1)行內(nèi)元素有:a b span img input select strong(強(qiáng)調(diào)的語(yǔ)氣)
(2)塊級(jí)元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
(3)常見的空元素:
<br/> <hr> <img> <input/> <link> <meta>
鮮為人知的是:
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
頁(yè)面導(dǎo)入樣式時(shí)阱当,使用link和@import有什么區(qū)別俏扩?
(1)link屬于XHTML標(biāo)簽,除了加載CSS外弊添,還能用于定義RSS, 定義rel連接屬性等作用录淡;而@import是CSS提供的,只能用于加載CSS;
(2)頁(yè)面被加載的時(shí)油坝,link會(huì)同時(shí)被加載嫉戚,而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;
(3)import是CSS2.1 提出的,只在IE5以上才能被識(shí)別澈圈,而link是XHTML標(biāo)簽彬檀,無兼容問題;
介紹一下你對(duì)瀏覽器內(nèi)核的理解?
主要分成兩部分:
渲染引擎(layout engineer或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ì)有不同深浮,所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器眠冈、電子郵件客戶端以及其它需要編輯略号、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則:
解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果贝乎。最開始渲染引擎和JS引擎并沒有區(qū)分的很明確雕薪,后來JS引擎越來越獨(dú)立仍源,內(nèi)核就傾向于只指渲染引擎齐疙。
常見的瀏覽器內(nèi)核有哪些姆吭?
Trident內(nèi)核:IE,MaxThon,TT,The World,360,搜狗瀏覽器等噪馏。[又稱MSHTML]
Gecko內(nèi)核:Netscape6及以上版本序苏,F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核:Opera7及以上刊懈。 [Opera內(nèi)核原為:Presto这弧,現(xiàn)為:Blink;]
Webkit內(nèi)核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)
html5有哪些新特性虚汛、移除了那些元素匾浪?如何處理HTML5新標(biāo)簽的瀏覽器兼容問題?如何區(qū)分 HTML 和HTML5卷哩?
* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集蛋辈,主要是關(guān)于圖像,位置将谊,存儲(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; 表單控件瓦堵,calendar基协、date、time谷丸、email堡掏、url、search;
新的技術(shù)webworker, websocket, Geolocation;
移除的元素: 純表現(xiàn)的元素:basefont刨疼,big泉唁,center,font, s揩慕,strike亭畜,tt,u;
對(duì)可用性產(chǎn)生負(fù)面影響的元素:frame迎卤,frameset拴鸵,noframes;
* 支持HTML5新標(biāo)簽: IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽, 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽劲藐, 瀏覽器支持新標(biāo)簽后八堡,還需要添加標(biāo)簽?zāi)J(rèn)的樣式。
當(dāng)然也可以直接使用成熟的框架聘芜、比如html5shim; <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
* 如何區(qū)分HTML5: DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解兄渺?
用正確的標(biāo)簽做正確的事情。html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化汰现,結(jié)構(gòu)更清晰挂谍,便于對(duì)瀏覽器、搜索引擎解析;即使在沒有樣式CSS情況下也以一種文檔格式顯示瞎饲,并且是容易閱讀的;搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重口叙,利于SEO;使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊,便于閱讀維護(hù)理解嗅战。
HTML5的離線儲(chǔ)存怎么使用妄田,工作原理能不能解釋一下?
在用戶沒有與因特網(wǎng)連接時(shí)仗哨,可以正常訪問站點(diǎn)或應(yīng)用形庭,在用戶與因特網(wǎng)連接時(shí),更新用戶機(jī)器上的緩存文件厌漂。
原理:
HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))萨醒,通過這個(gè)文件上的解析清單離線存儲(chǔ)資源,這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來苇倡。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)富纸,瀏覽器會(huì)通過被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示。
如何使用:
1旨椒、頁(yè)面頭部像下面一樣加入一個(gè)manifest的屬性晓褪;
2、在cache.manifest文件的編寫離線存儲(chǔ)的資源综慎;
CACHE MANIFEST
#v0.11
CACHE:
js/app.js css/style.css
NETWORK: resourse/logo.png
FALLBACK:
/ /offline.html
3涣仿、在離線狀態(tài)時(shí),操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)示惊。
詳細(xì)情況請(qǐng)參考:HTML5:離線存儲(chǔ)
請(qǐng)描述一下 cookies好港,sessionStorage 和 localStorage 的區(qū)別?
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端(Client Side)上的數(shù)據(jù)(通常經(jīng)過加密)米罚。
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要)钧汹,記會(huì)在瀏覽器和服務(wù)器間來回傳遞。
sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器录择,僅在本地保存拔莱。存儲(chǔ)大型虢怠: cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制塘秦,但比cookie大得多讼渊,可以達(dá)到5M或更大。
有期時(shí)間: localStorage 存儲(chǔ)持久數(shù)據(jù)嗤形,瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)精偿;
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。 cookie 設(shè)置的cookie過期時(shí)間之前一直有效赋兵,即使窗口或?yàn)g覽器關(guān)閉
iframe有那些缺點(diǎn)?
*iframe會(huì)阻塞主頁(yè)面的Onload事件搔预;
*搜索引擎的檢索程序無法解讀這種頁(yè)面霹期,不利于SEO;
*iframe和主頁(yè)面共享連接池,而瀏覽器對(duì)相同域的連接有限制拯田,所以會(huì)影響頁(yè)面的并行加載历造。
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe船庇,最好是通過javascript動(dòng)態(tài)給iframe添加src屬性值吭产,這樣可以繞開以上兩個(gè)問題。
Label的作用是什么鸭轮?是怎么用的臣淤?
label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上窃爷。
<label for="Name">Number:</label><input type="“text“name=" name""="">
<label>Date:<input type="text"></label>
HTML5的form如何關(guān)閉自動(dòng)完成功能邑蒋?
給不想要提示的 form 或某個(gè) input 設(shè)置為 autocomplete=off。
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信? (阿里)
WebSocket按厘、SharedWorker医吊;
也可以調(diào)用localstorge、cookies等本地存儲(chǔ)方式逮京;
localstorge另一個(gè)瀏覽上下文里被添加卿堂、修改或刪除時(shí),它都會(huì)觸發(fā)一個(gè)事件懒棉,我們通過監(jiān)聽事件草描,控制它的值來進(jìn)行頁(yè)面信息通信;
注意quirks:Safari 在無痕模式下設(shè)置localstorge值時(shí)會(huì)拋出 QuotaExceededError 的異常
webSocket如何兼容低瀏覽器漓藕?(阿里)
Adobe Flash Socket 陶珠、
ActiveX HTMLFile (IE) 、
基于 multipart 編碼發(fā)送 XHR 享钞、
基于長(zhǎng)輪詢的 XHR
頁(yè)面可見性(Page Visibility API) 可以有哪些用途揍诽?
通過 visibilityState 的值檢測(cè)頁(yè)面當(dāng)前是否可見诀蓉,以及打開網(wǎng)頁(yè)的時(shí)間等;在頁(yè)面被切換到其他后臺(tái)進(jìn)程的時(shí)候,自動(dòng)暫停音樂或視頻的播放暑脆;
如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域渠啤?
1、map+area或者svg
2添吗、border-radius
3沥曹、純js實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡(jiǎn)單算法、獲取鼠標(biāo)坐標(biāo)等等
實(shí)現(xiàn)不使用 border 畫出1px高的線碟联,在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果妓美。
<div style="height:1px;overflow:hidden;background:red"></div>
網(wǎng)頁(yè)驗(yàn)證碼是干嘛的,是為了解決什么安全問題鲤孵。
區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序壶栋。可以防止惡意破解密碼普监、刷票贵试、論壇灌水;有效防止黑客對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試凯正。
title與h1的區(qū)別毙玻、b與strong的區(qū)別、i與em的區(qū)別廊散?
title屬性沒有明確意義只表示是個(gè)標(biāo)題桑滩,H1則表示層次明確的標(biāo)題,對(duì)頁(yè)面信息的抓取也有很大的影響奸汇;
strong是標(biāo)明重點(diǎn)內(nèi)容施符,有語(yǔ)氣加強(qiáng)的含義,使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí):<strong>會(huì)重讀擂找,而<b>是展示強(qiáng)調(diào)內(nèi)容戳吝。
i內(nèi)容展示為斜體,em表示強(qiáng)調(diào)的文本贯涎;
Physical Style Elements -- 自然樣式標(biāo)簽b, i, u, s, preSemantic Style Elements -- 語(yǔ)義樣式標(biāo)簽strong, em, ins, del, code應(yīng)該準(zhǔn)確使用語(yǔ)義樣式標(biāo)簽, 但不能濫用, 如果不能確定時(shí)首選使用自然樣式標(biāo)簽听哭。
</b></strong>
題目收集于網(wǎng)絡(luò)