html面試題目總結

除了下面還有個網站總結了不少 http://blog.jobbole.com/78346/

 

 

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

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

　　繪畫 canvas;

　　用於媒介回放的 video 和 audio 元素;

　　本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;

　　sessionStorage 的數據在瀏覽器關閉後自動刪除;

　　語意化更好的內容元素，好比 article、footer、header、nav、section;

　　表單控件，calendar、date、time、email、url、search;

　　新的技術webworker, websockt, Geolocation;

　　移除的元素：

　　純表現的元素：basefont，big，center，font, s，strike，tt，u;

　　對可用性產生負面影響的元素：frame，frameset，noframes;

　　* 支持HTML5新標籤：

　　IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

　　能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

　　瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

　　固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

 

 

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進行需求實現。

　　詳細的使用請參考：有趣的HTML5：離線存儲

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

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

　　離線的狀況下，瀏覽器就直接使用離線存儲的資源。

 

 

請描述一下 cookies，sessionStorage 和 localStorage 的區別?

（1）與cookie不一樣的是：Web Storage數據徹底存儲在客戶端，不須要經過瀏覽器的請求將數據傳給服務器，所以相比cookie來講可以存儲更多的數據，大概5M左右。單個cookie在客戶端的限制是3K，就是說一個站點在客戶端存放的COOKIE不能3K。

　　　（2）LocalStorage和sessionStorage功能上是同樣的，可是存儲持久時間不同。

    　　　　LocalStorage：瀏覽器關閉了數據仍然能夠保存下來，並可用於全部同源（相同的域名、協議和端口）窗口（或標籤頁）永久存儲，永不失效，除非手動刪除

   　　　　 sessionStorage：數據存儲在窗口對象中，窗口關閉後對應的窗口對象消失，存儲的數據也會丟失。就是瀏覽器窗口關閉就失效了。

　　　　　注意：sessionStorage 均可以用localStorage 來代替，但須要記住的是，在窗口或者標籤頁關閉時，使用sessionStorage 存儲的數據會丟失。

cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會

　　sessionStorage和localStorage的存儲空間更大;

　　sessionStorage和localStorage有更多豐富易用的接口;

　　sessionStorage和localStorage各自獨立的存儲空間;

 

 

 

iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件;

　　*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

　　使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript

　　動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。

 

 

Label的做用是什麼?是怎麼用的?

　　label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。

　　Number:

　　Date:

　　HTML5的form如何關閉自動完成功能?

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

 

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

　　調用localstorge、cookies等本地存儲方式

　　webSocket如何兼容低瀏覽器?(阿里)

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼發送 XHR 、 基於長輪詢的 XHR

 

 

頁面可見性（Page Visibility）API 能夠有哪些用途

頁面可見性： 就是對於用戶來講，頁面是顯示仍是隱藏, 所謂顯示的頁面，就是咱們正在看的頁面；隱藏的頁面，就是咱們沒有看的頁面。 由於，咱們一次能夠打開好多標籤頁面來回切換着，始終只有一個頁面在咱們眼前，其餘頁面就是隱藏的，還有一種就是.........，(把瀏覽器最小化，全部的頁面就都不可見了)。

API 很簡單，document.hidden 就返回一個布爾值，若是是true, 表示頁面可見，false 則表示，頁面隱藏。  不一樣頁面之間來回切換，觸發visibilitychange事件。 還有一個document.visibilityState, 表示頁面所處的狀態，取值：visible, hidden 等四個。

 

document.addEventListener("visibilitychange", function(){

    if(document.hidden){

        document.title ="hidden";

    }else {

        document.title = "visibile";

    }

})

 

<div style="height:1px;overflow:hidden;background:#ccc"></div>

 

咱們打開這個頁面，而後再打開另外一個頁面，來回點擊這兩個頁面，當咱們看到這個頁面時，標題顯示visiable ,當咱們看另外一個頁面時，標題顯示hidden;

動畫，視頻，音頻均可以在頁面顯示時打開，在頁面隱藏時關閉

實現不使用 border 畫出1px高的線，在不一樣瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。

document 有個屬性 compatMode 能夠用來判斷當前頁面採用的何種渲染方式： 
　　BackCompat – Standards-compliant mode is not switched on. 
　　CSS1Compat – Standards-compliant mode is switched on. 
Quirksmode即怪異模式，而css1compat是標準模式 

 

 

