轉載自http://kb.cnblogs.com/page/108533/
摘要：HTML5反映了在網絡上和在雲端實施業務的方式的巨大變化。本篇文章是一個由四個部分構成的系列的第一部分，該文章系列旨在尋找並突出說明HTML5中的變化。其開始先介紹新的標籤和頁面的組織，然後提供一些網頁設計方面的高層面信息，比如說表單的創建、API的使用及其價值所在，以及Canvas提供的一些頗具創意的可能做法等。
[1] HTML5基礎，第1部分：初試鋒芒
[2] HTML5基礎，第1部分：初試鋒芒
英文原文：HTML5 fundamentals, Part 1: Getting your feet wet
HTML5是一種設計來組織web內容的語言，其目的是通過創建一種標準的和直觀的UI標記語言來把web設計和開發變得容易起來。HTML5提供了各種切割和劃分頁面的手段，其允許你創建的切割組件不僅能用來邏輯地組織站點，而且能夠賦予網站聚合的能力。 HTML5可謂是“信息到網站設計的映射方法”，因爲它體現了信息映射的本質，劃分信息，並給信息加上標籤，使其變得容易使用和理解。這是HTML5富於表現力的語義和實用性美學的基礎，HTML5賦予設計者和開發者各種層面的能力來向外發佈各式各樣的內容，從簡單的文本內容到豐富的、交互式的多媒體無不包括在內。
HTML5提供了高效的數據管理、繪製、視頻和音頻工具，其促進了web上的和便攜式設備的跨瀏覽器應用的開發。HTML5是驅動移動雲計算服務方面的發展的技術之一，因爲其允許更大的靈活性，支持開發非常精彩的交互式網站。其還引入了新的標籤（tag）和增強性的功能，其中包括了一個優雅的結構、表單的控制、API、多媒體、數據庫支持和顯著提升的處理速度等。
HTML5中的新標籤都是能高度關聯喚起的，標籤封裝了它們的作用和用法。HTML的過去版本更多的是使用非描述性的標籤，然而，HTML5擁有高度描述性的、直觀的標籤，其提供了豐富的能夠立刻讓人識別出內容的內容標籤。例如，被頻繁使用的< div>標籤已經有了兩個增補進來的<section>和<article>標籤。 <video>、<audio>、<canvas>和<figure> 標籤的增加也提供了對特定類型內容的更加精確的描述。
HTML5提供了：
1. 確切描述了其旨在要包含的內容的標籤
2. 增強的網絡通信
3. 極大改善了的常用存儲
4. 運行後臺進程的Web Worker
5. 在本地應用和服務器之間建立持續連接的WebSocket接口
6. 更好的存儲數據檢索方式
7. 加快了的頁面保存和加載速度
8. 對使用CSS3來管理GUI的支持，這意味着HTML5可以是面向內容的
9. 改進了的瀏覽器表單處理
10. 基於SQL的數據庫API，其允許客戶端的本地存儲
11. 畫布和視頻，可在無需安裝第三方插件的情況下添加圖形和視頻
12. Geolocation API規範，其通過使用智能手機定位功能來納入移動雲服務和應用
13. 增強型的表單，其降低了下載JavaScript代碼的這種必要性，允許在移動設備和雲服務之間進行更多高效的通信。
HTML5創建了一種更吸引用戶的體驗：使用HTML5設計的頁面能夠提供類似於桌面應用的體驗。HTML5還通過把API功能和無處不在的瀏覽器結合起來的的方式提供了增強的多平臺開發。通過使用HTML5，開發者能夠提供一種順暢地跨越各個平臺的現代應用體驗。
當你說HTML5這個詞的時候，你使用了一個簡短的詞來表達一種持續的創新。新的標記、新的一套方法，以及一個基於HTML5和它的兩個與之互爲補充的同仁：CSS3和JavaScript之間的相互作用的通用開發框架，這是以客戶爲中心的處理現象的應用的核心。除了HTML5技術的技巧和方法的許多桌面部署之外，HTML5還可以在功能豐富的web移動電話瀏覽器中實施——移動電話瀏覽器是一個正在增長的市場，Apple iPhone、Google Android和運行Palm webOS的手機的普及以至於無處不在就可以證明這一點。
HTML5的強大功能中很重要的一面是信息的映射——或說是內容塊化（content blocking）。如果你願意的話——這種做法會產生一種容易理解得多的處理過程。你可以看到，通過日益增加對web處理這一領域的控制，這一工具在設計和開發方面已經變得多麼的高效。
HTML5預示着這樣一些情況的出現，即其在文本層面上有着更高效的語義處理，以及在表單構造和用法上有着更強大的控制。所有的這些特性和HTML5創新的其他許多細微之處是這一越來越佔統治地位的範式的基礎。許多機構實體，商業的和其他的——甚至許多根本不把信息的處理和通信作爲他們的主要機構活動的組織——都不同程度地被這一不斷增長的現象的發展所侵襲。
HTML5並不是一盞神燈，不會有精靈出現。然而，它的技術和方法資產使得其成爲了一件次好的東西，僅次於擦亮一盞神燈這件事情。
規劃頁面
你將要創建一個簡單的web頁面。在這一過程中，我會討論幾個HTML5中引入的新標籤。爲了創建一個高效的並且是有實效的web頁面，你必須要制定一個計劃，考慮一下想要打造的所有組件。你創建的網頁將會有如圖1所示的高層設計，頁面的設計包含了一個Header區、一個Navigation區、一個包含了三個Section區和一個Aside區的Article區，以及最後的一個Footer區。該頁面weixinhuyu.net/news/611.html的設計目標是在Google的Chrome瀏覽器中工作，其消除了一些視覺上的混亂，這些混亂帶來的是瀏覽器兼容問題的調整，同時也妨礙到了對基礎結構的理解。我們的目標是創建出一個清晰地描述了新的HTML5標籤的用法的頁面，展示如何使用它們來創建格式良好的代碼和優雅的頁面設計。
圖1. Acme United的網頁的規劃
在創建這一頁面的過程中，我會涉及CSS3，我需要用它來正確地渲染HTML5網頁。CSS3對於HTML5頁面的的風格、導航和一般觀感來說是必不可少的，它的一些屬性組，你可以在WsSchool的CSS3參考站點（參見參考資料一節）上找到這些屬性，其中包括了一些很有用的元素，比如說background、font、marquee和animation等。
不過，在開始構造頁面之前，你需要學習一些新的HTML5的標籤。
Header區
Header區的例子包含了頁面標題和副標題，<header>標籤被用來創建頁面的Header區的內容。除了網頁本身之外，<header>標籤還可以包含關於<section>和<article>的公開信息。這裏創建的網頁有該頁面的一個Header區，這在高層設計中有給出，以及一個位於Article和Section區內部的Header區。清單1提供了一個< header>標籤標記的例子。
清單1. <header>標籤的例子
<header>
<h1>標題文字</h1>
<p>文本或是圖像可放在這裏</p>
<p>Logo通常也放在這個地方</p>
</header>
<header>標籤還可以包含一個<hgroup>標籤，如清單2所示。<hgroup>標籤把標題分組放在一起，使用<h1>到<h6>這些標題分級來在此處顯示主標題和子標題。
清單2. <hgroup>標籤的例子
<header>
<hgroup>
<h1>主標題</h1>
<h2>子標題 </h2>
</hgroup>
<p>文本或是圖像可放在這裏</p>
</header>
Navigation區
你可以使用<nav>標籤來創建頁面的Navigation區。<nav>元素定義了一個專門用於導航的區域，<nav>標籤應該用做主站點的導航，而不是用來放置被包含在頁面的其他區域中的鏈接。Navigation區可以包含諸如清單3所示的代碼。
清單3. <nav>標籤的例子
<nav>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
Article和Section區
你設計的頁面包含了一個Article區，該區域存放了頁面的實際內容。你使用<article>標籤來創建這一區域，該標籤定義的內容可獨立於頁面中的其他內容使用。例如，如果想創建一個RSS源（RSS feed）的話，那麼你可以使用<article>來唯一標識該內容。<article>標籤標識了可被刪除、可被放置在另一上下文中，並且是可被完全理解的內容。
Acme United規劃中的Article區包含了三個Section區，可使用<section>標籤來創建這幾個區域。<section>包含了web內容的相關組件區域，<section>標籤 —— 以及<article>標籤 —— 可以包含頁眉、頁腳，或是其他需要用來完成該部分內容的組件。<section>標籤用於分組的內容，<section>標籤和<article>標籤通常以一個<header>爲開始並以一個<footer>結束，標籤的內容則放在這兩者之間。
<section>標籤也可以包含<article>標籤，就像<article>標籤可以包含<section>標籤一樣。<section>標籤應該用來分組相類似的信息，而<article>標籤則應該是用來放置諸如一篇文章或是博客一類的信息，這些內容可在不影響內容含義的情況下被刪除或是被放置到新的上下文中。<article>標籤，正如它的名稱所暗示的那樣，提供了一個完整的信息包。相比之下，<section>標籤包含的是有關聯的信息，但這些信息自身不能被放置到不同的上下文中，因爲這樣的話其所代表的含義就會丟失。
<article>和<section>標籤的用法例子請參見清單4。
清單4. <article>標籤和<section>標籤的例子
<article>
<section>
Content
</section>
<section>
Content
</section>
</article>
<section>
<article>
Content
</article>
<article>
Content
</article>
</section>
圖像元素
<section>和<article>標籤這兩者，以及<header>和<footer>標籤都可以包含<figure>標籤，你使用該標籤來加入圖像、圖表和照片。
<figure>標籤可以包含<figcaption>，該標籤相應的包含了包含在<figure>標籤中的圖形的標題，其允許你輸入描述，把圖形和內容更加緊密的關聯起來。清單5提供了一個<figure>和<figcaption>標籤結構的例子。
清單5. <figure>和<figcaption>標籤的例子
<figure>
<img src="/figure.jpg" width="304" height="228" alt="Picture"/>
<figcaption>Caption for the figure</figcaption>
</figure>
媒體元素
<section>和<article>標籤還可以包含各種媒體元素，HTML5提供的標籤立刻就傳達了其內容的意思。媒體元素，比如說音樂和視頻，以前只能嵌入，但現在能夠被更精準地標識出來。
<audio>標籤標識了聲音內容，比如說音樂或是任何的其他音頻流。<audio>標籤有一些屬性用來控制音頻的內容、何時以及如何播放等方面的情況，這些屬性分別是：src、preload、control、loop和autoplay。在清單6給出的例子中，只要頁面一加載音頻就開會播放，其會持續播放，所提供的控制可以讓用戶停止或是重新開始播放音頻。
清單6. <audio>標籤的例子
<audio src="MyFirstMusic.ogg" controls autoplay loop>
Your browser does not support the audio tag.
</audio>
<video>標籤允許你播放視頻片段或是流化視覺媒體。其擁有<audio>標籤所有的屬性，另外再加上三個：poster、width和height。當視頻正在加載或是視頻處於完全沒有加載的糟糕情況中時，poster屬性可讓你找出一張圖像來應付着先。
清單7提供了一個<video>標籤結構的例子
清單7. 標籤的例子
<video src="MyFirstMovie.ogg" controls="controls">
Your browser does not support the video tag
</video>
<video>和<audio>標籤可以包含<source>標籤，該標籤定義了<video>和<audio>標籤的多媒體資源。使用這一元素，你可以指定替代的視頻或是音頻文件，然後瀏覽器就可以基於它的媒體類型或是所支持的編解碼器來從中進行選擇。清單8中有兩種選擇，如果文件的WMA版本不能在所使用的瀏覽器中播放的話，就再嘗試MP3版本。否則的話就顯示信息，這樣用戶就知道爲什麼音頻不可用了。
清單8. <source>標籤的例子
<audio>
<source src="/music/good_enough.wma" type="audio/x-ms-wma">
<source src="/music/good_enough.mp3" type="audio/mpeg">
<p>Your browser does not support the HTML 'audio' element.< /p>
</audio>
<embed>標籤定義了可帶入到頁面中的嵌入式內容 —— 例如， 一個Adobe Flash SWF文件的插件。清單9包含了type屬性，標明嵌入的資源爲Flash文件。
清單9. <embed>標籤的例子
<embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />
除了src和type屬性之外，<embed>標籤還擁有height和width屬性。