HTML面試題整理

Html篇:

 

1.你作的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?css

 

  •  IE: trident內核
  •  Firefox:gecko內核
  •  Safari:webkit內核
  •  Opera:之前是presto內核,Opera現已改用Google Chrome的Blink內核
  •  Chrome:Blink(基於webkit,Google與Opera Software共同開發)

2.每一個HTML文件裏開頭都有個很重要的東西,Doctype,知道這是幹什麼的嗎?html

答案:<!DOCTYPE> 聲明位於文檔中的最前面的位置,處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。(重點:告訴瀏覽器按照何種規範解析頁面)前端

3.Quirks模式是什麼?它和Standards模式有什麼區別jquery

從IE6開始,引入了Standards模式,在寫程序時咱們也會常常遇到這樣的問題,即當某個參數爲真時,咱們就使用新功能,而若是這個參數 不爲真時,就使用舊功能,這樣就能不破壞原有的程序,又提供新功能。IE6也是相似 這樣作的,它將DTD當成了這個「參數」,由於之前的頁面你們都不會去寫DTD,因此IE6就假定 若是寫了DTD,就意味着這個頁面將採用對CSS支持 更好的佈局,而若是沒有,則採用兼容以前的佈局方式。這就是Quirks模式(怪癖模式,詭異模式,怪異模式)web

如何斷定如今是標準模式仍是怪異模式:面試

方法一:執行如下代碼跨域

alert(window.top.document.compatMode) ;瀏覽器

//BackCompat  表示怪異模式
//CSS1Compat  表示標準模式緩存

方法二:jquery爲咱們提供的方法,以下:
alert($.boxModel)
alert($.support.boxModel)安全

 

區別:整體會有佈局、樣式解析和腳本執行三個方面的區別。

  • 盒模型:在W3C標準中,若是設置一個元素的寬度和高度,指的是元素內容的寬度和高度,而在Quirks 模式下,IE的寬度和高度還包含了padding和border。
  • 設置行內元素的高寬:在Standards模式下,給<span>等行內元素設置wdith和height都不會生效,而在quirks模式下,則會生效。
  • 設置百分比的高度:在standards模式下,一個元素的高度是由其包含的內容來決定的,若是父元素沒有設置百分比的高度,子元素設置一個百分比的高度 是無效的。
  • 用margin:0 auto設置水平居中:使用margin:0 auto在standards模式下可使元素水平居中,但在quirks模 式下卻會失效。

4.div+css的佈局較table佈局有什麼優勢?

  • 改版的時候更方便 只要改css文件。
  • 頁面加載速度更快、結構化清晰、頁面顯示簡潔。
  • 表現與結構相分離。
  • 易於優化(seo)搜索引擎更友好,排名更容易靠前。

5.a:img的alt與title有何異同?b:strong與em的異同?

a:

  • alt(alt text):爲不能顯示圖像、窗體或applets的用戶代理(UA),alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)
  • title(tool tip):該屬性爲設置該屬性的元素提供建議性的信息。

b:

  • strong:粗體強調標籤,強調,表示內容的重要性
  • em:斜體強調標籤,更強烈強調,表示內容的強調點

6.你能描述一下漸進加強和優雅降級之間的不一樣嗎?

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

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

  • CDN緩存更方便
  • 突破瀏覽器併發限制
  • 節約cookie帶寬
  • 節約主域名的鏈接數,優化頁面響應速度
  • 防止沒必要要的安全問題

8.請描述一下cookies,sessionStorage和localStorage的區別?

sessionStorage用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也 隨之銷燬。所以sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲,除非主動刪除數據,不然數據是永遠不會過時的。

web storage和cookie的區別

  • Web Storage的概念和cookie類似,區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的,而且每次你請求一個新的頁面的時候Cookie都會被髮送過去,這樣無形中浪費了帶寬,另外cookie還須要指定做用域,不能夠跨域調用。
  • 除此以外,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie須要前端開發 者本身封裝setCookie,getCookie。可是Cookie也是不能夠或缺的:Cookie的做用是與服務器進行交互,做爲HTTP規範的一部 分而存在 ,而Web Storage僅僅是爲了在本地「存儲」數據而生。

9.簡述一下src與href的區別。

src(source)用於替換當前元素,href(Hypertext Reference)用於在當前文檔和引用資源之間確立聯繫。

10.知道的網頁製做會用到的圖片格式有哪些?

png-8,png-24,jpeg,gif,svg

可是上面的那些都不是面試官想要的最後答案。面試官但願聽到是Webp。(是否有關注新技術,新鮮事物)

科普一下Webp:WebP格式,谷歌(google)開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3,並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。

在質量相同的狀況下,WebP格式圖像的體積要比JPEG格式圖像小40%

11.知道什麼是微格式嗎?談談理解。在前端構建中應該考慮微格式嗎?

 

微格式(Microformats)是一種讓機器可讀的語義化XHTML詞彙的集合,是結構化數據的開放標準。是爲特殊應用而制定的特殊格式。

 

優勢:將智能數據添加到網頁上,讓網站內容在搜索引擎結果界面能夠顯示額外的提示。(應用範例:豆瓣,有興趣自行google)

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

dns緩存,cdn緩存,瀏覽器緩存,服務器緩存。

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

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

14.你如何理解HTML結構的語義化?

  • 去掉或樣式丟失的時候能讓頁面呈現清晰的結構
  • 屏幕閱讀器(若是訪客有視障)會徹底根據你的標記來「讀」你的網頁.
  • 搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重
  • 你的頁面是否對爬蟲容易理解很是重要,由於爬蟲很大程度上會忽略用於表現的標記,而只注重語義標記.
  • 便於團隊開發和維護

15.談談之前端角度出發作好SEO須要考慮什麼?

  • 瞭解搜索引擎如何抓取網頁和如何索引網頁
  • Meta標籤優化
  • 瞭解主要的搜索引擎
  • 主要的互聯網目錄
  • 搜索引擎登陸
  • 連接交換和連接普遍度(Link Popularity)
  • 合理的標籤使用
相關文章
相關標籤/搜索