答 ： 1、語義化標籤，比如<header></header>、<section></section>、<footer></footer>等等；

　　  2、增強型表單，input輸入型別增強，提供了更好的輸入控制和驗證，比如number（只能輸入數字）、email（包含 e-mail 地址的輸入域及簡單驗證）、range（一定範圍內數字值的輸入域）、month（選擇一個月份）等等；新增表單元素，<datalist>、<keygen>、<output>；新增表單屬性：placehoder （輸入框提示）、required （值為boolean，用於非空驗證）、pattern（設定正則表示式用於驗證輸入值）等等。

　 　3、音訊和視訊，音訊： <audio> 標籤，視訊：<video>標籤。

　　 4、Canvas繪圖，使用標籤<canvas>，通過 JavaScript 來繪製 2D 圖形。是逐畫素進行渲染的。在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的物件，且canvas不能實現DOM操作。

 　　5、SVG繪圖，SVG是指可伸縮的向量圖形，使用 XML 描述 2D 圖形的語言，放大不失真，DOM 中的每個元素都是可操作的，每個被繪製的圖形均被視為物件，如果 SVG 物件的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

　　 6、地理定位，Geolocation（地理定位）用於定位使用者的位置。

　　 7、拖放API，即抓取物件以後拖到另一個位置，拖放的過程分為源物件和目標物件。源物件是指你即將拖動元素，而目標物件則是指拖動之後要放置的目標位置。

源物件的觸發事件：dragstart：拖動開始、drag：拖動中、dragend：拖動結束。整個拖動過程的組成： dragstart*1 + drag*n + dragend*1；

目標物件觸發的事件：dragenter：拖動著進入、dragover：拖動著懸停、dragleave：拖動著離開、drop：釋放。

整個拖動過程的組成1： dragenter*1 + dragover*n + dragleave*1；

 

整個拖動過程的組成2： dragenter*1 + dragover*n + drop*1。

　　 8、Web Worker，web worker 是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能。您可以繼續做任何願意做的事情：點選、選取內容等等，而此時 web worker 在後臺執行，詳情請見W3C。

　　 9、Web Storage，使用HTML5可以在本地儲存使用者的瀏覽資料。早些時候,本地儲存使用的是cookies。但是Web 儲存需要更加的安全與快速. 這些資料不會被儲存在伺服器上，但是這些資料只用於使用者請求網站資料上.它也可以儲存大量的資料，而不影響網站的效能。資料以 鍵/值 對存在, web網頁的資料只允許該網頁訪問使用。分為：

• localStorage - 沒有時間限制的資料儲存
• sessionStorage - 針對一個 session 的資料儲存, 當用戶關閉瀏覽器視窗後，資料會被刪除。 

    　10、WebSocket，WebSocket是HTML5開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。在WebSocket API中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。瀏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連線的請求，連線建立以後，客戶端和伺服器端就可以通過 TCP 連線直接交換資料。當你獲取 Web Socket 連線後，你可以通過 send() 方法來向伺服器傳送資料，並通過 onmessage 事件來接收伺服器返回的資料。

 如何處理新標籤的瀏覽器相容問題：HTML5規範畢竟是剛剛才定義完成的規範，還有一些瀏覽器並不能支援其中的新標籤和新屬性，尤其是IE8及以下版本瀏覽器。IE8/IE7/IE6支援通過document.createElement方法產生的標籤，可以利用這一特性讓這些瀏覽器支援HTML5新標籤。或者使用html5shim框架，在瀏覽器頭部引用就可以，

 

（1）建立新節點3種： createDocumentFragment()    （建立一個DOM片段）、 createElement()（建立一個元素）、 createTextNode()（建立一個文字節點）

（2）新增： appendChild()

（3）移除：removeChild()    額外補充：替換replaceChild()

（4）查詢：getElementsByTagName() （通過標籤名）、getElementsByName() （通過name屬性名）、getElementById()（通過ID值）、getElementByClass(通過class值)

（5）複製：cloneNode() 用於複製節點， 接受一個布林值引數， true 表示深複製（複製節點及其所有子節點）， false 表示淺複製（複製節點本身，不復制子節點）

