現(xiàn)今我們能用 HTML5 嗎，能用它做些什么呢，是否真的是 Flash 殺手？想必你也注意到了這些日漸增長且常被問起的類似問題，被討論著，甚至被回答過。在我看來，你必須自己回答這些基本的問題。
這篇文章的本意是想幫你通過一些基本指南的學(xué)習(xí)，以輕松學(xué)習(xí)代碼模板。一旦你熟悉了這些基本，并想更進(jìn)一學(xué)習(xí)，你還將會(huì)找到更多提供了建議、技巧和技術(shù)的有用資源。
HTML 5 特性
官方詳細(xì)的文檔是尋找 HTML5 特性的最好地方，當(dāng)然你還可以輕松通過 W3Schools 來學(xué)習(xí)HTML5 標(biāo)簽。我們將會(huì)在文章中涉及到以下的特性：
- 語義化標(biāo)記
- Form 表單增強(qiáng)功能
- 視頻 / 音頻
- 畫布（Canvas）
- 可編輯內(nèi)容
- 拖放
- 穩(wěn)健的數(shù)據(jù)存儲(chǔ)
檢測(cè)瀏覽器支持
在你開始嘗試 HTML5之前，需要知道各主流瀏覽器的支持狀況。這些有用的資源，將可以幫助你向著正軌走：
你還可以運(yùn)行 Javascript（用Javascript 檢測(cè)瀏覽器特性）來檢測(cè) HTML5 特性的支持。你還應(yīng)該用用Modernizr： 一個(gè)非常不錯(cuò)的檢測(cè) HTML5/CSS3 本地支持的 Javascript 庫。如果你選擇用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。
你可能也會(huì)想留意不斷變化的"瀏覽器市場份額分享" — 這些信息對(duì)于你決定用何種解決或折衷的方法將會(huì)是非常必要的。
值得注意的變更點(diǎn)
除了新的特征，你還應(yīng)該記下這些重要的變更點(diǎn)：
- 簡潔的 DOCTYPE HTML5 只需一個(gè)簡潔的文檔類型：。它有意不使用版本，因此文檔將會(huì)適用所有版本的HTML。
- 簡單易記的語言標(biāo)簽 你并不需要在 中使用 xmlns 或 xml:lang 標(biāo)記。 將對(duì) HTML5 有效。
- 簡單易記的編碼類型 你現(xiàn)在可以在 meta 標(biāo)簽中使用 "charset"：<head>
<meta charset="utf-8" />
<title>HTML5 Document</title>
</head>
<body>
</body>
</html>你可以使用HTML5 Validator 或 W3C Markup Validation Service 來測(cè)試你的 HTML5 文檔。
語義化標(biāo)記
HTML5 新增的一些新標(biāo)簽除了不僅僅是更具語義的
標(biāo)簽的替代品，并不提供額外的功能。這些都是新增的標(biāo)簽：<articl>、<section>、<aside>、<hgroup>、<header>, <footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>。這些標(biāo)簽被除了IE 外的所有現(xiàn)代瀏覽器（Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+）支持。Javascript 提供了document.createElement(tagName) 的方法，讓你可以用來創(chuàng)建新的 HTML5 標(biāo)簽。代替自己創(chuàng)建這些元素，你還可以用HTML5 Enabling Script 或 IE Print Protector — 這些腳本將幫助 IE 正常處理 HTML5 元素的渲染。
你可能會(huì)想到添加 CSS Reset 到這些新元素上。這里是一些可以用在你以 HTML5 為基礎(chǔ)的項(xiàng)目的CSS Reset：
簡單代碼示例: 兼容 IE 的 HTML5 頁面布局
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Semantic Markup Demo: Cross Browser</title>
<link rel="stylesheet" href="html5reset.css" type="text/css" />
<link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
<!--[if lt IE 9]>
<script src="http://pic.html5code.nethtml5.js"></script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1>Page Header</h1>
<h2>Page Sub Heading</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<header>
<h1>Article Heading</h1>
<time datetime="2010-05-05" pubdate>May 5th, 2010</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<section>
<header>
<h1>Section Heading</h1>
</header>
<p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
<footer>
<p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p>
</footer>
</section>
<section>
<header>
<h1>Section Heading</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<figure>
<img src="item-1.png" alt="Club">
<img src="item-2.png" alt="Heart">
<img src="item-3.png" alt="Spade">
<img src="item-4.png" alt="Diamond">
<figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption>
</figure>
<p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p>
<footer>
<p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p>
</footer>
</section>
<footer>
Article Footer
</footer>
</article>
<aside>
<header>
<h1>Siderbar Heading</h1>
</header>
<p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
</aside>
<footer>
Page Footer
</footer>
</body>
</html>注意：沒有一個(gè) div 標(biāo)簽，id 或 class 屬性被使用到 — 簡潔、小巧和更語義化的標(biāo)記 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 來檢測(cè)你的 HTML5 文檔。
注意：這個(gè)示例在 IE6 下并未正常顯示。這只是因?yàn)槲沂褂?CSS child combinators 來避免使用額外的 class。你可以在 IE6 下用自己的 CSS ，像其他瀏覽器一樣處理 HTML5 標(biāo)記。
表單增強(qiáng)
HTML5 為表單提供了幾個(gè)新的屬性、input 類型和標(biāo)簽。到目前為止，只有 Opera 對(duì)HTML5 有比較好的支持。你因此應(yīng)該下載 Opera 來查看大部分新特性如何工作。
- 新的INPUT類型
color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, 和 url - 新屬性
required, autofocus, pattern, list, autocomplete 和 placeholder - 新元素
<keygen>, <datalist>, <output>, <meter> 和 <progress>
值得高興的是盡管支持有限，使用這些特性也是個(gè)不錯(cuò)的選擇。因?yàn)樾碌?INPUT 類型會(huì)漂亮地降級(jí)為 TEXT 類 INPUT（譯注：INPUT 的默認(rèn) type 為 text）。且記住現(xiàn)今你仍可以折衷使用 Javascript 控制表單（這個(gè)技巧是指首先檢測(cè)瀏覽器自身支持，然后才是使用折衷方法）。
簡單代碼示例：列出一些今天你可以拿來測(cè)試的新特性
<form>
<fieldset>
<legend>New Attributes</legend>
<p>
<label>Required:</label>
<input type="text" name="html5requied" required="true">
<small>Works in Opera & Chrome</small>
</p>
<p>
<label>AutoFocus:</label>
<input type="text" name="html5autofocus" autofocus="true">
<small>Works in Opera, Chrome & Safari</small>
</p>
<p>
<label>PlaceHolder:</label>
<input type="text" name="html5placeholder" placeholder="This Will Show in WebKit">
<small>Works in Chrome & Safari</small>
</p>
<p>
<label>Input Pattern:</label>
<input type="text" pattern="[0-9][A-Z]{3}" name="html5pattern" required title="Enter a digit followed by three uppercase letters"/>
<small>Works in Opera & Chrome</small>
</p>
<p>
<label>Multiple Files:</label>
<input type="file" name="html5multiplefileupload" multiple>
<small>Works in Chrome, Safari & Firefox</small>
</p>
<p>
<label>List:</label>
<input type="text" name="html5textwithdatalist" list="colors">
<datalist id="colors">
<option value="Red">
<option value="Green">
<option value="Blue">
</datalist>
<small>Works in Opera</small>
</p>
</fieldset>
<fieldset>
<legend>New Input Types</legend>
<p>
<label>Email:</label>
<input type="email" name="html5email">
<small>Works in Opera</small>
</p>
<p>
<label>URL:</label>
<input type="url" name="html5url">
<small>Works in Opera</small>
</p>
<p>
<label>Number:</label>
<input type="number" name="html5number" min="1" max="10" step="1" value="1">
<small>Works in Opera</small>
</p>
<p>
<label>Range:</label>
<input type="range" name="html5range" min="-100" max="100" value="0" step="10">
<small>Works in Opera, Chrome & Safari</small>
</p>
<p>
<label>Time:</label>
<input type="time" step="900" name="html5time">
<small>Works in Opera</small>
</p>
<p>
<label>Date:</label>
<input type="date" name="html5date">
<small>Works in Opera</small>
</p>
<p>
<label>Month:</label>
<input type="month" name="html5month">
<small>Works in Opera</small>
</p>
<p>
<label>Week:</label>
<input type="week" name="html5week">
<small>Works in Opera</small>
</p>
<p>
<label>DateTime:</label>
<input type="datetime" name="html5datetime">
<small>Works in Opera</small>
</p>
</fieldset>
<div><button>Submit</button></div>
在我們的 DEMO 中的出現(xiàn)的特性，都順利地運(yùn)行在 Opera 上，但你仍需要使用 Chrome 或 Safari 來看其他小部分功能的實(shí)際運(yùn)行狀態(tài)（View Demo）。
不需要插件的視頻和音頻
HTML5 對(duì)視頻和音頻特性規(guī)范文檔的制定是被討論最多的。除瀏覽器自帶支持的明顯好處外，評(píng)論點(diǎn)集中在瀏覽器提供商對(duì)音頻/視頻格式的不同選擇。如果你準(zhǔn)備使用HTML5的 和 ，使你熟悉下面這些視頻/音頻的解碼器和瀏覽器支持是非常重要的：
- 音頻: ogg (ogg, oga), mp3, wav, AAC
- 視頻: ogg (ogv), H.264 (mp4)
另外你還需要留意一下 Google 的 VP8 視頻解碼，這個(gè)將被作為一個(gè)開源格式來結(jié)束（格式選擇的）紛爭。HTML5 提供的一個(gè)解決方案是，讓你可以指定多個(gè)不同格式的源文件，以便于用戶瀏覽器選擇它認(rèn)識(shí)的文件。對(duì)于 < IE9 和舊瀏覽器，你將需要一個(gè)折衷的解決方案。
當(dāng)你第一次嘗試 HTML5 的音頻/視頻，你可能會(huì)想知道這些可能對(duì)你有幫助的東東：
- 你的服務(wù)器必須支持你打算提供的音頻/視頻的 MIME 格式。你將需要檢查一下其在本地服務(wù)器上是否被支持。
- 如果你使用 Safari 來檢測(cè) HTML5 的音頻/視頻支持，需要安裝 QuickTime Player，沒有QuickTime Player 的 Safari 什么都不能播放。
簡單代碼示例：音頻標(biāo)記 (View Demo)
<audio controls>
<source src="demo-audio.ogg" />
<source src="demo-audio.mp3" />
</audio>
簡單代碼示例：視頻標(biāo)記 (View Demo)
<video width="320" height="240" controls preload="none" poster="videoframe.jpg">
<source src="demo-video.mp4" type="video/mp4" />
<source src="demo-video.ogv" type="video/ogg" />
</video>記得加上type，不然，即使格式對(duì)了，也可能播放不了
盡管相對(duì)于要依賴第三方插件已經(jīng)邁了一大步，但上面提供的示例，只是一個(gè)開始。由于各個(gè)瀏覽都提供了不同外觀的控制欄，你可能會(huì)希望改變他們以適應(yīng)你的設(shè)計(jì)。看看下面例子如何利用 DOM API 來創(chuàng)造一個(gè)屬于你自己的自定義控制欄。
簡單代碼示例：擁有自定義控制欄的視頻 (View Demo)
<video width="320" height="240" preload="none" poster="videoframe.jpg">
<source src="demo-video.mp4" type="video/mp4" />
<source src="demo-video.ogv" type="video/ogg" />
</video>
<script>
var video = document.getElementsByTagName('video')[0];
function toggleMute() {
video.muted = !video.muted;
}
</script>
<p>
<a href="JavaScript:video.play();">Play</a> |
<a href="JavaScript:video.pause();">Pause</a> |
<a href="JavaScript:toggleMute();">Sound On/Off</a>
</p>
你還可以利用 DOM API 來為音頻/視頻做更多。而且如果你樂意添加一些其他的東西，將會(huì)把這個(gè)帶向一個(gè)完全不同的級(jí)別。例如，你可以把視頻放到了 HTML5 canvas 元素中。這將會(huì)允許你讀取一個(gè)視頻的像素?cái)?shù)據(jù)、控制、和幀，并做一些你想做的好玩的東東。
基于 JavaScript 的 2D 繪畫
HTML5 中最讓人興奮的特性是 <canvas> — 那個(gè)用來作畫的東東。在你的頁面中插入 canvas 就像插入其他標(biāo)記一樣平常，但你將需要一些編程的經(jīng)驗(yàn)來繪制形狀、圖表、動(dòng)畫、游戲、圖片作品等。
在除 IE 外的所有現(xiàn)代瀏覽器（Firefox 3, Safari 3.1, Chrome 2, and Opera 9.6）都支持 Canvas。你可以使用 ExplorerCanvas 這個(gè) Javascript 解決方案來為 IE 添加這個(gè)新特性。
簡單示例代碼: 基于指令的 HTML5 Canvas 2D 繪畫 (View Demo)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Demo</title>
<link rel="stylesheet" href="html5reset.css" type="text/css" />
<link rel="stylesheet" href="html5simple.css" type="text/css" />
<!--[if lt IE 9]>
<script src="http://pic.html5code.nethtml5.js"></script>
<script src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// Draw Rectangle
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect (10, 10, 100, 100);
// Draw Circle
ctx.fillStyle = "rgb(0,255,0)";
ctx.beginPath();
ctx.arc(125,100,50,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();
// Draw Custom Shape With Lines
ctx.fillStyle = "rgb(0,0,255)";
ctx.beginPath();
ctx.moveTo(125,100);
ctx.lineTo(175,50);
ctx.lineTo(225,150);
ctx.fill();
ctx.closePath();
// Draw Image From External File
var myImage = new Image();
myImage.onload = function(){
ctx.drawImage(myImage, 220, 10);
}
myImage.src = "sample.jpg";
}
}
</script>
<style type="text/css">
canvas {
border: 5px solid #ccc;
background: #000;
}
</style>
</head>
<body onload="draw();">
<header>
<h1>HTML5 Canvas Demo</h1>
</header>
<figure>
<canvas id="mycanvas" width="300" height="200">Fallback content, in case the browser does not support Canvas.</canvas>
<figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)</figcaption>
</figure>
</body>
</html>讓內(nèi)容可編輯
如果你想讓頁面的某個(gè)地方，允許用戶編輯頁面，所有的你需要做的事就是添加 contenteditable 屬性到父容器中。你可能曾在 WYSIWYG 編輯器中看過。這個(gè)屬性是 HTML5 的一部分，且它幾乎被所有主流瀏覽器支持（Internet Explorer 5.5+, Firefox 3+, Safari 3.1+, Chrome 2+, and Opera 9.6+）：
值得注意的是設(shè)置 contenteditable="true" 只是允許用戶編輯、刪除、插入內(nèi)容，并不會(huì)自動(dòng)提供其他類似于 WYSIWYG 編輯器的保存或應(yīng)用樣式的功能。你將需要自己用 Javascript 來添加這些功能。
簡單示例代碼: 有加粗、傾斜和下劃線功能的基本編輯器 (View Demo)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 ContentEditable Demo</title>
<link rel="stylesheet" href="html5reset.css" type="text/css" />
<link rel="stylesheet" href="html5simple.css" type="text/css" />
<!--[if lt IE 9]>
<script src="http://pic.html5code.nethtml5.js"></script>
<![endif]-->
<script language="javascript">
function editStyle(cmd) {
document.execCommand(cmd, null, null);
}
</script>
</head>
<body onload="draw();">
<header>
<h1>HTML5 ContentEditable Demo</h1>
</header>
<div id="democontainer">
<div id="editingcontrols">
<a href="#" onclick="editStyle('bold');">[Bold]</a>
<a href="#" onclick="editStyle('italic');">[Italic]</a>
<a href="#" onclick="editStyle('underline');">[Underline]</a>
</div>
<div id="editor" contenteditable="true">
<h2>HTML5 Standardized Content Editing</h2>
<p>Thanks to Microsoft; HTML elements are editable since Internet Explorer 5.5....</p>
<p>To edit just start typing. To change style, select text and click on links in the tools bar.</p>
</div>
</div>
</body>
</html>拖放
HTML5 的拖放將會(huì)把與用戶交互帶向別一個(gè)等級(jí)，并將會(huì)對(duì)你如何設(shè)計(jì)用戶交互產(chǎn)生重大影響。現(xiàn)今，Firefox 3.5+ 已經(jīng)對(duì)此特性提供了最大化的支持，其他瀏覽還只是保守地支持了一小部分（Opera 完全不支持）。不幸的是根據(jù)現(xiàn)階段瀏覽器提供商的執(zhí)行狀況，你將需要依賴大量的 Javascript 和 CSS 來讓做跨瀏覽器支持。
注意：
- 圖片和超鏈接默認(rèn)是可拖放的。對(duì)于所有的元素，HTML5 引進(jìn)了一個(gè)新的屬性"draggable"，這將用來設(shè)置元素是否接受拖放；
- 下列事件對(duì)應(yīng) HTML5 的拖放：dragstart, drag, dragenter, dragover, dragleave, drop 和 dragend。當(dāng)你要fire掉事件的時(shí)候，將需要寫 function (事件處理器) 來處理你需要的，也可能需要給元素綁定事件或做事件指派來簡化你的代碼；
- 拖放事件還讓你可以通過被拖放元素來傳遞數(shù)據(jù)，使用事件屬性"dataTransfer" 的 getData 和 setData 方法。
- 你可以在不同的瀏覽器或程序中進(jìn)行拖放。
簡單代碼示例: 將圖片拖放到另一個(gè)窗口 (
- 新的INPUT類型