前端面試題之html篇

阿新 • • 發佈：2018-12-14

引文：

本篇文章總結了前端面試過程中常見的HTML問題，如有遺漏，歡迎補充。

同時也歡迎各位關注我們的微信公眾號：前端指南。每天早上6點整準時推送前端資訊，包括但不限於技術文章，面試經驗，校招資訊。

微信掃二維碼關注

Doctype 作用？標準模式與相容模式各有什麼區別?

宣告位於HTML文件中的第一行，處於``標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。
標準模式的排版和 JS 運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

HTML5 為什麼只需要寫 `<!DOCTYPE HTML>`？

HTML5 不基於 SGML，因此不需要對 DTD 進行引用，但是需要 doctype 來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）；
而 HTML4.01 基於 SGML,所以需要對 DTD 進行引用，才能告知瀏覽器文件所使用的文件型別。

行內元素有哪些？塊級元素有哪些？空(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 h2 h3 h4…p
空元素：
- 常見: br hr img input link meta
- 不常見: area base col command embed keygen param source track wbr

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

link 屬於 XHTML 標籤，除了載入 CSS 外，還能用於定義 RSS, 定義 rel 連線屬性等作用；而@import 是 CSS 提供的，只能用於載入 CSS;

頁面被載入的時，link 會同時被載入，而@import 引用的 CSS 會等到頁面被載入完再載入;
import 是 CSS2.1 提出的，只在 IE5 以上才能被識別，而 link 是 XHTML 標籤，無相容問題;
link 支援使用 js 控制 DOM 去改變樣式，而@import 不支援;

介紹一下你對瀏覽器核心的理解？

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

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

JS 引擎則：解析和執行 javascript 來實現網頁的動態效果。

最開始渲染引擎和 JS 引擎並沒有區分的很明確，後來 JS 引擎越來越獨立，核心就傾向於只指渲染引擎。

常見的瀏覽器核心有哪些？

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

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

HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加
- 繪畫 canvas
- 用於媒介回放的 video 和 audio 元素
- 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失
- sessionStorage 的資料在瀏覽器關閉後自動刪除
- 語意化更好的內容元素，比如 article、footer、header、nav、section
- 表單控制元件，calendar、date、time、email、url、search
- 新的技術 webworker, websocket, Geolocation
移除的元素：
- 純表現的元素：basefont，big，center，font, s，strike，tt，u;
- 對可用性產生負面影響的元素：frame，frameset，noframes；
支援 HTML5 新標籤：
- IE8/IE7/IE6 支援通過 document.createElement 方法產生的標籤，
- 可以利用這一特性讓這些瀏覽器支援 HTML5 新標籤，
- 瀏覽器支援新標籤後，還需要新增標籤預設的樣式。
- 當然也可以直接使用成熟的框架、比如 html5shim;
```

```
如何區分 HTML5： DOCTYPE 宣告\新增的結構元素\功能元素

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

用正確的標籤做正確的事情。
html 語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
即使在沒有樣式 CSS 情況下也以一種文件格式顯示，並且是容易閱讀的;
搜尋引擎的爬蟲也依賴於 HTML 標記來確定上下文和各個關鍵字的權重，利於 SEO;
使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

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

在使用者沒有與因特網連線時，可以正常訪問站點或應用，在使用者與因特網連線時，更新使用者機器上的快取檔案。

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

如何使用：

頁面頭部像下面一樣加入一個 manifest 的屬性；
在 cache.manifest 檔案的編寫離線儲存的資源

CACHE MANIFEST
#v1.0

CACHE:
js/app.js
css/style.css

NETWORK:
assets/logo.png

FALLBACK:
/html5/ /404.html

在離線狀態時，操作 window.applicationCache 進行需求實現。

瀏覽器是怎麼對 HTML5 的離線儲存資源進行管理和載入的呢？

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

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

cookie 是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）
cookie 資料始終在同源的 http 請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞。
sessionStorage 和 localStorage 不會自動把資料發給伺服器，僅在本地儲存。
儲存大小：
- cookie 資料大小不能超過 4k。
- sessionStorage 和 localStorage 雖然也有儲存大小的限制，但比 cookie 大得多，可以達到 5M 或更大。
有效期（生命週期）：
- localStorage: 儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
- sessionStorage: 資料在當前瀏覽器視窗關閉後自動刪除。
- cookie: 設定的 cookie 過期時間之前一直有效，即使視窗或瀏覽器關閉

iframe 有那些缺點？

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

使用 iframe 之前需要考慮這兩個缺點。如果需要使用 iframe，最好是通過 javascript

動態給 iframe 新增 src 屬性值，這樣可以繞開以上兩個問題。

Label 的作用是什麼？是怎麼用的？

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

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

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

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

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

WebSocket、SharedWorker；
也可以呼叫 localstorge、cookies 等本地儲存方式；

localstorge 另一個瀏覽上下文裡被新增、修改或刪除時，它都會觸發一個事件，

我們通過監聽事件，控制它的值來進行頁面資訊通訊；

注意 quirks：Safari 在無痕模式下設定 localstorge 值時會丟擲 QuotaExceededError 的異常；

webSocket 如何相容低瀏覽器？(阿里)

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

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

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

如何在頁面上實現一個圓形的可點選區域？

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

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

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

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

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

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

title 屬性沒有明確意義只表示是個標題，H1 則表示層次明確的標題，對頁面資訊的抓取也有很大的影響；
strong 是標明重點內容，有語氣加強的含義，使用閱讀裝置閱讀網路時：strong 會重讀，而 b 是展示強調內容。
i 內容展示為斜體，em 表示強調的文字；

Physical Style Elements -- 自然樣式標籤

b, i, u, s, pre

Semantic Style Elements -- 語義樣式標籤

strong, em, ins, del, code

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