前端面試那些坑之HTML篇

時間 2019-12-12

標籤前端面試那些 html 欄目快樂工作简体版

原文原文鏈接

HTML

一、Doctype做用？標準模式與兼容模式各有什麼區別?javascript

（1）、<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於<html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。css

（2）、標準模式的排版和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。html

二、HTML5爲何只須要寫<!DOCTYPE HTML>？html5

HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。java

三、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？web

首先：CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，如div的display默認值爲「block」，則爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素。算法

（1）行內元素有：ab span img input select strong（強調的語氣）canvas

（2）塊級元素有：divul ol li dl dt dd h1 h2 h3 h4…p瀏覽器

（3）常見的空元素：緩存

不爲人知的是：

不一樣瀏覽器（版本）、HTML4（5）、CSS2等實際略有差別

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

（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS,定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;

（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

五、介紹一下你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layoutengineer或RenderingEngine)和JS引擎。

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。

JS引擎則：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

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

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]

Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

七、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分HTML 和HTML5？

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

繪畫 canvas;

用於媒介回放的 video 和 audio 元素;

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;

sessionStorage 的數據在瀏覽器關閉後自動刪除;

語意化更好的內容元素，好比 article、footer、header、nav、section;

表單控件，calendar、date、time、email、url、search;

新的技術webworker, websocket, Geolocation;

移除的元素：

純表現的元素：basefont，big，center，font, s，strike，tt，u;

對可用性產生負面影響的元素：frame，frameset，noframes；

* 支持HTML5新標籤：

IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

固然也能夠直接使用成熟的框架、好比html5shim;

<!--[iflt IE 9]>

<![endif]-->

* 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素

八、簡述一下你對HTML語義化的理解？

用正確的標籤作正確的事情。

html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;

即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;

搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;

使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

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

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。

原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。

如何使用：

（1）頁面頭部像下面同樣加入一個manifest的屬性；

（2）在cache.manifest文件的編寫離線存儲的資源；

CACHEMANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

//offline.html

（3）在離線狀態時，操做window.applicationCache進行需求實現。

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

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

離線的狀況下，瀏覽器就直接使用離線存儲的資源。

十一、請描述一下cookies，sessionStorage和localStorage 的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。

cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。

sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小：

cookie數據大小不能超過4k。

sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有期時間：

localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；

sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。

cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