1. New Doctype 你還在使用令人討厭的難記的XHTML文檔類型聲明嗎？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
如果還在用，爲什麼呢？如同Douglas Quaid所說，轉到新的HTML5這種文檔類型吧，它會使你看起來更年輕。實際上，你當真知道XHTML的文檔類型聲明在HTML5中不再是必須的嗎？然而現在在用並且舊的瀏覽器也需要這樣一種特殊的聲明。在標準模式下，不能識別這種文檔類型聲明的瀏覽器將簡單地翻譯裏面包含的標籤。所以，不用擔心，去感受將憂慮拋入空氣中的輕鬆吧，去熱情擁抱HTML5的新文檔類型聲明吧。
2.考慮一下下面爲一張圖片所使用的標籤：
<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>
非常不幸的是在包含圖片元素自身的一段標記中沒有任何簡單或者有含義的方法去結合圖片與它的說明文字。 HTML5採用了<figure>標籤修正了這個問題。現在標籤中包含了<figcaption>元素，我們就能夠將圖片和相關說明文字結合在一起。
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3、<small>的重定義
不久以前，我使用<small>元素去建立與logo緊密相關的小標題。它是一個有用的直觀表現元素。然而，現在這種用法顯得不恰當。<small>元素已經被重定義了，更加適合去表現小字體。想象一下你的網頁頁腳的版權聲明，根據新的HTML5對這個元素的定義，<small>標籤更適合做這樣的事情。Small元素現在指的是”small print”。
4、Scripts 和 Links 不再用Types屬性
你可能仍然向你的link和script標籤中添加type屬性。
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
現在不必了。這就意味着這兩個標籤分別指的就是樣式表和腳本。如此，我們能夠一起去掉他們中的type屬性。
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
5、用不用引號
用不用引號成了一個問題，請記住，HTML5不是XHTML。如果你不願意，可以不必用引號把屬性值包裝起來。你不必去閉合你的元素。如果你覺得舒服，這種做法沒有任何錯誤。我覺得我自己贊同這樣做。
<p class=myClass id=someId> Start the reactor.
在這一問題上，仁者見仁智者見智。無論如何，如果你喜歡一種更結構化的文檔，那麼就堅持用引號。
6、使你的內容可以編輯
新的瀏覽器擁有一個可以應用於元素中的漂亮的新屬性，這就是contenteditable。就像名字所表示的，它允許用戶去改變元素中包含的任何文字，包括它的子對象。這個屬性的用途很多，包括簡單的to-do list應用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>
下面是把引號去掉的代碼寫法<ul contenteditable=true>
7、郵件地址的輸入
有這樣一件事情：我們使用一個“email”類型去格式化輸入，就能夠告訴瀏覽器只允許有效郵件地址結構的字符輸入。HTML5能做到嗎？是的，內置的格式驗證器馬上實現了。當然，我們不能百分百的依賴於此，原因很明顯，在還不能解析email類型的舊瀏覽器中，他們將被簡單地當成普通文本框。現在，我們不能依靠瀏覽器進行校驗，仍然要用服務器/客戶端模式解決這個問題。應該指出的是，現在所有的瀏覽器在對於他們是否支持某種元素和屬性的時候都不是十分確定。舉個例子，Opera似乎支持郵件地址驗證，僅僅需要指定name屬性。然而，它不支持我們將在下一條提到的placeholder屬性。
8、佔位符
以前，我們必須使用JavaScript來爲文字框建立佔位符。當然，你可以初始化時給value屬性賦值。但是，一旦用戶刪除佔位的文字，這個輸入框就重新爲空了。placeholder屬性彌補了這個問題。
<input name="email" type="email" placeholder="[email protected]" />
現在不是所有瀏覽器版本都支持這個元素，但是它們一直在通過發行新版來提供支持，像Firefox和Opera現在不支持placeholder屬性，但是這樣用也沒有危害。
9、本地存儲
感謝本地存儲功能（不是HTML5官方發佈的，爲了方便而加入的），我們能夠使瀏覽器“記住”我們的類型，即使瀏覽器被關閉或刷新。
10、帶語義的Header和Footer
以前我們用<div id=”header”></div> ,即使被確定了id，divs也沒有語義。現在，HTML5中我們有了<header>和<footer>這兩個元素。上面的標籤可以被替換成：<header></header>
在項目中有多個header和footer是非常普遍的。要注意不要將這兩個元素與網站的“header”和“footer”混淆了。它們僅代表它們的容器。
11、更多的HTML5格式化特性
通過這個視頻，我們能夠了解更多有用的HTML5格式化特性：Subscribe to our YouTube page to watch all of the video tutorials!
12、IE瀏覽器與HTML5
不幸的是，爲了解析新的HTML5元素，那個可惡的IE瀏覽器還有點麻煩。
爲了確保新的HTMl5元素能夠正確的以塊級元素顯示，現階段必須使用下面的代碼：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
header, footer, article, section, nav, menu, hgroup {
display: block;
}
由於IE不知道這些元素，因此仍然會忽略這些格式，所以需要使用下面的代碼解決這個問題：
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
爲了在開發的時候減少工作量，Remy Sharp建立了一個腳本文件，你可以使用下面的代碼：
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
13. hgroup
想象一下網站的標題，網站名稱後面緊跟着一個副標題，我們分別用一個<h1>和<h2>標籤來標記。在HTML4中還沒有一種簡單的方法去描述兩者之間的語義關係。另外，當使用h2在頁面中顯示其它標題時，在層級方面問題就更多。而使用羣組標題hgroup元素，我們可以將這些標題聚集在一起，而不影響文檔的整個綱要。
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
14、必填屬性
表單新加入一個屬性，就是require必填屬性。根據你的編碼風格，你可以用下面兩種方法中的任何一個來聲明這個屬性：
<input type=”text” name=”someInput” required>
或者用一個更結構化的：
<input type="text" name="someInput" required="required">
使用上面的代碼，並且瀏覽器支持這個屬性的話，如果這個輸入框爲空則不能提交。這兒有個簡單的例子，我們也添加了placeholder這個屬性，因爲這兩個屬性配合起來用時經常的事情。如果輸入框爲空白，並且表單被提交了，這個文字框就高亮顯示。
15、自動獲取焦點屬性
前面已經提到，HTML5新增了很多元素，以前用javas實現的功能現在用元素就可以簡單實現。在這裏，我們可以使用autofocus屬性使輸入字段自動獲得焦點。
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
可以在代碼中僅僅使用autofocus來標明本屬性，也可以使用autofocus=autofocus的形式。
16、聲音支持
我們不再一定要依賴第三方插件才能使用聲音。HTML5現在提供<audio>元素。再也不用擔心那些插件了。現如今，只有最新的瀏覽器才提供對HTML5聲音的支持。所以，在使用的時候採取恰當的兼容措施很有必要。
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<A href="http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/file.mp3">Download this file.</A>
</audio>
對於音頻格式，Mozilla 和 Webkit還沒有什麼進展。Firefox將關注.ogg類型的音頻，而Webkit將僅對普通mp3格式進行擴展。這就意味着，最起碼現在你應該使用兩個版本的音頻格式才能兼顧各種瀏覽器。Safari在加載頁面時無法識別.ogg類型的音頻，會自動跳轉到mp3類型。但是要注意IE不支持這種操作，Opera10或更低版本僅支持.WAV格式的文件。
17、視頻支持
就像<audio>元素，新瀏覽器也已經支持HTML5視頻了。事實上，YouTube剛剛宣佈他們爲支持HTML5的瀏覽器做了新的 HTML5技術的視頻。不幸的是，HTML標準沒有規定特定的視頻編碼，這就需要瀏覽器去決定是哪種格式了。Safari和Internet Explorer 9會支持H.264格式的視頻（Flash播放器也能夠播放），Firefox 和Opera堅持用開源的Theora 和 Vorbis格式。所以，在播放HTML5視頻時，你必須提供這兩種格式的codecs。
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>
Chrome能夠正確播放“ogg”和“mp4”格式編碼的視頻。這兒有幾項需要注意的事情。從技術上即講，沒有要求我們指定type屬性，但是，如果不指定的話，瀏覽器會自己去確定。就節省點帶寬，自己去聲明吧。不是所有的瀏覽器支持HTML5視頻。爲此我們可以提供一個下載鏈接，或者額外嵌入一個 flash版本的視頻，這都無所謂，看你怎麼做了。
18、視頻預加載
Preload屬性就像你猜的那樣。你首先應該決定什麼時候需要瀏覽器預加載視頻。預加載是很有必要的，如果訪問者讀取一個專門爲播放視頻而做的頁面，你肯定會預加載視頻而爲訪問者節省等待時間。通過設定preload=”preload”或者一個簡單的preload就可以使視頻被預加載。我比較喜歡後面的解決方案，因爲它更精簡。
<video preload>
<video preload>
<video preload controls>
19、播放控制
如果你的工作與這些技術密切相關，你可能已經知道了。如果你用上面的代碼，視頻顯示的僅是像一幅圖片一樣，沒有任何控制而言。爲了能夠解析播放控制功能，我們必須在video元素中指定controls屬性。
<video preload controls>
請注意的是每個瀏覽器對自己的播放器解析法都不同。（譯者：提醒我們多測試幾個瀏覽器啊）
20、正則表達式
曾幾何時，你自己草草寫了許多正則表達式來驗證一個特殊的文本框。感謝新的pattern屬性，我們能夠在我們的標記中直接插入一個正則表達式。
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
autofocus
required>
<button type="submit">Go </button>
</form>
如果你熟悉正則表達式，肯定知道這個表達式[A-Za-z]{4,10}僅接受最上層和最下層的字母。這個字符串也必須包含最小四個字符，最多十個。
需要注意的是我們正在開始結合這些新的令人歎爲觀止的屬性。
21、爲屬性檢測支持
如果我們無法去檢測瀏覽器是否能解析這些屬性，那麼這些屬性還好嗎？恩，問得好，但是這兒有幾種方法來解決這個問題。我們來討論兩個。第一種選擇是利用優秀的Modernizr庫。另一個選擇，我們能夠建立和解析這些元素去確定什麼瀏覽器能夠解析。例如，在我們前一個例子中，如果我們想試驗瀏覽器能否實現 pattern屬性，我們可以在頁面中加入一點JavaScript。
alert( 'pattern' in document.createElement('input') ) // boolean;
實際上，這是一種檢測瀏覽器能力的流行方法。jQuery庫就是用了這個把戲。上面的代碼，我們正在建立一個新的input元素，並且檢測pattern屬性是否被識別了。
<script>
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
</script>
時刻記住，上面的代碼依賴於JavaScript。
22、Mark元素
將<mark>考慮爲一個醒目的元素。包含在這個標記中的字符串應該與用戶當前的行爲有關。舉個例子，如果我在某個博客中搜索“Open your Mind”,就可以運用JavaScript將找到的每一處字符包裹起來。
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>
23、什麼時候使用<div>
有些人起初會對什麼時候用divs產生疑問。現在我們可以用headers，articles，sections和footers，那什麼時候用divs呢？當項目中沒有更好的元素可用的時候，就可以用divs了。
例如，如果爲了給內容定位而想用wrapper元素包裹一個代碼塊，用<div>標記更好些。然而，要是想包裹博客文章、或者頁腳的鏈接列表，建議你分別使用 <article>和<nav>元素。
24、關於HTML5的這些討論直到2022年也未必能結束。
很多人忽視這一點成爲一個很大的錯誤。實際上，現在有一大把HTML5特性可以立即用到我們的項目中。簡單、清爽的代碼永遠是一件好事情。在今天的視頻中，我將給你展示很多選擇。Subscribe to our YouTube page to watch all of the video tutorials!
25. What is Not HTML5
我們能夠原諒某些人認爲JavaScript稍微改變一下就成了HTML5，甚至Apple也不謹慎地宣傳這個觀點。對於非開發者，他們不會在乎。因爲這只是對新的web標準的簡單稱呼。然而對於我們來講，就需要明白哪些技術不是HTML5，儘管它們有相同的語義。
SVG：不是HTML5，它是五年前的技術了。
CSS3：不是HTML5. HTML5基於CSS。
Geolocation：不是HTML5.
Client Storage：不是HTML5.
Web Sockets：不是HTML5.
26. The Data Attribute
我們現在正式對所有的HTML元素提供自定義屬性的支持。然而，以前我們使用的方法是：
<h1 id=someId customAttribute=value> Thank you, Tony. </h1>
<h1 id=someId customAttribute=value> Thank you, Tony. </h1>
這樣用的話，驗證器會出現問題。現在，我們在自定義屬性前面加上“data”後就可以正式使用這個方法。
HTML片段
<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>
<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>
檢索自定義屬性的值
var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Val
它還可以用在CSS中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sort of Lame CSS Text Changing</title>
<style>
h1 { position: relative; }
h1:hover { color: transparent; }
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </h1>
</body>
</html>
你可以到JSBIN上去看一下效果。
27、輸出元素
根據名字就能夠猜到，output元素是用來顯示某種計算結果的。例如，如果你想顯示鼠標位置的座標，或者一些數字的和。
舉一個簡單的例子，用JavaScript求兩個數字的和，填充到一個空的output中。（譯者：下面的代碼很簡單，我想連我都能看懂，就不必跟大家解釋了。）
<form action="" method="get">
<p>
10 + 5 = <output name="sum"></output>
</p>
<button type="submit"> Calculate </button>
</form>
<script>
(function() {
var f = document.forms[0];
if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
f['sum'].value = 15;
e.preventDefault();
}, false);
}
else { alert('Your browser is not ready yet.'); }
})();
</script>
<form action="" method="get">
<p>
10 + 5 = <output name="sum"></output>
</p>
<button type="submit"> Calculate </button>
</form>
<script>
(function() {
var f = document.forms[0];
if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
f['sum'].value = 15;
e.preventDefault();
}, false);
}
else { alert('Your browser is not ready yet.'); }
})();
</script>
要注意的是瀏覽器對output元素的支持仍然很弱。寫本文的時候，我也只是用Opera進行了測試。如果瀏覽器不能解析這個元素，上面的代碼就會提示你。否則，提交之後會給名稱爲“sum”的顯示框賦值15。這個元素也能夠接受a作爲一個屬性，顯示與這個顯示框相關的元素名稱，跟label的原理（方式）差不多。
28、建立帶範圍的滑動器輸入框
<input type="range">
很顯然，它能夠接受min、max、step和value這些屬性。儘管好像只有Opera支持這種輸入方式，但是真正用起來的時候一定是蠻奇妙的。
爲了馬上證明一下，我們建立一個標尺來允許用戶決定“Total Recall”是多麼“可怕”。我們不需要建立一個真實的滑動方法就可以非常簡單的實現這種效果。
Step 1: Mark-up
首先建立 Mark-up
<form method="post">
<h1> Total Recall Awesomness Gauge </h1>
<input type="range" name="range" min="0" max="10" step="1" value="">
<output name="result"> </output>
</form>
上面的代碼很簡單，接着往下看吧。
Step 2: CSS
相比第一步，就是在滑動器的前後建立了爲用戶指示最大、最小值。
body {
font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
text-align: center;
}
input { font-size: 14px; font-weight: bold; }
input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}
output {
display: block;
font-size: 5.5em;
font-weight: bold;
}
Step 3: The JavaScript
最後一步：
先確定當前使用的瀏覽器是否能夠解析range input，如果不能的話，將告知用戶這個示例不能展示。
當用戶滑動的時候，能動態的指示數值。
偵聽用戶鼠標離開滑動器（事件），將獲取的值保存到本地。
當用戶下次刷新頁面，滑動器和輸出框將自動顯示上次選擇的值。
(function() {
var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;
// Determine if browser is one of the cool kids that
// recognizes the range input.
var o = document.createElement('input');
o.type = 'range';
if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');
// Set initial values of the input and ouput elements to
// either what's stored locally, or the number 5.
range.value = cachedRangeValue;
result.value = cachedRangeValue;
// When the user makes a selection, update local storage.
range.addEventListener("mouseup", function() {
alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
}, false);
// Display chosen value when sliding.
range.addEventListener("change", function() {
result.value = range.value;
}, false);
})();
