前端開發麵試題總結之——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 為什麼只需要寫？

（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的問題，所以回答出問題的用戶就可以被認為是人類。

以上所有資料來源網路，如有不對的地方希望及時告知，謝謝！

前端開發麵試題總結之——HTML

相關知識點

題目&答案