標籤：
一、使用 HTML5的十大原因你難道還沒有考慮使用HTML5？ 當然我猜想你可能有自己的原因；它現在還沒有被廣泛的支援，在IE中不好使，或者你就是喜歡寫比較嚴格的XHTML代碼。HTML5是web開發世界的一次重大的改變，事實上不管你是否喜歡，它都是代表著未來趨勢。其實HTML5並不難理解和使用。我們這裡能列出許多原因為什麼現在要開始使用HTML5。
目前有很多的文章介紹使用HTML5並且介紹了使用它的優勢和好處，沒錯，我們這篇文章也類似。隨著更多這樣的文章，以及Apple的支援， Adobe圍繞HTML5的產品開發，以及移動flash的死亡，如此多網站的支援，我想對那些仍舊沒有或者不想接受它的人說一些話。我認為主要得原因是，它看起來像一個神秘的東西。很多感覺它像噴氣背包或者飛行汽車。一個未經驗證的非凡想法但是並不實際。但是事實上現在已近非常的實際了。
為瞭解密HTML5並且協助頑固的開發設計人員，我這裡寫了列出了使用HTML5的幾大原因，希望對大家有協助！
第十大原因：易用性
倆個原因使得使用HTML5建立網站更加簡單：語義上及其ARIA。新的HTML標籤像<header>, <footer>，<nav>，<section>， <aside>等等，使得閱讀者更加容易去訪問內容。在以前，即使你定義了class或者ID你的閱讀者也沒有辦法去瞭解給出的一個div究竟是什麼。使用新的語意學的定義標籤，你可以更好的瞭解HTML文檔，並且建立一個更好的使用體驗。
ARIA是一個W3C的標準主要用來對HTML文章中的元素指定“角色“，通過角色屬性來建立重要的頁面地形例如,header，footer，navigation或者aritcle很有必要。這一點曾經被忽略掉了並且沒有被廣泛使用，因為事實上並不驗證。然而，HTML5將會驗證這樣屬性。同時，HTML5將會內建這些角色並且無法不覆蓋。更多的HTML5和ARIA討論，請大家查看這裡。
第九大原因：視頻和音頻支援忘了flash和其它第三方應用吧，讓你的視頻和音頻通過HTML5標籤<video>和<audio>來訪問資源。正確播放媒體一直都是一個非常可怕的事情，你需要使用<embed>和<object>標籤，並且為了它們能正確播放必須賦予一大堆的參數。你的媒體標籤將會非常複雜，大堆得令人迷惑的代碼。而且HTML5視頻和音頻標籤基本將他們視為圖片：<video src=”"/>。但是其它參數例如寬度和高度或者自動播放呢？不必擔心，只需要像其它HTML標籤一樣定義：<video src=”url” width=”640px” height=”380px” autoplay/>。
實際上這個過程非常簡單，然而我們的老瀏覽器可能並不喜歡我們的HTML5，你需要添加更多代碼來讓他們正確工作。但是這個代碼還是比<embed>和<object>來的簡單的多。
第八大原因：Doctype沒錯，就是doctype，沒有更多內容了。是不是非常簡答？不需要拷貝粘貼一堆無法理解的代碼，也沒有多餘的head標籤。最大的好訊息在於，除了簡單，它能在每一個瀏覽器中正常工作即使是名聲狼藉的IE6。
第七大原因：更清晰的代碼如果你對於簡答，優雅，容易閱讀的代碼有所偏好的話，HTML5絕對是一個為你量身定做的東西。HTML5允許你寫出簡單清晰富於描述的代碼。符合語意學的代碼允許你分開樣式和內容。看看這個典型的簡單擁有導航的heaer代碼：
<div id="header"> <h1>Header Text</h1> <div id="nav"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div></div>
是不是很簡單？但是使用HTML5後會使得代碼更加簡單並且富有含義：
<header> <h1>Header Text</h1> <nav> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav></header>
使用HTML5你可以通過使用語意學的HTML header標籤描述內容來最後解決你的div及其class定義問題。 以前你需要大量的使用div來定義每一個頁面內容地區，但是使用新的<section>，<article>，<header>，<footer>，<aside>和<nav>標籤，需要你讓你的代碼更加清晰易於閱讀。
第六大原因：更聰明的儲存HTML5中最酷的特性就是本機存放區。有一點像比較老的技術cookie和用戶端資料庫的融合。它比cooke更好用因為支援多個windows儲存，它擁有更好的安全和效能，即使瀏覽器關閉後也可以儲存。
因為它是個用戶端的資料庫，你不用擔心使用者刪除任何cookie，並且所有主流瀏覽器都支援。
本機存放區對於很多情況來說都不錯， 它是HTML5工具中一個不需要第三方外掛程式實現的。能夠儲存資料到使用者的瀏覽器中意味你可以簡單的建立一些應用特性例如：儲存使用者資訊，快取資料，載入使用者上一次的應用狀態。
第五大原因：更好的互動我們都喜歡更好的互動，我們都喜歡對於使用者有反饋的動態網站，使用者可以享受互動的過程。輸入<canvas>，HTML5的畫表徵圖簽允許你做更多的互動和動畫，就像我們使用Flash達到的效果。
除了<canvas>，HTML5同樣也擁有很多API允許你建立更加好的使用者體驗並且更加動態web應用程式。 這裡有一個列表：
沒錯， 你可以使用HTML5的<canvas>開發遊戲。HTML5提供了一個非常偉大的，移動友好的方式去開發有趣互動的遊戲。如果你開發Flash遊戲，你就會喜歡上HTML5的遊戲開發。
Script-tutorials目前提供了4個不部分的HTML5遊戲開發教程，這裡看看他們開發的有趣遊戲：
你的現代流行瀏覽器都支援HTML5（Chrome，Firefox，Safari，IE9和Opera），並且建立了HTML5 doctype這樣所有的瀏覽器，即使非常老非常令人厭惡瀏覽器像IE6都可以使用。但是因為老的瀏覽器能夠識別doctype並不意味它可以處理HTML5標籤和功能。幸運的是，HTML5已經使得開發更加簡單了，更多支援更多瀏覽器，這樣老的IE瀏覽器可以通過添加javascript代碼來使用新的元素：
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->第二大原因： 移動，移動還是移動
你可以稱之為“直覺”，但是我認為移動技術將會變得更加的流行。我知道，這裡有些非常瘋狂的猜測，有些可能你也想到了 – Mobile是一個時尚！行動裝置將佔領世界。更多的接受行動裝置將會增長的非常迅速。這意味著更多的使用者會選擇使用行動裝置訪問網站或者web應用。HTML5是最移動化的開發工具。隨著Adobe宣布放棄移動flash開發，你將會考慮使用HTML5來開發webp應用。
當手機瀏覽器完全支援HTML5那麼開發移動項目將會和設計更小的觸摸顯示一樣簡單。這裡有很多的meta標籤允許你最佳化移動：
最大的原因今天你就開始使用HTML5是因為它是未來，不要掉隊了！HTML5不會往每個方向發展，但是更多的元素已經被很多公司採用，並且開始著手開發。HTML5其實更像HTML，它不是一個新的技術需要你重新學習！如果你開發XHTML strict的話你現在就已經在開發HTML5了。為什麼不更完整的享受HTML5的功能呢？
你實際上沒有任何借口不接受HTML5。事實上我唯一一個原因使用HTML5是因為它書寫代碼簡單清晰。其它的特性其實我也沒有真正使用。你可以考慮現在開始使用HTML5書寫代碼，它能協助你改變書寫代碼的方式及其設計方式。開始用HTML5代碼編寫web應用吧，說不定下一個行動裝置 App或者遊戲應用就是用HTML5開發的！
英文原文：Top 10 Reasons to Use HTML5 Right Now
來源：GBin1.com 、 雷鋒網。
二、HTML5 新元素自1999年以後HTML 4.01 已經改變了很多,今天，在HTML 4.01中的幾個已經被廢棄，這些元素在HTML5中已經被刪除或重新定義。
為了更好地處理今天的互連網應用，HTML5添加了很多新元素及功能，比如: 圖形的繪製，多媒體內容，更好的頁面結構，更好的形式 處理，和幾個api拖放元素，定位，包括網頁 應用程式緩衝，儲存，網路工作者，等。
<canvas> 新元素| 標籤 | 描述 |
|---|---|
| <canvas> | 標籤定義圖形，比表和其他映像。該標籤基於 JavaScript 的繪圖 API |
| 標籤 | 描述 |
|---|---|
| <audio> | 定義音頻內容 |
| <video> | 定義視頻（video 或者 movie） |
| <source> | 定義多媒體資源 <video> 和 <audio> |
| <embed> | 定義嵌入的內容，比如外掛程式。 |
| <track> | 為諸如 <video> 和 <audio> 元素之類的媒介規定外部文本軌道。 |
| 標籤 | 描述 |
|---|---|
| <datalist> | 定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。 |
| <keygen> | 規定用於表單的金鑰組產生器欄位。 |
| <output> | 定義不同類型的輸出，比如指令碼的輸出。 |
HTML5提供了新的元素來建立更好的頁面結構：
| 標籤 | 描述 |
|---|---|
| <article> | 定義頁面獨立的內容地區。 |
| <aside> | 定義頁面的側邊欄內容。 |
| <bdi> | 允許您設定一段文本，使其脫離其父元素的文本方向設定。 |
| <command> | 定義命令按鈕，比如選項按鈕、複選框或按鈕 |
| <details> | 用於描述文檔或文檔某個部分的細節 |
| <dialog> | 定義對話方塊，比如提示框 |
| <summary> | 標籤包含 details 元素的標題 |
| <figure> | 規定獨立的流內容（映像、圖表、照片、代碼等等）。 |
| <figcaption> | 定義 <figure> 元素的標題 |
| <footer> | 定義 section 或 document 的頁尾。 |
| <header> | 定義了文檔的頭部地區 |
| <mark> | 定義帶有記號的文本。 |
| <meter> | 定義度量衡。僅用於已知最大和最小值的度量。 |
| <nav> | 定義運行中的進度（進程）。 |
| <progress> | 定義任何類型的任務的進度。 |
| <ruby> | 定義 ruby 注釋（中文注音或字元）。 |
| <rt> | 定義字元（中文注音或字元）的解釋或發音。 |
| <rp> | 在 ruby 注釋中使用，定義不支援 ruby 元素的瀏覽器所顯示的內容。 |
| <section> | 定義文檔中的節（section、區段）。 |
| <time> | 定義日期或時間。 |
| <wbr> | 規定在文本中的何處適合添加分行符號。 |
以下的 HTML 4.01 元素在HTML5中已經被刪除:
HTML5初步瞭解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
