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

時間 2019-11-15

原文原文鏈接

______________________________________________________________________________________________html

題目&答案

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有哪些新特性、移除了那些元素？如何處理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的問題，因此回答出問題的用戶就能夠被認爲是人類。