HTML 面試題總結

時間 2019-12-31

標籤 html 面試總結欄目 HTML 简体版

原文原文鏈接

doctype(文檔類型) 的做用是什麼？

聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。有如下兩個值：css

怪異模式，瀏覽器使用本身的怪異模式解析渲染頁面。
標準模式，瀏覽器使用W3C的標準解析渲染頁面。

這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明,瀏覽器按照本身的方式解析渲染頁面（怪異模式），在不一樣的瀏覽器就會顯示不一樣的樣式。html

注意如下幾點：前端

<!DOCTYPE> 聲明不是 HTML 標籤；
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於標籤以前。
<!DOCTYPE> 不區分大小寫
HTML 5的doctype聲明是<!DOCTYPE html>

在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，由於 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。 HTML5 不基於 SGML，因此不須要引用 DTD。html5

瀏覽器標準模式和怪異模式有什麼區別？

二者的區別：數據庫

盒模型的解析上：
在strict mode中：width是內容寬度
在quirks mode中：width則是元素的實際寬度，而內容寬度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
圖片元素垂直對齊方式
在strict mode中：vertical-align 屬性默認取值爲 baseline
在quirks mode中：vertical align 屬性默認爲 bottom，所以，在圖片底部會有幾像素的空間。
< table >元素中的字體
Quirks Mode 下，對於 table 元素，字體的某些屬性將不會從 body 或其餘封閉元素繼承到 table 中，特別是 font-size 屬性。
內聯元素的尺寸

在 Standards Mode 下，non-replaced inline 元素沒法自定義大小，而在 Quirks Mode 下，定義這些元素的 width 和 height 屬性，可以影響該元素顯示的大小尺寸。瀏覽器

元素的百分比高度

當一個元素使用百分比高度時，在 Standards Mode 下，高度取決於內容的變化，而在 Quirks Mode 下，百分比高度則被正確應用。緩存

元素溢出的處理

在 Standard Mode 下，overflow 取默認值 visible，即溢出可見，這種狀況下，溢出內容不會被裁剪，呈如今元素框外。而在 Quirks Mode 下，該溢出被當作擴展 box 來對待，即元素的大小由其內容決定，溢出不會被裁剪，元素框自動調整，包含溢出內容安全

HTML和XHTML的區別是什麼？

主要的不一樣：服務器

XHTML能夠理解爲html+xml，就是用xml的語法來規範html。
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。

若是網頁內容須要支持多語言，你會怎麼作？

考慮:cookie

應用字符集的選擇 utf-8
語言書寫習慣&導航結構
數據庫驅動型網站

具體作法：

靜態：就是爲每種語言分別準備一套頁面文件，要麼經過文件後綴名來區分不一樣語言，要麼經過子目錄來區分不一樣語言。
動態：站點內全部頁面文件都是動態頁面文件（PHP，ASP等）而不是靜態頁面文件，在須要輸出語言文字的地方統一採用語言變量來表示，這些語言變量能夠根據用戶選擇不一樣的語言賦予不一樣的值，從而可以實如今不一樣的語言環境下輸出不一樣的文字

data-屬性的做用是什麼？

data-爲前端開發者提供自定義的屬性，這些屬性集能夠經過對象的dataset屬性獲取，不支持該屬性的瀏覽器能夠經過 getAttribute方法獲取

若是把 HTML5 看做作一個開放平臺，那它的構建模塊有哪些？

開放網絡平臺（Open Web Platform）是一些開放的（免版權）技術的集合，這些技術激活了互聯網。使用開放網絡平臺時，每一個人都有權實現 Web 上的一個組件，而不用向任何人索取許可和證書。
構建模塊，指的應該是開放網絡平臺這個技術集合中的技術：
HTML
DOM
CSS
SVG
MathML
Web APIs…
EcmaScript / JavaScript
HTTP
URI
Media Accessibility Checklist

請描述 cookies、sessionStorage 和 localStorage 的區別。

共同點：都是保存在瀏覽器端，且同源的。
注意：session 在瀏覽器端只保存sessionid,session數據存儲在服務器端，且session是不能區分路徑的。此處討論的sessionStorage和localstorage爲html5特性

區別：

大小:cookie 最多隻有 4kb，而 sessionStorage 和 localStorage 大小通常能夠有 5M
生命週期:cookie 的生命週期由服務器控制，默認是關閉瀏覽器後刪除；sessionStorage 僅在當前的窗口有效，localStorage 除非手動刪除不然一直存在。
http 通訊:瀏覽器每次向服務器發送請求的時候都要帶上該域的 cookie，而 sessionStorage 和 localStorage 僅存在於瀏覽器端。
做用域:cookie 和 localStorage 在同個域名下的多個窗口都有效，sessionStorage 只在一個窗口有效，不能跨窗口共享。
易用性:sessionStorage 和 localStorage 屬於 HTML5 的 Web Storage 的 API，更加靈活易用。

Web Storage帶來的好處：

