前端開發面試題 — html篇-有解無憂

正值跳槽的金三銀四月，在四月的中旬之際，博主為大家整理了幾篇前端面試題，希望不會太遲

1.Doctype作用？標準模式與兼容模式各有什么區別?

（1）<!DOCTYPE> 宣告位于HTML檔案中的第一行，處于 <html> 標簽之前，告知瀏覽器的決議器用什么檔案標準決議這個檔案，DOCTYPE不存在或格式不正確會導致檔案以兼容模式呈現，

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

2.行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

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

行內元素有：

<a> <b> <span> <img> <input> <select> <strong>（強調的語氣）

塊級元素有：

<div> <ul> <ol> <li> <dl> <dt> <dd> <h1>~<h6> <p>

常見空元素：

<br> <hr> <img> <input> <link> <meta>

鮮為人知的是：

<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

3.頁面匯入樣式時，使用link和@import有什么區別？

（1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS，定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS；
（2）頁面被加載的時，link會同時被加載，而@import參考的CSS會等到頁面被加載完再加載；
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題；
（4）link支持使用js控制DOM去改變樣式，而@import不支持，

4.對瀏覽器內核的理解？

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

渲染引擎：負責取得網頁的內容（HTML、XML、影像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示幕或列印機，瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同，所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要內核，
JS引擎：決議和執行javascript來實作網頁的動態效果，
最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎，

5.常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon，TT，The World，360，搜狗瀏覽器等，[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF，MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上， [Opera內核原為：Presto，現為：Blink;]
Webkit內核：Safari，Chrome等， [ Chrome的：Blink（WebKit的分支）]

6.html5有哪些新特性？移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

（1）HTML5 現在已經不是 SGML 的子集，主要是關于影像，位置，存盤，多任務等功能的增加，

繪畫 canvas；
用于媒介回放的 video 和 audio 元素；
本地離線存盤 localStorage 長期存盤資料，瀏覽器關閉后資料不丟失；sessionStorage 的資料在瀏覽器關閉后自動洗掉；
語意化更好的內容元素比如 article、footer、header、nav、section
表單控制元件 calendar、date、time、email、url、search
新的技術 webworker、 websocket、 Geolocation

（2）移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；

（3）瀏覽器兼容

支持HTML5新標簽：IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式，
當然也可以直接使用成熟的框架、比如html5shim，

<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

（4）區分HTML5與HTML

DOCTYPE宣告\新增的結構元素\功能元素

7.簡述一下對HTML語意化的理解？

（1）用正確的標簽做正確的事情；
（2）html語意化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎決議；
（3）即使在沒有樣式CSS情況下也以一種檔案格式顯示，并且是容易閱讀的；
（4）搜索引擎的爬蟲也依賴于HTML標記來確定背景關系和各個關鍵字的權重，利于SEO；
（5）使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解，

8.HTML5的離線儲存怎么使用，作業原理能不能解釋一下？

原理：

HTML5的離線存盤是基于一個新建的.appcache檔案的快取機制(不是存盤技術)，通過這個檔案上的決議清單離線存盤資源，這些資源就會像cookie一樣被存盤了下來，之后當網路在處于離線狀態下時，瀏覽器會通過被離線存盤的資料進行頁面展示，

如何使用：

（1）頁面頭部像下面一樣加入一個manifest的屬性；
（2）在cache.manifest檔案的撰寫離線存盤的資源；

CACHE MANIFEST // 第一行CACHE MANIFEST為固定格式，必須寫在前面，
#v0.11  // 以#號開頭的是注釋，一般會在第二行寫個版本號
CACHE: // （必須） 標識出哪些檔案需要快取，可以是相對路徑也可以是絕對路徑，
    app.js
    css/style.css
NETWORK:  // （可選）這一部分是要繞過快取直接讀取的檔案，可以使用通配符＊，
    resourse/logo.png  //  “resourse/logo.png” 永遠不會被快取，且離線時是不可用的：
    *    // 所有其他資源/檔案都需要因特網連接：
FALLBACK: //（可選） 一個后備頁面，當資源無法訪問時，瀏覽器會使用該頁面，每條記錄都列出兩個 URI—第一個表示資源，第二個表示后備頁面，
    /html5/ /404.html   //表示“404.html” 替代 /html5/ 目錄中的所有檔案，
    *.html /404.html   //表示“404.html” 替代所有檔案，

（3）在離線狀態時，操作window.applicationCache進行需求實作，

更新快取：

更新manifest檔案
通過javascript操作
清除瀏覽器快取

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

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

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

10.請描述一下 cookies，sessionStorage 和 localStorage 的區別？

定義：

cookie是網站為了標示用戶身份而儲存在用戶本地終端（ClientSide）上的資料（通常經過加密），cookie資料始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞，
sessionStorage和localStorage不會自動把資料發給服務器，僅在本地保存，

存盤大小：

cookie 資料大小不能超過4k；
sessionStorage 和 localStorage雖然也有存盤大小的限制，但比cookie大得多，可以達到5M或更大，

有效時間：

localStorage 存盤持久資料，瀏覽器關閉后資料不丟失除非主動洗掉資料；
sessionStorage 資料在當前瀏覽器視窗關閉后自動洗掉；
cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉，

11.iframe有那些缺點？

iframe 會阻塞主頁面的Onload事件；
搜索引擎的檢索程式無法解讀這種頁面，不利于SEO;
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載，

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

12.Label的作用是什么？是怎么用的？

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

<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>

13.HTML5的form如何關閉自動完成功能？

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

14.如何實作瀏覽器內多個標簽頁之間的通信? (阿里)

WebSocket、SharedWorker；
呼叫localstorge、cookies等本地存盤方式；

localstorge另一個瀏覽背景關系里被添加、修改或洗掉時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面資訊通信；

注意quirks：Safari 在無痕模式下設定localstorge值時會拋出 QuotaExceededError 的例外；

15.webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 編碼發送 XHR 、
基于長輪詢的 XHR

16.頁面可見性（Page Visibility API）可以有哪些用途？

通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
在頁面被切換到其他后臺行程的時候，自動暫停音樂或視頻的播放；

17.如何在頁面上實作一個圓形的可點擊區域？

map+area或者svg
border-radius
純js實作需要求一個點在不在圓上簡單演算法、獲取滑鼠坐標等等

18.實作不使用 border畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果，

<div style="height:1px;overflow:hidden;background:red"></div>

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

區分用戶是計算機還是人的公共全自動程式，可以防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定注冊用戶用特定程式暴力破解方式進行不斷的登陸嘗試，

20.title與h1的區別、b與strong的區別、i與em的區別？

（1）title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面資訊的抓取也有很大的影響；

（2）strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網路時：<strong>會重讀，而<b>是展示強調內容，

（3）i內容展示為斜體，em表示強調的文本；

Physical Style Elements -- 自然樣式標簽

b, i, u, s, pre

Semantic Style Elements -- 語意樣式標簽

strong, em, ins, del, code

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275712.html

標籤：HTML5

上一篇：怎么對進入網站的用戶實作分組

下一篇：前端面試之價值30k的面試題

前端開發面試題 — html篇