HTML

1. ie的某些相容性問題
2. doctype的作用
3. HTML中標準模式和怪異模式有什麼不同
4. 寫出你常用的HTML標籤
5. 為什麼要少用iframe
6. HTML語義化的理解
7. 行內元素和塊級元素的異同及img類似的特殊性
8. 盒模型，及在瀏覽器相容方面的異同

HTML5

1. HTML5的新特性
   
2. canvas畫圖
3. HTML5中引進data-有什麼作用
4. canvas的效能優化

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1. ie的某些相容性問題

   
   IE的相容性問題

2. doctype的作用
   答案：doctype告訴瀏覽器它使用了什麼文件型別。它指出閱讀程式應該用什麼 規則集來解釋文件中的標記。XHTML中有三種，包括過度型、嚴格型、框架型。HTML4嚴格。隨著XML的流行，HTML推出了XHTML標準，其中嚴格模式嚴格遵守了XML的規範，例如屬性必須有值、標籤必須閉合等，同時也拋棄了一些不推薦的標籤。而XHTML過度版本，則稍微比嚴格模式鬆散些，一些不推薦的標籤依然可用外。當頁面有框架時，則應該使用框架型。再就是HTML5的版本。使用HTML5的Doctype會預設觸發標準模式。

3. HTML中標準模式和怪異模式有什麼不同
   答案：由於歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在W3C標準出臺以前，瀏覽器在對頁面的渲染上沒有統一規範，產生了差異(Quirks mode或者稱為Compatibility Mode)；由於W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱為Strict mode也有叫做Standars mode)，這就是二者最簡單的區別。
   W3C標準推出以後，瀏覽器都開始採納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來以前，很多頁面都是根據舊的渲染方法編寫的，如果用的標準來渲染，將導致頁面顯示異常。為保持瀏覽器渲染的相容性，使以前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode和Standars mode，兩種渲染方法共存在一個瀏覽器上。火狐一直工作在標準模式下，但IE（6，7，8）標準模式與怪異模式差別很大，主要體現在對盒子模型的解釋上，這個很重要，下面就重點說這個。 那麼瀏覽器究竟該採用哪種模式渲染呢？這就引出的DTD，既是網頁的頭部宣告，瀏覽器會通過識別DTD而採用相對應的渲染模式。
   1.瀏覽器要使老舊的網頁正常工作，但這部分網頁是沒有doctype宣告的，所以瀏覽器對沒有doctype宣告的網頁採用quirks mode解析。
   2.對於擁有doctype宣告的網頁，什麼瀏覽器採用何種模式解析，這裡有一張詳細列表可參考：

   點選這裡。
   3.對於擁有doctype宣告的網頁，這裡有幾條簡單的規則可用於判斷：對於那些瀏覽器不能識別的doctype宣告，瀏覽器採用strict mode解析。
   4.在doctype宣告中，沒有使用DTD宣告或者使用HTML4以下（不包括HTML4）的DTD宣告時，基本所有的瀏覽器都是使用quirks mode呈現，其他的則使用strict mode解析。
   5.可以這麼說，在現有有doctype宣告的網頁，絕大多數是採用strict mode進行解析的。
   6.在ie6中，如果在doctype宣告前有一個xml宣告(比如: )，則採用quirks mode解析。這條規則在ie7中已經移除了。

4. 寫出你常用的HTML標籤
   答案：根據自己的使用和掌握來寫吧。參考http://blog.csdn.net/ithomer/article/details/5277162。

5. 為什麼要少用iframe
   答案：為什麼應該減少使用iframe
   iframe的建立比其它包括scripts和css的 DOM 元素的建立慢了 1-2 個數量級。
   Iframes阻塞頁面載入:window 的 onload 事件需要在所有 iframe 載入完畢後(包含裡面的元素)才會觸發。在 Safari 和 Chrome 裡，通過 JavaScript 動態設定 iframe 的 SRC 可以避免這種阻塞情況。
   唯一的連線池:有人可能希望 iframe 會有自己獨立的連線池，但不是這樣的。絕大部分瀏覽器，主頁面和其中的 iframe 是共享這些連線的。這意味著 iframe 在載入資源時可能用光了所有的可用連線，從而阻塞了主頁面資源的載入。如果 iframe 中的內容比主頁面的內容更重要，這當然是很好的。但通常情況下，iframe 裡的內容是沒有主頁面的內容重要的。這時 iframe 中用光了可用的連線就是不值得的了。一種解決辦法是，在主頁面上重要的元素載入完畢後，再動態設定 iframe 的 SRC。

