前端計劃——面試題總結-HTML篇

時間 2019-12-05

原文原文鏈接

前言：css

「吾生也有涯,而知也無涯，以有涯隨無涯，殆己」————莊子

閱讀本文前請作好如下心理準備：
本系列文章將不按期更新。
本系列文章不是很嚴謹。html

前端面試之HTML篇

Part A：常識系列

你真的瞭解瀏覽器麼？前端
HTML中的Doctype是什麼鬼？html5
多了個X的XHTML與HTML有什麼不同？web
不常見的Quirks!面試
標籤語義化是神馬canvas

Part B：標籤與屬性系列

行內元素與塊級元素都有啥？瀏覽器
img的alt與title有何異同？b與strong的區別、i與em的區別？緩存
cookies,sessionStorage和localStirage區別？安全
link和import的區別？
src與href的區別？

Part C：前端設計與優化系列

div+css的佈局較table佈局有什麼優勢？
漸進加強仍是優雅降級？
爲何利用多個域名來存儲網站資源會更有效？
在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，一次js請求通常狀況下有哪些地方會有緩存處理？
一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

Part D: HTML5系列

HTML5 爲何只須要寫 <!DOCTYPE HTML>？
html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？
瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？
HTML5的form如何關閉自動完成功能？

答案以下

Part A：常識系列

1. 你真的瞭解瀏覽器麼？

答：該題考察常見瀏覽器和內核。
    IE：Trident內核
    Firefox：Gecko內核
    Safari：Webkit內核
    Chrome：Blink內核（Webkit的一個分支吧）
    Opera：Presto（7版本至12版本）；Blink（從14版本之後）
    國產大雙核瀏覽器系列：就是Trident加Webkit

2. HTML中的Doctype是什麼鬼？

答：簡單說，這個聲明位於文檔最前面，用於告訴瀏覽器的解析器，以什麼文檔類型規範解析當前文檔。

3. 多了個X的XHTML與HTML有什麼不同？

答：簡單說，XHTML 是以 XML 格式編寫的 HTML，要求更加嚴格。詳細的區別好比
元素語法：
    XHTML 元素必須正確嵌套
    XHTML 元素必須始終關閉
    XHTML 元素必須小寫
    XHTML 文檔必須有一個根元素
屬性語法：
    XHTML 屬性必須使用小寫
    XHTML 屬性值必須用引號包圍
    XHTML 屬性最小化也是禁止的
更詳細的區別在[這裏][1]

4. 不常見的Quirks!

答：Quirks又被稱爲是怪癖模式、詭異模式、混雜模式，對應的是Standard模式。
這是個歷史遺留問題。發生在好久之前的IE5.5及更老的瀏覽器向IE6過渡時期。
簡單說，就是以這種模式模擬老瀏覽器行爲，來兼容較早的網頁。
詳細區別以下：
整體會有佈局、樣式解析和腳本執行三個方面的區別。
    (1)盒模型：在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。        
    (2)設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
    (3)設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的.
    (4)用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模式下卻會失效。

5. 標籤語義化是神馬

答：簡單說，用正確的標籤作正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

Part B：標籤與屬性系列

1. 行內元素與塊級元素都有啥？

答：簡單說，塊級和行內區別就是能不能本身佔一行！
塊級：div ul ol li p h1（標題系列） dl dt dd（描述列表系列）
行內：span a b img input select strong
對了，還有空元素系列
常見的空元素：
<br> <hr> <img> <input> <link> <meta>
不爲人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

2. img的alt與title有何異同？b與strong的區別、i與em的區別？

答：(1)alt：簡單說，就是圖片出不來時顯示的字。
   官方解釋是——爲不能顯示圖像、窗體或applets的用戶代理（UA），
   alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。
   title：簡單說，就是鼠標移過去的提示信息
   官方解釋：title屬性爲設置該屬性的元素提供建議性的信息。
  (2)strong是標明重點內容，有語氣增強的含義，
  使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展現強調內容。
  (3)i內容展現爲斜體，em表示強調的文本；

3. cookies,sessionStorage和localStirage區別？

答：區別主要有如下3點

保存路徑

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

存儲大小：

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

有期時間：

localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。
cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

4. link和import的區別？

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

5. src與href的區別？

答：簡單說，src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。
src經常使用於js/img/frame等元素，href經常使用於a/css等。
src的元素，下載時不能幹別的了。href就能夠。
因此把js的src放在底部是個明智的選擇。與上面問題相連，href比@import也是明智的選擇。

Part C：前端設計與優化系列

1. div+css的佈局較table佈局有什麼優勢？

答：table佈局是很老的網頁設計了，時代在進步嘛，前者的優勢還不少的：
(1)改版的時候更方便 只要改css文件。
(2)頁面加載速度更快、結構化清晰、頁面顯示簡潔。
(3)表現與結構相分離。
(4)易於優化（seo）搜索引擎更友好，排名更容易靠前。

2. 漸進加強仍是優雅降級？

答：漸進加強（Progressive enhancement）：
簡單說，就是照顧老瀏覽器。先實現基本功能，再玩點花裏胡哨的。
    優雅降級（Graceful degradation）：
簡單說，就是先構建完整功能，再考慮老版本的兼容性。
兩種設計思想是有不一樣的考慮。
實話說，我更喜歡優雅降級的。用IE6的用戶，對不起，不想作兼容了。您老升級下瀏覽器吧。。

3. 爲何利用多個域名來存儲網站資源會更有效？

答：(1)CDN緩存更方便
    (2)突破瀏覽器併發限制
    (3)節約Cookie帶寬
    (4)節約主域名鏈接數，優化頁面響應速度
    (5)防止沒必要要的安全問題

4. 在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，一次js請求通常狀況下有哪些地方會有緩存處理？

答：DNS緩存、CDN緩存、瀏覽器緩存、服務器緩存

5. 一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

答：這個問題有意思～
    (1)圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，
    判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。
    (2)若是爲幻燈片、相冊等，可使用圖片預加載技術，
    將當前展現圖片的前一張和後一張優先下載。
    (3)若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
    (4)若是圖片過大，可使用特殊編碼的圖片，
    加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。
    (5)若是圖片展現區域小於圖片的真實大小，
    則在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

Part D: HTML5系列

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

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

2. 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;
<!--[if lt IE 9]>
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

如何區分HTML5：

DOCTYPE聲明\新增的結構元素\功能元素

3. HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？
答：在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
原理：

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

如何使用：

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

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

CACHE MANIFEST
   #v0.11
   CACHE:
   js/app.js
   css/style.css
   NETWORK:
   resourse/logo.png
   FALLBACK:
   / /offline.html

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

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

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

5. HTML5的form如何關閉自動完成功能？

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

相關標籤/搜索

每日一句

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