前端開發面試題——HTML篇（你想要的，都在這裏）

時間 2019-12-12

原文原文鏈接

HTML

DOCTYPE做用？標準模式與兼容模式各有什麼區別？

1 告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。
2 標準模式中，排版和JS運做模式都是以該瀏覽器支持的最高標準運行；
　兼容模式中，頁面以寬鬆的向後兼容的方式呈現，模擬老式瀏覽器的行爲以防止站點沒法工做。javascript

HTML5爲何只要寫<!DOCTYPE HTML>？

HTML5不基於SGML，所以不須要對DTD進行引用，但須要DOCTYPE來規範瀏覽器的行爲；
而HTML4.01基於SGML，須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。html

行內元素有哪些？塊級元素有哪些？空元素有哪些？

行內元素：a b i em span input select strong等
塊級元素：h1~h6 p div ul ol dl li等
空元素：meta link br hr img input area等java

頁面導入樣式時，使用link和@import有什麼區別？

1 link除了加載CSS以外，還能定義RSS，定義rel鏈接屬性等做用；而@import只能加載CSS。
2 link在頁面加載時同時加載；而@import引用的CSS會等到頁面加載完後再加載。
3 link是XHTML標籤，無兼容問題；@import是CSS提出的，IE5以上才能識別。web

介紹一下你對瀏覽器內核的認識？

主要分紅兩部分：渲染引擎和JS引擎。
渲染引擎：負責取得網頁內容，整理訊息，以及計算網頁的顯示方式，而後輸出至顯示器或打印機。瀏覽器的內核不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不一樣。
JS引擎：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎沒有很明確的區分，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。canvas

常見的瀏覽器內核有哪些？

1 Trident內核：IE
2 Gecko 內核：Firefox
3 Presto 內核：Opera（現爲Blink）
4 Webkit 內核：Safari,Chrome (Chrome現爲Blink)瀏覽器

HTML5有哪些新特性、移除了哪些元素？

HTML5如今已不是SGML的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
　繪畫：canvas;
　媒體播放：video和audio元素；
　本地離線存儲：localStorage和sessionStorage;
　語義化更好的元素，如article、footer、header、nav、section;
　表單控件，如calendar、date、time、email、url、search;
　新的技術，webworker,websockert,Geolocation;
移除的元素：
　純表現的元素：big，center,font,basefont,strike,s,u;
　對可用性產生負面影響的元素：frame,frameset,noframes;緩存

如何處理HTML5新標籤的瀏覽器兼容問題？如何區分HTML和HTML5?

IE6/7/8支持經過document.createElement方法產生的標籤，可使用這種方法來兼容，還要添加上標籤默認的樣式。
識別HTML5：經過DOCTYPE聲明，新增的結構元素，功能元素安全

HTML5的離線儲存怎麼使用？工做原理能不能解釋一下？

如何使用：只要在在頁面頭部加入mainfest的屬性就好了。服務器

<!DOCTYPE HTML>
<html manifest="cache.manifest">
……
</html>

工做原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制（不是存儲技術），經過這個文件上的解析清單離線存儲資源，這些資源就像cookie同樣被存儲下來。當無網時，瀏覽器會經過被離線存儲的數據進行展現。cookie

瀏覽器是怎麼對HTML5的離線存儲資源進行管理和加載的？

在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件。若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並進行離線存儲。若是已經訪問過app，瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件和舊的manifest文件，若是發生改變就更新資源。

請描述一下cookies,sessionStorage,localStorage的區別？

cookie是網站爲了標識用戶身份而儲存在用戶本地終端的數據（一般通過加密）。
cookie數據始終在同源的http請求中攜帶，即會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小：
　cookie數據大小不能超過4k。
　sessionStorage和localStorage雖然也有存儲大小限制，但比cookie大得多，有5M或更大。
有效時間：
　cookie　　　　　在cookie設置的過時時間以前一直有效，即便瀏覽器關閉
　sessionStorage　數據在當前瀏覽器窗口關閉以後自動刪除
　localStorage　　存儲持久數據，瀏覽器關閉以後數據不丟失除非主動刪除數據

iframe有哪些缺點？

1 iframe會阻塞主頁面的Onload事件；
2 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
3 iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

若是要使用iframe，最好經過javascript動態給ifarme添加src屬性值，這樣能夠避免以上問題。

label的做用是什麼？是怎麼用的？

label標籤訂義表單控制間的關係，當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。

<label for="name">輸入：</label>
<input type="text" name="name" id="name" />

<label>輸入：<input type="text" name="name" /></label>

HTML5的from如何關閉自動完成功能？

給不想要提示的 from 或某個 input 設置爲 autocomplete=off。

如何實現瀏覽器內多個標籤頁之間的通訊？

WebSocket,SharedWorker;
也能夠調用localStorage,cookies等本地存儲方式；

localStorage在另外一個瀏覽器上下文裏被添加、修改或刪除時，它都會觸發一個事件，咱們經過監聽事件，控制它的值來進行頁面信息通訊。

頁面可見性（Page Visibility API）能夠有哪些用途？

經過visibilityState的值檢測頁面當前是否可見，以及打開網頁的時間等；
在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻播放

網頁驗證碼是幹嗎的，是爲了解決什麼安全問題？

區分用戶是人仍是計算機的自動程序，能夠防止惡意破解密碼，刷票，論壇灌水；
有效防止黑客對某個特定用戶用程序來進行暴利破解登錄。

b與strong的區別？i與em的區別？

strong是代表重點內容，有語氣增強的含義，使用閱讀設備閱讀網絡時，strong會重讀，而b是展現強調內容。i內容顯示爲斜體，em表示強調文本。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。