6. HTML語義化的理解
   答案：用正確的標籤表達正確的內容，可以增強網頁的易用性（如障礙人士訪問等）和搜尋引擎的爬取和檢索。HTML5新增的語義化標籤如header\section\article\footer等。

7. 行內元素和塊級元素的異同及img類似的特殊性
   答案：行內元素和塊級元素異同如下：
   1.行內元素與塊級元素直觀上的區別，行內元素會在一條直線上排列，都是同一行的，水平方向排列;
   2.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素;
   3.行內元素與塊級元素的屬性的不同，主要是盒模型屬性上(行內元素設定width無效，height無效(可以設定line-height)，margin上下無效)；
   4.行內元素轉換為塊級元素,通過設定display:block

   注：img\input\textarea等是特殊的行內元素，確切的說是inline-block元素。

8. 盒模型，及在瀏覽器相容方面的異同
   答案：瀏覽器的盒子模型指的是它的盒子寬度需要包括內容區寬度、內外邊距和邊框大小，高度類似。一般設定寬度預設是對應內容區寬度。
   相容性方面：在IE7以前的版本中設定寬度是包括：內邊距+邊框+內容區的。IE7之後跟其它瀏覽器一樣，都是隻對應內容區的寬度。可以通過修改box-sizing:border-box來修改。讓設定寬度等於內容區和邊框和內邊距之和。

HTML5

1. HTML5的新特性
   答案：HTML5新增的特性與API
   語義化標籤：提升Web的可用性，利於SEO和螢幕閱讀器；一般有header、footer、nav、article、section等。
   新的音視訊：HTML中包含audio和video標籤，可以播放視訊和音評，不過格式有限制。
   Geolocation：提供地理位置的API，獲取使用者的地理位置資訊。
   WebSocket：提供Websock的API，使得web可以實時的接受伺服器響應。
   Communication：HTML5中提供了CORS，可以實現跨域資源共享；還有實現了跨文件訊息傳輸，postMessage。
   Form API：增強了form表單，比如增加了input的type型別，number/tel/range等，點選檢視移動端顯示。
   Webworkers：Webworkers使得在瀏覽器端也可以實現多執行緒的應用。
   WebStorage：Webstorage是為了減少http請求，在使用者客戶端實現快取資料，包括localStorage和sessionStorage，還有indexDB等。
   OffineWeb：瀏覽器借用WebStorage可以實現一些簡單的離線應用，比如讀寫郵件、編輯文件、建立todo等
   推薦部落格：
   28 HTML5 Features, Tips, and Techniques you Must Know 中文

2. canvas畫圖

3. HTML5中引進data-有什麼作用
   答案：data-是HTML5新增的一個自定義屬性。用以方便開發者在HTML中自定義一些屬性來儲存和操作資料，同時又不違背HTML的規範，不會帶來一些副作用。data-自定義屬性非常簡單，如下例：

   <article  id="electriccars"  data-columns="3"  data-index-number="12314"  data-parent="cars">...</article>。

   通過JS去獲取自定義屬性非常簡單，可以通過 getAttribute()傳遞全部名稱來獲取，也可以使用 dataset 屬性集來獲取。如：

   var article = document.querySelector('#electriccars');
   article.dataset.columns; // "3"  
   article.dataset.indexNumber ;// "12314"  
   article.dataset.parent ;//

4. canvas的效能優化
   答案：主要有使用快取、避免浮點運算、儘量減少canvas API的呼叫、硬體加速。
   canvas的效能優化