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

Alarak發表於2019-02-16
前端面試題HTML

前言：

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

閱讀本文前請做好以下心理準備：
本系列文章將不定期更新。
本系列文章不是很嚴謹。

前端面試之HTML篇

Part A：常識系列

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

  2. HTML中的Doctype是什麼鬼？

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

  4. 不常見的Quirks!

  5. 標籤語義化是神馬

Part B：標籤與屬性系列

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

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

  3. cookies,sessionStorage和localStirage區別？

  4. link和import的區別？

  5. src與href的區別？

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

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

  2. 漸進增強還是優雅降級？

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

  4. 在css/js程式碼上線之後開發人員經常會優化效能，從使用者重新整理網頁開始，一次js請求一般情況下有哪些地方會有快取處理？

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

Part D: HTML5系列

  1. HTML5 為什麼只需要寫 <!DOCTYPE HTML>？

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

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

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

  5. 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？

  1. 新特性

     HTML5 現在已經不是 SGML 的子集，
 主要是關於影像，位置，儲存，多工等功能的增加。
 繪畫 canvas;
 用於媒介回放的 video 和 audio 元素;
 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
 sessionStorage 的資料在瀏覽器關閉後自動刪除;
 語意化更好的內容元素，比如 article、footer、header、nav、section;
 表單控制元件，calendar、date、time、email、url、search;
 新的技術webworker, websocket, Geolocation;

  2. 移除的元素：

     純表現的元素：basefont，big，center，font, s，strike，tt，u;
 對可用性產生負面影響的元素：frame，frameset，noframes；

  3. 支援HTML5新標籤：

    IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
瀏覽器支援新標籤後，還需要新增標籤預設的樣式。

當然也可以直接使用成熟的框架、比如html5shim;
<!--[if lt IE 9]>
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

  4. 如何區分HTML5：

       DOCTYPE宣告新增的結構元素功能元素

3. HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
答：在使用者沒有與因特網連線時，可以正常訪問站點或應用，在使用者與因特網連線時，更新使用者機器上的快取檔案。
原理：

HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術)，通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示。

如何使用：

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

  2. 在cache.manifest檔案的編寫離線儲存的資源；

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

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

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

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

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

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

相關文章