網頁驗證碼是幹嗎的，是爲了解決什麼安全問題？

防止惡意註冊和暴力破解 所謂惡意註冊和暴力破解都是用軟件進行的。 人工註冊再快，也須要一項一項輸入資料，速度很慢，對服務器基本沒有影響。若是沒有驗證碼可使用軟件註冊的話，能夠同時運行成千上萬個線程，一次能註冊成千上萬個用戶，讓服務器的數據庫很快變得臃腫不堪，運行效率降低。 若是一個無聊的人或競爭對手對某網站懷有敵意，那麼這種方法很容易就能讓對方癱瘓。

 

Quirks模式是什麼？它和Standards模式有什麼區別

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

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

盒模型：在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置百分比的高度，子元素設置一個百分比的高度 是無效的。

用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模 式下卻會失效

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

改版的時候更方便 只要改css文件。

頁面加載速度更快、結構化清晰、頁面顯示簡潔。

表現與結構相分離。

易於優化（seo）搜索引擎更友好，排名更容易靠前

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

漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

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

CDN緩存更方便

突破瀏覽器併發限制

節約cookie帶寬

節約主域名的鏈接數，優化頁面響應速度

防止沒必要要的安全問題

 

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

png-8，png-24，jpeg，gif，svg

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

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

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

 

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

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

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

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

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

 

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

圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。

若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。

若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術。

若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。

若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致

 

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

瞭解搜索引擎如何抓取網頁和如何索引網頁

Meta標籤優化

瞭解主要的搜索引擎

主要的互聯網目錄

搜索引擎登陸

連接交換和連接普遍度（Link Popularity）

合理的標籤使用

 

文字超出顯示爲省略號

[css] view plain copy

 print?

1. //單行：  
2. overflow: hidden;  
3. text-overflow:ellipsis;  
4. white-space: nowrap;  
5. //多行：  
6. display: -webkit-box;  
7. -webkit-box-orient: vertical;  
8. -webkit-line-clamp: 3;  
9. overflow: hidden;  

HTML5 存儲類型有什麼區別？

答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

 

TML5 支持 MP三、Wav 和 Ogg 格式的音頻，下面是在網頁中嵌入音頻的簡單示例：

1 2 3 4

<audio controls>     <source src=」jamshed.mp3″ type=」audio/mpeg」>     Your browser does’nt support audio embedding feature. </audio>

 

音頻相似，HTML5 支持 MP四、WebM 和 Ogg 格式的視頻，下面是簡單示例：

1 2 3 4

<video width=」450″ height=」340″ controls>   <source src=」jamshed.mp4″ type=」video/mp4″>    Your browser does’nt support video embedding feature. </video>

 

 

TML5 還有哪些媒體標籤？

HTML5 對於多媒體提供了強有力的支持，除了 audio 和 video 標籤外，還支持如下標籤：

<embed> 標籤訂義嵌入的內容，好比插件。

1	<embed type=」video/quicktime」 src=」Fishing.mov」>

<source> 對於定義多個數據源頗有用。

1 2 3 4

<video width=」450″ height=」340″ controls>      <source src=」jamshed.mp4″ type=」video/mp4″>      <source src=」jamshed.ogg」 type=」video/ogg」> </video>

<track> 標籤爲諸如 video 元素之類的媒介規定外部文本軌道。 用於規定字幕文件或其餘包含文本的文件，當媒介播放時，這些文件是可見的。

 

HTML5 標準提供了哪些新的 API？

HTML5 提供的應用程序 API 主要有：

Media API

Text Track API

Application Cache API

User Interaction

Data Transfer API

Command API

Constraint Validation API

History API

 

 

HTML5 應用程序緩存和瀏覽器緩存有什麼區別？

應用程序緩存是 HTML5 的重要特性之一，提供了離線使用的功能，讓應用程序能夠獲取本地的網站內容，例如 HTML、CSS、圖片以及 JavaScript。這個特性能夠提升網站性能，它的實現藉助於 manifest 文件，以下：

1 2 3 4

<!doctype html> <html manifest=」example.appcache」> ….. </html>

與傳統瀏覽器緩存相比，它不強制用戶訪問的網站內容被緩存