（6）移動：獲取DOM元素，用使用css3 transform:translate(X,Y)來偏移元素

 

  null： Null型別，代表“空值”，代表一個空物件指標，使用typeof運算得到 “object”，所以你可以認為它是一個特殊的物件值。

undefined： Undefined型別，當一個聲明瞭一個變數未初始化時，得到的就是undefined。

 

一般我們都建議使用link標籤，慎用@import方式。是因為避免產生資原始檔下載順序混亂和http請求過多的煩惱。

區別：

  1、@import是 CSS 提供的語法規則，只有匯入樣式表的作用；link是HTML提供的標籤，不僅可以載入 CSS 檔案，還可以定義 RSS、rel 連線屬性等。

  2、載入頁面時，link標籤引入的 CSS 被同時載入；@import引入的 CSS 將在頁面載入完畢後被載入。

  3、可以通過 JS 操作 DOM ，插入link標籤來改變樣式；由於 DOM 方法是基於文件的，無法使用@import的方式插入樣式。

  4、@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標籤作為 HTML 元素，不存在相容性問題。（當然現在可能已經不存在IE5以下的瀏覽器了）

 

  1、標準模式的排版 和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

 

  1、使用空標籤清除浮動clear:both。（不推薦）

  2、父級div定義overflow:hidden（必須定義width或zoom:1，同時不能定義height）（不推薦）

  3、父級div定義偽類:after（*zoom：1(IE轉有屬性)可解決ie6,ie7浮動問題，，定義在父元素上）（推薦）

  4、父級div定義height（只適合高度固定的佈局）（不推薦）

  5、父級div定義overflow:auto（內部寬高超過父級div時，會出現滾動條。）（不推薦）  

所以比較好的是第三種！

 

  box-sizing 屬性允許以特定的方式定義匹配某個區域的特定元素。例如，假如需要並排放置兩個帶邊框的框，可通過將 box-sizing 設定為 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。

常用屬性：

  1、content-box（寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框）

  2、border-box（為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度）

  3、inherit（規定應從父元素繼承 box-sizing 屬性的值）

 

  HTML 4.01 中的 doctype 需要對 DTD 進行引用，因為 HTML 4.01 基於 SGML。而 HTML 5 不基於 SGML，因此不需要對 DTD 進行引用，但是需要 doctype 來規範瀏覽器的行為。其中，SGML是標準通用標記語言,簡單的說，就是比HTML,XML更老的標準，這兩者都是由SGML發展而來的，而HTML5不是的。

 

主要分成兩個部分：渲染引擎和JS引擎。

渲染引擎：負責取得網頁的內容(html,xml和影象等)，整理訊息(例如假如css)，以及計算網頁的顯示方式，然後輸出到顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不同。所有網頁瀏覽器、電子郵件客戶端以及它需要編輯、顯示網路內容的應用程式都需要核心。 JS引擎：解析和執行JavaScript來實現網頁的動態效果。 最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向與只指渲染引擎。 常見的瀏覽器核心： Trident核心：IE，360，搜狐瀏覽器； Gecko核心：Netscape6及以上版本， Presto核心：Opera Blink核心：Opera； Webkit核心：Safari，Chrome  

  1、行內元素與塊級函式可以相互轉換，通過修改display屬性值來切換塊級元素和行內元素，行內元素display：inline，塊級元素display：block。

  2、行內元素和其他行內元素都會在一條水平線上排列，都是在同一行的；塊級元素卻總是會在新的一行開始排列，各個塊級元素獨佔一行，垂直向下排列，若想使其水平方向排序，可使用左右浮動（float：left/right）讓其水平方向排列。

  3、行內元素不可以設定寬高，寬度高度隨文字內容的變化而變化，但是可以設定行高（line-height），同時在設定外邊距margin上下無效，左右有效，內填充padding上下無效，左右有效；塊級元素可以設定寬高，並且寬度高度以及外邊距，內填充都可隨意控制。     

  4、塊級元素可以包含行內元素和塊級元素，還可以容納內聯元素和其他元素；行內元素不能包含塊級元素，只能容納文字或者其他行內元素。

 

   就分享這麼多啦，如有不足之處，請大家多多指教！