前端面試【整理更新中】：HTML常見題目（帶答案）

時間 2019-11-08

原文原文鏈接

1、HTML常見題目
0一、Doctype做用？嚴格模式與混雜模式如何區分？它們有何意義？
0二、 HTML5 爲何只須要寫 !DOCTYPE HTML？
0三、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
0四、頁面導入樣式時，使用link和@import有什麼區別？
0五、介紹一下你對瀏覽器內核的理解？
0六、 iframe框架有那些優缺點？
0七、 HTML5有哪些新特性,移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分HTML和HTML5？
0八、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
0九、簡述一下你對HTML語義化的理解？
十、HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？
十一、 title與h1的區別、b與strong的區別、i與em的區別？十二、元素的alt和title有什麼異同？0一、Doctype做用？標準模式與兼容模式各有什麼區別?javascript

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

* !DOCTYPE聲明位於位於HTML文檔中的第一行，處於html 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。
* 標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。

0二、HTML5 爲何只須要寫 !DOCTYPE HTML？html

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

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

* 行內元素：a span img input select 
* 塊級元素：div ul ol li dl dt dd h1 p
* 空元素：<br> <hr> <link> <meta>

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

* 相同的地方，都是外部引用CSS方式，
* 區別：
* link是xhtml標籤，除了加載css外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS
* link引用CSS時候，頁面載入時同時加載；@import須要在頁面徹底加載之後加載，並且@import被引用的CSS會等到引用它的CSS文件被加載完才加載
* link是xhtml標籤，無兼容問題；@import是在css2.1提出來的，低版本的瀏覽器不支持
* link支持使用javascript控制去改變樣式，而@import不支持
* link方式的樣式的權重高於@import的權重
* import在html使用時候須要<style type="text/css">標籤

0五、介紹一下你對瀏覽器內核的理解？常見的瀏覽器內核有哪些？canvas

* 主要分紅兩部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。
* 渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。
* JS引擎：解析和執行javascript來實現網頁的動態效果。
* Ie(Ie內核) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)

0六、 iframe框架有那些優缺點？瀏覽器

* 優勢：

    * iframe可以原封不動的把嵌入的網頁展示出來。
    * 若是有多個網頁引用iframe，那麼你只須要修改iframe的內容，就能夠實現調用的每個頁面內容的更改，方便快捷。
    * 網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用iframe來嵌套，能夠增長代碼的可重用。
    * 若是遇到加載緩慢的第三方內容如圖標和廣告，這些問題能夠由iframe來解決。
* 缺點：

    * 搜索引擎的爬蟲程序沒法解讀這種頁面
    * 框架結構中出現各類滾動條
    * 使用框架結構時，保證設置正確的導航連接。
    * iframe頁面會增長服務器的http請求
* *iframe會阻塞主頁面的Onload事件；
*     *搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
*     *iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
*     使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
*     動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

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

* 新增長了圖像、位置、存儲、多任務等功能。
* 新增元素：

    * canvas
    * 用於媒介回放的video和audio元素
    * 本地離線存儲。localStorage長期存儲數據，瀏覽器關閉後數據不丟失;sessionStorage的數據在瀏覽器關閉後自動刪除
    * 語意化更好的內容元素，好比 article footer header nav section
    * 位置API：Geolocation
    * 表單控件，calendar date time email url search
    * 新的技術：web worker(web worker是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。您能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker 在後臺運行) web socket
    * 拖放API：drag、drop
* 移除的元素：

    * 純表現的元素：basefont big center font s strike tt u
    * 性能較差元素：frame frameset noframes
* 區分：

    * DOCTYPE聲明的方式是區分重要因素
    * 根據新增長的結構、功能來區分

0八、請描述一下 cookies，sessionStorage 和 localStorage 的區別？cookie

* 共同點：都是保存在瀏覽器端，且是同源的。
* 區別:


1. cookies是爲了標識用戶身份而存儲在用戶本地終端上的數據，始終在同源http請求中攜帶，即cookies在瀏覽器和服務器間來回傳遞，而sessionstorage和localstorage不會自動把數據發給服務器，僅在本地保存。
2. 存儲大小的限制不一樣。cookie保存的數據很小，不能超過4k，而sessionstorage和localstorage保存的數據大，可達到5M。
3. 數據的有效期不一樣。cookie在設置的cookie過時時間以前一直有效，即便窗口或者瀏覽器關閉。sessionstorage僅在瀏覽器窗口關閉以前有效。localstorage始終有效，窗口和瀏覽器關閉也一直保存，用做長久數據保存。
4. 做用域不一樣。cookie在全部的同源窗口都是共享；sessionstorage不在不一樣的瀏覽器共享，即便同一頁面；localstorage在全部同源窗口都是共享

0九、簡述一下你對HTML語義化的理解？session

* 去掉或丟失樣式的時候可以讓頁面呈現出清晰的結構。
* 有利於SEO和搜索引擎創建良好溝通，有助於爬蟲抓取更多的信息，爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重。
* 方便其它設備解析。
* 便於團隊開發和維護，語義化根據可讀性

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

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

CACHE MANIFEST#v0.11CACHE:
js/app.jscss/style.cssNETWORK:
Resourse/logo.pngFALLBACK:
//offline.html

title與h1的區別、b與strong的區別、i與em的區別？
- title屬性沒有明確意義，只表示標題；h1表示層次明確的標題，對頁面信息的抓取也有很大的影響
- strong標明重點內容，語氣增強含義；b是無心義的視覺表示
- em表示強調文本；i是斜體，是無心義的視覺表示
- 視覺樣式標籤：b i u s
- 語義樣式標籤：strong em ins del code
元素的alt和title有什麼異同？
- 在alt和title同時設置的時候，alt做爲圖片的替代文字出現，title是圖片的解釋文字。