前端面試題總結（一）HTML篇

一、iframe的優缺點？
　　缺點：
　　　　1、會阻塞主頁面的onload事件（iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，所以會影響頁面的並行加載）。
　　　　　　解決方法：通過js動態給iframe添加src屬性值。
　　　　2、會增加http請求。
　　　　3、對搜索引擎不友好。
　　　　4、在移動端設備不能完全加載，會出現滾動條，影響用戶體驗。
　　優點：
　　　　1、解決加載緩慢的第三方內容如圖標和廣告的加載問題。
　　　　2、並行加載腳本。
　　　　3、程序調入靜態頁面比較方便。
　　　　4、頁面和程序分離。

二、瀏覽器內核分別是？

　　IE：trident、谷歌：webkit、火狐：gecko、歐朋：presto（已改成blink(webkit的分支)）。

三、doctype作用？嚴格模式與混雜模式如何區分？他們有何意義？

1. doctype是申明文檔類型，告訴瀏覽器以什么文檔類型規范來解析這個文檔。
2. 嚴格模式的排版和JS運作模式是以該瀏覽器支持的最高標准執行的。
3. 混雜模式中，頁面以寬松的、向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
4. doctype不存在或不正確會導致文檔以混雜模式呈現。

　　嚴格模式與混雜模式存在的意義與其來源密切相關，如果說只存在嚴格模式，那么許多舊網站必然受到影響，如果只存在混雜模式，那么會回到當時瀏覽器大戰時的混亂，每個瀏覽器都有自己的解析模式。

四、說說你對語義化的理解？

1. 用正確的標簽做正確的事。
2. 讓頁面內容結構化，便於瀏覽器、搜索引擎解析。
3. 在去掉或丟失樣式的時候能讓頁面呈現出清晰的結構。
4. 搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，有利於SEO。
5. 便於團隊開發和維護，語義化更具可讀性，可以減少差異性。

五、介紹一下盒子模型？

1. 由內容(content)、填充(padding)、邊框(border)、邊界(margin)組成。
2. 有兩種盒模型：IE盒子模型和標准w3c盒子模型。
3. IE和模型的content包括了border和padding。
4. IE:width = margin+content;標准:width = margin+boder+padding+border。

六、HTML5為什么只需要寫<! DOCTYPE HTML>？

　　HTML5不基於sgml，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為。
　　而HTML4.01基於sgml，所以需要DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

七、src和href的區別？

1. href是指網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用於超鏈接。
2. src是指向外部資源的位置，指向的內容會嵌入到文檔中當前標簽所在的位置，在請求src資源時會將其指向的資源下載並應用到文檔內，如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，知道將該資源加載、編譯、執行完畢，所以一般js腳本會放在底部而不是頭部。

八、你知道多少種doctype文檔類型？

1. 該標簽可申明三種DTD類型，分別表示嚴格版本（strict）、過渡版本（transitional）、基於框架的（frameSet）HTML文檔。
2. HTML4.01規定了三種。
3. XHTML1.0規定了三種XML文檔類型。
4. standards（標准）模式用於呈現遵循最新標准的網頁，而quirks（兼容）模式用於呈現為傳統瀏覽器而設計的網頁。

九、HTML5的新特性？

　　HTML5不在是sgml的子集，主要是關於圖形，位置，存儲，多任務等功能的增加。

十、漸進增強和優雅降級？

　　漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能，達到更好的用戶體驗。
　　優雅降級：一開始就構建完整的功能，然后再針對低版本的瀏覽器進行兼容。

十一、title與h1的區別、b與strong的區別、i與em的區別，img內title和alt的區別？

1. title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
2. strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<b>是展示強調內容。
3. i內容展示為斜體，em表示強調的文本；
4. title是對圖片的說明和額外補充，如果需要在鼠標經過圖片時出現文字提示應該用屬性title。title屬性的優先級高於alt text。
5. alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。所以alt屬性的本意是用於替換圖像，而不是為圖像提供額外說明的，但是，在ie瀏覽器中，alt屬性會變成文字提示，這本身是一種誤導。所以，如果你使用firefox或者chrome，alt屬性就會不管用。
6. 應該准確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽。

十二、data-*屬性的作用？

1. data-*屬性用於存儲頁面或應用程序的私有自定義數據。data-*屬性賦予我們在所有HTML元素上嵌入自定義data屬性的能力。存儲的（自定義）數據能被頁面的JavaScript中利用，以創建更好的用戶體驗（不進行ajax調用或服務器端數據庫查詢）。
2. data-*主要包括兩個部分：
   1. 屬性名不應該包含任何大寫字母，並且在前綴“data-”之后必須有至少一個字符。
   2. 屬性值可以是任意字符串。

十三、如果把HTML5看成一個開放平台，那它的構建模塊有哪些？

　　nav、header、section、footer。

十四、什么是svg？

1. svg指可縮放矢量圖形（Scalable Vector Graphics）。
svg用來定義於網絡的基本矢量圖形。
2. svg使用xml格式定義圖形。
3. svg圖形在放大或改變尺寸的情況下其圖形質量不會有所損失。
4. svg是萬維網聯盟的標准。
svg與諸如dom和xsl之類的w3c是一個整體。

十五、知道網頁制作會用到的圖片格式有哪些？
　　png-8、png-24、JPEG、GIF、svg、webp。
　　webp格式：谷歌開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的服務器寬帶資源和數據空間。在質量相同的情況下，webp格式圖像比JPEG格式圖像小40%。

十六、知道什么是微格式嗎？

　　微格式是一種讓機器可讀的語義化XHTML詞匯的集合，是結構化數據的開放標准。是為特殊應用而制定的特殊格式。
　　優點：將只能數據添加到網上，讓網站內容在搜索引擎結果界面可以顯示額外的提示。

 十七、defer和async的區別？

1. defer和async在網絡讀取（下載）是一樣的，都是異步的。
2. defer是在文檔解析后執行腳本；async是在文檔解析時同時執行腳本。
3. defer能夠快速先呈現文檔。
4. 沒有defer或async，瀏覽器會立即在家並執行指定的腳本。

十八、頁面重構怎么操作？
　　頁面重構是指：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行為。也就是說在不改變UI的情況下，對網站進行優化，在擴展的同時保持一致的UI。
　　編寫css、讓頁面結構更合理化，提升用戶體驗，實現良好的頁面效果和提升性能。

十九、如何實現瀏覽器多個標簽頁之間的通信？

　　可以調用localStorage、cookie等本地存儲方式。
　　localStorage另一個瀏覽上下文里被添加、修改或刪除時，會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面信息通信。

二十、對WEB標准以及W3C的理解與認識？
　　標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性；

二十一、什么是響應式設計？

　　它是關於網頁制作的過程中讓不同的設備有不同的尺寸和不同的功能。響應式設計是讓所有的人能在這些設備上讓網站運行正常 

二十二、簡述readyonly與disabled的區別

• readonly只針對input(text / password)和textarea有效。
• 而disabled對於所有的表單元素都有效，當表單元素在使用了disabled后，當我們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去。