前端開發面試題總結之——HTML
阿新 • • 發佈：2019-09-13
本文轉載於:猿2048網站➥前端開發面試題總結之——HTML
______________________________________________________________________________________________
相關知識點
web標準、 web語義化、 瀏覽器核心、 相容性、 html5...
題目&答案
- Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
（1）<!DOCTYPE>宣告位於HTML文件中的第一行，處於<html>標籤之前，用於告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。 （2）標準模式的排版和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。 （3）如果HTML文件包含形式完整的DOCTYPE，那麼他一般以標準模式呈現。對於HTML4.01文件，包含嚴格DTD的DOCTYPE常常導致頁面已標準模式呈現。DOCTYPE不存在或者格式不正確會導致文件已混雜模式呈現。
- 請描述一個網頁從開始請求道最終顯示的完整過程？
一個網頁從請求到最終顯示的完整過程一般可以分為如下7個步驟： （1）在瀏覽器中輸入網址； （2）傳送至DNS伺服器並獲得域名對應的WEB伺服器IP地址； （3）與WEB伺服器建立TCP連線； （4）瀏覽器向WEB伺服器的IP地址傳送相應的HTTP請求； （5）WEB伺服器響應請求並返回指定URL的資料，或錯誤資訊，如果設定重定向，則重定向到新的URL地址； （6）瀏覽器下載資料後解析HTML原始檔，解析的過程中實現對頁面的排版，解析完成後在瀏覽器中顯示基礎頁面； （7）分析頁面中的超連結並顯示在當前頁面，重複以上過程直至無超連結需要傳送，完成全部資料顯示。
- HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
（1）HTML5不基於SGML，因此不需要對DTD進行引用，但是需要DOCTYPE來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）；
（2）HTML4.01基於SGML，所以需要對DTD進行引用，才能讓瀏覽器知道該文件所使用的文件型別。- 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
***行內元素***： a - 錨點，em - 強調，strong - 粗體強調，span - 定義文字內區塊，i - 斜體,img - 圖片,b - 粗體，label - 表格標籤，select - 專案選擇，textarea - 多行文字輸入框，sub - 下標， sup - 上標，q - 短引用； ***塊元素***： div - 常用塊級，dl - 定義列表，dt，dd，ul- 非排序列表，li，ol-排序表單，p-段落，h1，h2，h3，h4，h5-標題，table-表格，fieldset - form控制組，form - 表單， ***空元素***： br-換行，hr-水平分割線；
- 介紹一下你對瀏覽器核心的理解？
瀏覽器最重要或者說核心的部分是“Rendering Engine”，可大概譯為“渲染引擎”，不過我們一般習慣將之稱為“瀏覽器核心”。負責對網頁語法的解釋（如標準通用標記語言下的一個應用HTML、JavaScript）並渲染（顯示）網頁。 所以，通常所謂的瀏覽器核心也就是瀏覽器所採用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式資訊。不同的瀏覽器核心對網頁編寫語法的解釋也有不同，因此同一網頁在不同的核心的瀏覽器裡的渲染（顯示）效果也可能不同，這也是網頁編寫者需要在不同核心的瀏覽器中測試網頁顯示效果的原因。- 常見的瀏覽器核心有哪些？
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新標籤的瀏覽器相容問題？如何區分 ?
***新增了以下的幾大類元素***
內容元素，article、footer、header、nav、section。
表單控制元件，calendar、date、time、email、url、search。
控制元件元素，webworker, websockt, Geolocation。
***移出的元素有下列這些****
顯現層元素：basefont，big，center，font, s，strike，tt，u。
效能較差元素：frame，frameset，noframes。
HTML5已形成了最終的標準，概括來講，它主要是關於影象，位置，儲存，多工等功能的增加。
新增的元素有繪畫 canvas ，用於媒介回放的 video 和 audio 元素，本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失，而sessionStorage的資料在瀏覽器關閉後自動刪除，此外，還新增了以下的幾大類元素。
內容元素，article、footer、header、nav、section。
表單控制元件，calendar、date、time、email、url、search。
控制元件元素，webworker, websockt, Geolocation。
***移出的元素有下列這些***
顯現層元素：basefont，big，center，font, s，strike，tt，u。
效能較差元素：frame，frameset，noframes。
***新的技術***
canvas,svg,webworker, websocket, Geolocation......- 簡述一下你對HTML語義化的理解。
（1）HTML語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析；
（2）即使在沒有樣式CSS的情況下也能以一種文件格式顯示，並且是容易閱讀的；
（3）搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，有利於SEO；
（4）使閱讀原始碼的人更容易將網站分塊，便於閱讀、維護和理解。- 瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
線上情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過app並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。
離線情況下，瀏覽器就直接使用離線儲存的資源。- 請描述一下 cookies，sessionStorage 和 localStorage 的區別？
Web Storage有兩種形式：LocalStorage（本地儲存）和sessionStorage（會話儲存）。這兩種方式都允許開發者使用js設定的鍵值對進行操作，在在重新載入不同的頁面的時候讀出它們。這一點與cookie類似。
（1）與cookie不同的是：Web Storage資料完全儲存在客戶端，不需要通過瀏覽器的請求將資料傳給伺服器，因此x相比cookie來說能夠儲存更多的資料，大概5M左右。
（2）LocalStorage和sessionStorage功能上是一樣的，但是儲存持久時間不一樣。
LocalStorage：瀏覽器關閉了資料仍然可以儲存下來，並可用於所有同源（相同的域名、協議和埠）視窗（或標籤頁）；
sessionStorage：資料儲存在視窗物件中，視窗關閉後對應的視窗物件消失，儲存的資料也會丟失。
注意：sessionStorage 都可以用localStorage 來代替，但需要記住的是，在視窗或者標籤頁關閉時，使用sessionStorage 儲存的資料會丟失。
（3）使用 local storage和session storage主要通過在js中操作這兩個物件來實現，分別為window.localStorage和window.sessionStorage. 這兩個物件均是Storage類的兩個例項，自然也具有Storage類的屬性和方法。- iframe 有哪些缺點？
（1）iframe會阻塞主頁面的Onload事件；
（2）搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO；
（3）iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。
（4）使用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可以有哪些用途？
在頁面被切換到其他後臺程序的時候，自動暫停音樂或視訊的播放。- 實現 不使用 border 畫出 1px 高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果？
<div style="height:1px;overflow:hidden;background:#ccc"></div>- 網頁驗證碼是幹什麼用的？是為了解決什麼安全問題？
可以防止：惡意破解密碼、刷票、論壇灌水，有效防止某個黑客對某一個特定註冊使用者用特定程式暴力破解方式進行不斷的登陸嘗試，實際上用驗證碼是現在很多網站通行的方式，我們利用比較簡易的方式實現了這個功能。這個問題可以由計算機生成並評判，但是必須只有人類才能解答。由於計算機無法解答CAPTCHA的問題，所以回答出問題的使用者就可以被認為是人類。相關係列：
前端開發面試題總結之——CSS3
前端開發面試題總結之——JAVASCRIPT（一）
前端開發面試題總結之——JAVASCRIPT（二）
前端開發面試題總結之——JAVASCRIPT（三）
以上所有資料來源網路，如有不對的地方希望及時告知，謝