前端開發面試題之 HTML
阿新 • • 發佈：2019-01-03
“每18至24個月，前端都會難一倍”
——赫門 “2015深JS大會《前端服務化之路》主題演講”
知識點
對Web標準的理解、瀏覽器核心差異、相容性、hack、HTML5......
題目&答案
- Doctype作用？標準模式與相容模式各有什麼區別？
（1）<!DOCTYPE>宣告位於HTML文件中的第一行，處於<html>標籤之前，用於告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。 （2）標準模式的排版和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。
- HTML5為什麼只需要寫<!DOCTYPE HTML>？
HTML5不基於SGML，因此不需要對DTD進行引用，但是需要DOCTYPE來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）； HTML4.01基於SGML，所以需要對DTD進行引用，才能讓瀏覽器知道該文件所使用的文件型別。
- 行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？
宣告：CSS規範規定，每個元素都有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>
- 頁面匯入樣式時，使用
Link和@import有什麼區別？（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS; （2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入; （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題;
- 介紹一下你對瀏覽器核心的理解
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。 （1）渲染引擎：負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。 （2）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的分支）] EdgeHTML核心：Microsoft Edge。 [此核心其實是從MSHTML fork而來，刪掉了幾乎所有的IE私有特性]
-
HTML5有哪些新特性、移除了哪些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。 繪畫 canvas; 用於媒介回放的 video 和 audio 元素; 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失; sessionStorage 的資料在瀏覽器關閉後自動刪除; 語意化更好的內容元素，比如 article、footer、header、nav、section; 表單控制元件，calendar、date、time、email、url、search; 新的技術webworker, websockt, Geolocation; -
簡述一下你對HTML語義化的理解。
用正確的標籤做正確的事情。 HTML語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析； 即使在沒有樣式CSS的情況下也能以一種文件格式顯示，並且是容易閱讀的； 搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，有利於SEO； 使閱讀原始碼的人更容易將網站分塊，便於閱讀、維護和理解。
- HTML5的離線儲存怎麼使用？能否解釋一下工作原理？
在使用者沒有連線英特網時，可以正常訪問站點和應用；在使用者連線英特網時，更新使用者機器上的快取檔案。 `原理`：HTML5的離線儲存是基於一個新建的 `.appcache` 檔案的快取機制（並非儲存技術），通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存下來。之後當網路處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示。 使用方法： (1) 在頁面頭部像下面一樣加入一個 manifest 的屬性； (2) 在 cache.manifest 檔案裡編寫離線儲存資源； CACHE MANIFEST #v0.11 CACHE： js/app.js css/style.css NETWORK: resource/logo.png FALLBACK： / /offline.html (3) 在離線狀態時，操作 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或更大。 有效時間： cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉 sessionStorage 資料在當前瀏覽器視窗關閉後自動刪除 localStorage 儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料
- 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`。
- 如何實現瀏覽器內多個標籤頁之間的通訊？（阿里）
呼叫 localStorage、cookies 等本地儲存方式
- webSocket 如何相容低瀏覽器？（阿里）
Adobe Flash Socket ActiveX HTMLFile（IE） 基於 multipart 編碼傳送 XHR 基於長輪詢的 XHR
- 頁面可見性（Page Visibility） API可以有哪些用途？
在頁面被切換到其他後臺程序的時候，自動暫停音樂或視訊的播放。
- 如何在頁面上實現一個圓形的可點選區域？
(1) map + area 或者 svg (2) border-radius (3) 純js實現，需要求一個點在不在圓上的簡單演算法、獲取滑鼠座標等等
- 實現 不使用 border 畫出 1px 高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:#ccc"></div>
- 網頁驗證碼是幹什麼用的？是為了解決什麼安全問題？
區分使用者是計算機還是人的公共全自動程式。可以防止：惡意破解密碼、刷票、論壇灌水； 有效防止黑客對某一個特定註冊使用者用特定程式通過暴力破解的方式進行不斷的登入嘗試。
文／曉鬆（簡書作者）
原文連結：http://www.jianshu.com/p/65fa501e4683
著作權歸作者所有，轉載請聯絡作者獲得授權，並標註“簡書作者”。