web前端面試試題（html）（附答案）

web前端面試試題（html）（附答案）
1.Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

(1)、聲明位于位于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)無(wú)法工作。

2.HTML5 為什么只需要寫(xiě) ?

HTML5 不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來(lái)規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行);

而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。

3.行內(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）常見(jiàn)的空元素：
    <br> <hr> <img> <input> <link> <meta>
    鮮為人知的是：
    <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
不同瀏覽器（版本）、HTML4（5）、CSS2等實(shí)際略有差異

4.頁(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)簽，無(wú)兼容問(wèn)題;

5.介紹一下你對(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來(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)核就傾向于只指渲染引擎。

6.常見(jiàn)的瀏覽器內(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的分支)]

7.html5有哪些新特性、移除了那些元素?如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題?如何區(qū)分 HTML 和 HTML5?

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

繪畫(huà) 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支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，

可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，

瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。

當(dāng)然也可以直接使用成熟的框架、比如html5shim;

簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解?

用正確的標(biāo)簽做正確的事情。

html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析;

即使在沒(méi)有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;

搜索引擎的爬蟲(chóng)也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;

使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下?

在用戶沒(méi)有與因特網(wǎng)連接時(shí)，可以正常訪問(wèn)站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件。

原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))，通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過(guò)被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示。

如何使用：

1、頁(yè)面頭部像下面一樣加入一個(gè)manifest的屬性;

2、在cache.manifest文件的編寫(xiě)離線存儲(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)。

瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢?

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

離線的情況下，瀏覽器就直接使用離線存儲(chǔ)的資源。

請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別?

cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端(Client Side)上的數(shù)據(jù)(通常經(jīng)過(guò)加密)。

cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要)，記會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞。

sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。

存儲(chǔ)大?。?/p>

cookie數(shù)據(jù)大小不能超過(guò)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過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉

iframe有那些缺點(diǎn)?

*iframe會(huì)阻塞主頁(yè)面的Onload事件;

*搜索引擎的檢索程序無(wú)法解讀這種頁(yè)面，不利于SEO;

*iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載。

*使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過(guò)javascript動(dòng)態(tài)給iframe添加src屬性值，這樣可以繞開(kāi)以上兩個(gè)問(wèn)題。

Label的作用是什么?是怎么用的?

label標(biāo)簽來(lái)定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

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è)事件，

我們通過(guò)監(jiān)聽(tīng)事件，控制它的值來(lái)進(jìn)行頁(yè)面信息通信;

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

webSocket如何兼容低瀏覽器?

Adobe Flash Socket 、

ActiveX HTMLFile (IE) 、

基于 multipart 編碼發(fā)送 XHR 、

基于長(zhǎng)輪詢的 XHR

頁(yè)面可見(jiàn)性(Page Visibility API) 可以有哪些用途?

通過(guò) visibilityState 的值檢測(cè)頁(yè)面當(dāng)前是否可見(jiàn)，以及打開(kāi)網(wǎng)頁(yè)的時(shí)間等;

在頁(yè)面被切換到其他后臺(tái)進(jìn)程的時(shí)候，自動(dòng)暫停音樂(lè)或視頻的播放;

如何在頁(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 畫(huà)出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果。

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

區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序?？梢苑乐箰阂馄平饷艽a、刷票、論壇灌水;

有效防止黑客對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。

title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別?

title屬性沒(méi)有明確意義只表示是個(gè)標(biāo)題，H1則表示層次明確的標(biāo)題，對(duì)頁(yè)面信息的抓取也有很大的影響;

strong是標(biāo)明重點(diǎn)內(nèi)容，有語(yǔ)氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：會(huì)重讀，而是展示強(qiáng)調(diào)內(nèi)容。

i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本;

Physical Style Elements -- 自然樣式標(biāo)簽

b, i, u, s, pre

Semantic Style Elements -- 語(yǔ)義樣式標(biāo)簽

strong, em, ins, del, code

應(yīng)該準(zhǔn)確使用語(yǔ)義樣式標(biāo)簽, 但不能濫用, 如果不能確定時(shí)首選使用自然樣式標(biāo)簽。