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

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

(1)、聲明位于位于HTML文檔中的第一行，處于 標簽之前。告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現(xiàn)。

(2)、標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

2.HTML5 為什么只需要寫 ?

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

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

3.行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?

首先：CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。

（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：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>
不同瀏覽器（版本）、HTML4（5）、CSS2等實際略有差異

4.頁面導入樣式時，使用link和@import有什么區(qū)別?

(1)link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的，只能用于加載CSS;

(2)頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

(3)import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;

5.介紹一下你對瀏覽器內核的理解?

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

渲染引擎：負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。

JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網頁的動態(tài)效果。

最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。

6.常見的瀏覽器內核有哪些?

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

Gecko內核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等

Presto內核：Opera7及以上。 [Opera內核原為：Presto，現(xiàn)為：Blink;]

Webkit內核：Safari,Chrome等。 [ Chrome的：Blink(WebKit的分支)]

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

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

繪畫 canvas;

用于媒介回放的 video 和 audio 元素;

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失;

sessionStorage 的數據在瀏覽器關閉后自動刪除;

語意化更好的內容元素，比如 article、footer、header、nav、section;

表單控件，calendar、date、time、email、url、search;

新的技術webworker, websocket, Geolocation;

移除的元素：

純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;

對可用性產生負面影響的元素：frame，frameset，noframes;

* 支持HTML5新標簽：

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，

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

瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

當然也可以直接使用成熟的框架、比如html5shim;

簡述一下你對HTML語義化的理解?

用正確的標簽做正確的事情。

html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析;

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

搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;

使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

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

在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。

原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數據進行頁面展示。

如何使用：

1、頁面頭部像下面一樣加入一個manifest的屬性;

2、在cache.manifest文件的編寫離線存儲的資源;

CACHE MANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

/ /offline.html

3、在離線狀態(tài)時，操作window.applicationCache進行需求實現(xiàn)。

瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢?

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

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

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

cookie是網站為了標示用戶身份而儲存在用戶本地終端(Client Side)上的數據(通常經過加密)。

cookie數據始終在同源的http請求中攜帶(即使不需要)，記會在瀏覽器和服務器間來回傳遞。

sessionStorage和localStorage不會自動把數據發(fā)給服務器，僅在本地保存。

存儲大?。?/p>

cookie數據大小不能超過4k。

sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

有期時間：

localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據;

sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。

cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

iframe有那些缺點?

*iframe會阻塞主頁面的Onload事件;

*搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;

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

*使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題。

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

label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。

HTML5的form如何關閉自動完成功能?

給不想要提示的 form 或某個 input 設置為 autocomplete=off。

如何實現(xiàn)瀏覽器內多個標簽頁之間的通信?

WebSocket、SharedWorker;

也可以調用localstorge、cookies等本地存儲方式;

localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發(fā)一個事件，

我們通過監(jiān)聽事件，控制它的值來進行頁面信息通信;

注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常;

webSocket如何兼容低瀏覽器?

Adobe Flash Socket 、

ActiveX HTMLFile (IE) 、

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

基于長輪詢的 XHR

頁面可見性(Page Visibility API) 可以有哪些用途?

通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;

在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放;

如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域?

1、map+area或者svg

2、border-radius

3、純js實現(xiàn) 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

實現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。

網頁驗證碼是干嘛的，是為了解決什么安全問題。

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

有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

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

title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響;

strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：會重讀，而是展示強調內容。

i內容展示為斜體，em表示強調的文本;

Physical Style Elements -- 自然樣式標簽

b, i, u, s, pre

Semantic Style Elements -- 語義樣式標簽

strong, em, ins, del, code

應該準確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽。