1 HTML5和 HTML4有什麼差別, HTML5的代碼有什麼特征？

HTML5 

HTML5 是HTML 标準的最新演進版本。

它是一個新的HTML 語言版本包含了新的元素，屬性和行為，同時包含了一系列可以被用來讓 Web 站點和應用更加多樣化，功能更強大的技術。

盡管HTML5 代表的是HTML 進化革命裡的一大步。它向後相容的能力意味着隻要你适應HTML4， 你就可以适應 HTML5絕大多數新特性。

你要了解 Html5不僅是設計取代 HTML4的，還有 XHTML1和 DOM level 2 HTML。用于把 HTML5 文檔的位元組轉換成 DOM 的解釋器，已經被擴充了，并且現在精确地定義了在所有情況下使用的行為，甚至當碰到無效的 HTML 這種情況。這就使得 HTML5相容的浏覽器之間極大的可預測性和互操作性。

HTML4 和 HTML5 的主要差別

1 文法

HTML5的 doctype非常簡單。表明你的HTML内容使用 HTML5，隻需要簡單的使用：

在以前版本的HTML聲明使用的字元集，它是一個非常複雜的<meta>元素，現在它變得非常簡單：

比以前更短，更簡單，更容易記住并且減少必須下載下傳的位元組數。

MathML和 SVG分别使得數學公式和矢量圖像格式可以直接嵌入到HTML 中。

2 新元素

新的語義元素<mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>， <meter>；

新的外觀概要和節段元素: <section>, <article>, <nav>, <header>, <footer>, <aside>, <hgroup>；

能讓你更精确地闡述你的内容。

還有其他新屬性用于拓展現存元素的功能。

3 HTML5 表單

HTML5 擁有多個新的表單輸入類型，包括email，url, number, Date pickers, color 等。

HTML5中的表單元素和屬性提供了比HTML4更多的語義标記，并取消了大量的在HTML4不可缺少的腳本和樣式。HTML5中的表單功能為使用者提供了更好的體驗，使表單在不同網站之間更一緻，并向使用者提供有關資料輸入的即時回報。

4 元素内容模型

HTML4将元素分為塊級元素和行内元素, 不僅容易讓人迷惑，還和CSS display屬性中的同名術語一起容易造成混淆。

HTML5 細分了元素内容模型，光主内容類就分成了中繼資料内容（Metadata content), 流式元素（Flow content），章節元素（Sectioning content）,标題元素（Heading contect）, 短語元素（Phrasing content）,嵌入元素（Embedded content），互動元素（Interactive content），表單相關内容（Form-associated content）。

每個HTML元素都屬于0個、1 個或多個内容模型，每個模型都有一些規則使得元素中的内容必須遵循一個HTML規範文檔。

5 新APIs

新APIs使得網絡應用程式可以适用于不同裝置和使用者代理。

<audio> 和 <video> 元素嵌入并支援新的多媒體内容的操作；

<canvas>元素可被用來通過腳本（通常是JavaScript）繪制圖形。比如,它可以被用來繪制圖形,制作圖檔集合,甚至用來實作動畫效果。

應用緩存，線上離線事件，用戶端會話和持久化存儲等促進網絡應用程式的儲存和離線能力。

Geolocation讓浏覽器使用地理位置服務定位使用者的位置。

Drag and Drop API 能夠支援在網站内部和網站之間拖放項目。同時也提供了一個更簡單的供擴充和基于 Mozilla 的應用程式使用的 API。

Web Workers 能夠把 JavaScript 計算委托給背景線程，通過允許這些活動以防止使互動型事件變得緩慢。Web Sockets允許在頁面和伺服器之間建立持久連接配接并通過這種方法來交換非 HTML 資料。

以上是 HTML5和 HTML4的主要幾項差別。

HTML5的代碼有什麼特征？：

用于繪畫的 canvas 元素

用于媒介回放的 video 和 audio 元素

對本地離線存儲的更好的支援

新的特殊内容元素，比如 article、footer、header、nav、section

新的表單控件，比如 calendar、date、time、email、url、search

1、語義特性：HTML5賦予網頁更好的意義和結構。

2、HTML5 APP Cache及本地存儲：基于HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度

3、裝置相容：HTML5提供了前所未有的資料與應用接入開放接口。使外部應用可以與浏覽器内部的資料直接相連。

4、連接配接特性：更有效的連接配接工作效率，使得基于頁面的實時聊天，更快速的網頁遊戲體驗，更優化的線上交流得到了實作。HTML5擁有更有效的伺服器推送技術，能實作伺服器将資料“推送”到web app的功能。

5、圖形特性：基于SVG、Canvas、WebGL及CSS3的3D功能，使用者能在浏覽器中得以體驗到驚豔的視覺效果。

語義：能夠讓你更恰當地描述你的内容是什麼。

連通性：能夠讓你和伺服器之間通過創新的新技術方法進行通信。

離線 & 存儲：能夠讓網頁在用戶端本地存儲資料以及更高效地離線運作。

多媒體：使 video 和 audio 成為了在所有 Web 中的一等公民。

2D/3D 繪圖 & 效果：提供了一個更加分化範圍的呈現選擇。

性能 & 內建：提供了非常顯著的性能優化和更有效的計算機硬體使用。

裝置通路 Device Access：能夠處理各種輸入和輸出裝置。

樣式設計: 讓作者們來創作更加複雜的主題吧！

參考資料：

https://www.youtube.com/watch?v=9MzAzLHmaRs

https://www.w3.org/TR/html5-diff/ 

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

http://www.w3school.com.cn/html5/html_5_intro.asp