減小網絡流量：一旦數據保存在本地後，就能夠避免再向服務器請求數據，所以減小沒必要要的數據請求，減小數據在瀏覽器和服務器間沒必要要地來回傳遞。
快速顯示數據：性能好，從本地讀數據比經過網絡從服務器得到數據快得多，本地數據能夠即時得到。再加上網頁自己也能夠有緩存，所以整個頁面和數據都在本地的話，能夠當即顯示。
臨時存儲：不少時候數據只須要在用戶瀏覽一組頁面期間使用，關閉窗口後數據就能夠丟棄了，這種狀況使用sessionStorage很是方便。

服務端存儲：

服務器端也能夠保存全部用戶的全部數據，但須要的時候瀏覽器要向服務器請求數據。
服務器端能夠保存用戶的持久數據，如數據庫和雲存儲將用戶的大量數據保存在服務器端。

服務器端也能夠保存用戶的臨時會話數據。服務器端的session機制，如jsp的 session 對象，數據保存在服務器上。實現上，服務器和瀏覽器之間僅需傳遞session id便可，服務器根據session id找到對應用戶的session對象。會話數據僅在一段時間內有效，這個時間就是server端設置的session有效期。服務器端保存全部的用戶的數據，因此服務器端的開銷較大，而瀏覽器端保存則把不一樣用戶須要的數據分佈保存在用戶各自的瀏覽器中。瀏覽器端通常只用來存儲小數據，而服務器能夠存儲大數據或小數據。服務器存儲數據安全一些，瀏覽器只適合存儲通常數據。

請解釋 <script>、<script async> 和 <script defer> 的區別

經過script標籤加載js文件時，若是加載過慢，或者出錯，有可能會阻塞整個頁面的加載，這時就須要js的異步加載，兩個屬性可支持異步加載：

defer 和 async 的共同點:都是能夠並行加載JS文件，不會阻塞頁面的加載，
defer 和 async 的不一樣點:defer的加載完成以後， JS會等待整個頁面所有加載完成了再執行，而async是加載完成以後，會立刻執行JS，因此假如對JS的執行有嚴格順序的話，那麼建議用 defer加載。

爲何一般推薦將 CSS <link> 放置在 <head></head> 之間，而將 JS <script> 放置在 </body> 以前？你知道有哪些例外嗎？

css放在head中：

css放在head中，是由於瀏覽器解析html文檔是自上而下的，若是放底部的話，頁面結構出來了，css還沒開始渲染，可能會看到只有結構的頁面。
CSS 應當寫在 head 中，以免頁面元素因爲樣式確實形成瞬間的白頁或者給用戶閃爍感。

js放在/body以前：

JS可能會改變DOM樹，也可能依賴css樣式。若是放在前面，那麼DOM和css可能還未加載，這樣容易報錯。
性能：js放前面，頁面會先去加載他，拖慢了時間，使用戶在必定時間內看不到網頁內容。

例外：js若是須要先加載後運行能夠寫在頭裏（當腳本使用 defer 方式加載的時候能夠不用約束放置的位置。）

若是頁面使用 ‘application/xhtml+xml’ 會有什麼問題嗎？

首先這是個MIME類型，意思就是告訴瀏覽器，要用xhtml的格式來解析我發給你的頁面；
xhtml 語法要求嚴格，必須有head、body 每一個dom 必需要閉合。空標籤也必須閉合。例如<img />, <br/>, <input />等。另外要在屬性值上使用雙引號。一旦遇到錯誤，馬上中止解析，並顯示錯誤信息。
若是頁面使用’application/xhtml+xml’,一些老的瀏覽器會不兼容。
IE6，7，8不支持，IE6，7，8支持text/html。

什麼是漸進式渲染 (progressive rendering)？

漸進式渲染是指瀏覽器不用等待全部頁面資源都渲染好以後再呈現給用戶看，而是邊下載邊渲染，因此用戶打開一個網頁的時候每每不能第一時間看到全部的內容，可是可以看到一個大概的樣子，後續的內容瀏覽器會慢慢補上造成一個完整的頁面。這個有點像 bigpipe。

請解釋下什麼事語義化的HTML？

語義化的好處：

去掉或樣式丟失的時候能讓頁面呈現清晰的結構：html自己是沒有表現的，咱們看到例如<h1>是粗體，字體大小2em，加粗；< strong > 是加粗的，不要認爲這是html的表現，這些其實html默認的css樣式在起做用，因此去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是語義化的HTML結構的優勢，可是瀏覽器都有有默認樣式，默認樣式的目的也是爲了更好的表達html的語義，能夠說瀏覽器的默認樣式和語義化的HTML結構是不可分割的。
屏幕閱讀器（若是訪客有視障）會徹底根據你的標記來「讀」你的網頁.
PDA、手機等設備可能沒法像普通電腦的瀏覽器同樣來渲染網頁（一般是由於這些設備對CSS的支持較弱）.
搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重.
你的頁面是否對爬蟲容易理解很是重要,由於爬蟲很大程度上會忽略用於表現的標記,而只注重語義標記.
便於團隊開發和維護

語義化的HTML就是：標題用h1-h6，文字段落用p，列表用ul li，大體如此