Web技術的發展速度太快了，如果你不與時俱進，就會被淘汰。因此，為了應對即將到來的HTML5，本文總結了22個Html5的初級技巧，希望能對你進一步學習好Html5會有所幫助。
1. 新的Doctype聲明
XHtml的聲明太長了，我相信很少會有前端開發人員能手寫出這個Doctype聲明。
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN"
2">
Html5的Doctype聲明很短，看到這個聲明相信你馬上就能記住，不用浪費腦細胞去記那長的有點變態的XHtml的Doctype聲明了。
1<!DOCTYPE Html>
Html5的簡短的DOCTYPE聲明是讓Firefox、Chrome等現代浏覽器和IE6/7/8等浏覽器都進入(准)標准模式，你可能會奇怪 IE6/7居然也可以支持Html5 Doctype，事實上，IE是只要doctype符合 這種格式，都會進入標准模式。
2. <figure>標簽
看看下面一段簡單的代碼：
1<img src="path/to/image" alt="About image">
2<h6>Image of Mars.</h6>
遺憾的是，這裡的h6標簽和img標簽好像沒有什麼關系，語義不夠明確。Html5意識到了這一點，於是就采用了<figure>標簽。當<figure>結合<figcaption>標簽的使用，可以讓h6標簽和img標簽組合起來，代碼就更具語義化了。
1<figure>
2
3<figcaption>
4<h6>This is an image of something interesting. </h6>
5</figcaption>
6</figure>
3. 重新定義<small>
不久前，我使用了<small>標簽來創建與logo相關的副標題。但是在Html5中重新定義了<small>標簽，使之更能表現語義化，在<small>的字號都會變小，想想如果這個標簽用於網站的底部的版權信息還是個不錯的做法。
4. 去掉了Javascript和CSS標簽的type屬性
通常你會在<link>和<script>加上type屬性：
1<link rel="stylesheet" href="path/to/stylesheet.css" type="text/CSS">
2 <script type="text/Javascript" src="path/to/script.JS"></script>
在Html5中，不再需要type屬性了，因為這顯得有點多余，去掉之後可以讓代碼更為簡潔。
1<link href="path/to/stylesheet.CSS">
2 <script src="path/to/script.JS"></script>
5. 是否使用雙引號
這有點讓人糾結，Html5並不是XTHML，你可以省去標簽中的雙引號。相信大多數同志也包括我都習慣了加上雙引號，因為這讓代碼看起來會更標准。不過，這可以根據你的個人喜好來確定是到底要不要雙引號。
1<h6 class="myClass" id="someId"> Start the reactor.
6. 使網頁內容可以編輯
這是Html5新增的一個功能，在標簽中加上一個contenteditable屬性，並且設置值為true，就可以直接在頁面上編輯這個標簽的內容，包括這個標簽的子級標簽的內容。有了這個屬性，你可以利用這個屬性完成很多事，比如在網頁中編輯一個待辦事項的清單。
1<h6 contenteditable="true">Break mechanical cab <span>driver</span></h6>
7. 電子郵件輸入框
HMTL5中新增了一個輸入框的電子郵件屬性，可以檢測輸入的內容是否符合電子郵件的書寫格式，功能越來越強大了吧，在Html5之前只能依靠JS來檢測。雖然內置的表單驗證功能很快就會成為現實，但這個屬性很多浏覽器都還不支持，只會當作普通的文本輸入框來處理。
1<form method="get">
2
3<input id="email" name="email" type="email">
4
5</form>
到目前為止，包括現代浏覽器在內都不支持該屬性，所以這個屬性暫時還是靠不住的。
8. 占位符
文本框中的占位符(看看本博的搜索框效果)有利於提升用戶體驗，之前，我們只能依靠JS來實現占位符的效果，在Html5中新增了占位符屬性placeholder。
1<input name="email" placeholder="doug@givethesepeopleair.com" type="email">
同樣，目前的主流現代浏覽器對該屬性的支持不大好，暫時只有Chrome和Safari支持該屬性，Firefox和Opera不支持該屬性。
9. 本地存儲
Html5的本地存儲功能，可以讓現代浏覽器“記住”我們輸入的，就算浏覽器關閉和刷新也不會受影響。雖然這個功能有些浏覽器不支持，但是IE8, Safari 4, 還有 Firefox 3.5還是支持這個功能的，你可以測試下。
10. 更有語義的header和footer
下面的代碼在Html5中將不復存在
1<div id="header">
2
3</div>
4<div id="footer">
5
6</div>
通常我們都會給header和footer定義一個div，然後再添加一個id，但是在Html5中可以直接使用<header>和<footer>標簽，所以可以將上面的代碼改寫成：
1<header>
2
3</header>
4<footer>
5
6</footer>
要注意不要將這兩個標簽和網站的頭部和頁腳混淆起來，它們只是代表它們的容器。
11. IE對Html5的支持
IE浏覽器目前對HTML5的支持並不好，也是阻礙Html5的更快普及的一大絆腳石，不過，IE9對Html5的支持度還是很不錯的。
IE把Html5新增的標簽都解析成內聯元素，而實際上它們是塊級元素，所以有必要為它們定義一個樣式：
1header, footer, article, section, nav, menu, hgroup {
2
3}
盡管如此，IE還是不能解析這些新增的Html5標簽，這個時候就需要借助Javascript來解決這個問題：
1document.create_rElement_x("article");
2document.create_rElement_x("footer");
3document.create_rElement_x("header");
4document.create_rElement_x("hgroup");
5document.create_rElement_x("nav");
6document.create_rElement_x("menu");
你可以借助這一段Javascript代碼來修復IE更好的解析Html5
1<!-->
2 <script mce_src="></script>
3 <![endif]-->
12. 標題群( hgroup)
這個類似於第二點技巧。如果用h1和h2標簽分別表示網站的名稱和副標題，但這會讓兩個本義上密切相關的標題並沒有關聯起來。這個時候可以使用<hgroup>標簽將它們組合起來，這樣代碼會更有語義。
1<header>
2<hgroup>
3<h1> Recall Fan Page </h1>
4<h2> Only for people who want the memory of a lifetime. </h2>
5</hgroup>
6</header>
13. 必填項屬性
前端人員肯定做過不少表單驗證的項目，其中很重要的一點就是有些輸入框的內容是必須填寫的，這裡就需要使用Javascript來檢查。在 Html5中，新增了一個“必須填寫”的屬性：required。required屬性有兩種使用方法，第二種方法顯得更有結構性，而第一種更簡潔。
1<input type="text" name="someInput" required>
1<input type="text" name="someInput" required="required">
有了這個屬性，使表單的提交驗證變得更簡單了，看看下面簡單的例子：
1<form method="post">
2
3<input id="someInput" name="someInput" placeholder="Douglas Quaid" required="required" type="text">
4
5</form>
如果輸入框為空，表單將無法提交成功。
14. 自動獲取焦點
同樣的，Html5也不再需要Javascript來解決輸入框的自動獲取焦點，如果某個輸入框應當被選擇或是獲取到輸入焦點，Html5新增了自動獲取焦點屬性autofocus：
1<input name="someInput" placeholder="Douglas Quaid" required="required" type="text">
autofocus也同樣可以寫成”autofocus=autofocus”，這樣看起來標准些，這個根據自己的個人喜好而定。
15. 音頻播放的支持
Html5中提供了<audio>標簽，解決了以往必須依靠第三方插件才能播放音頻文件的問題。目前為止，還只有少數的最新浏覽器支持該標簽。
1<audio tabindex="0" controls="controls">
2
3
4
5</audio>
為什麼會有兩種格式的音頻文件？因為Firefox和Webkit浏覽器所支持的格式存在差異，Firefox只能支持.ogg文件，而 Webkit只支持.mp3的文件，解決的辦法就是創建兩個版本的音頻文件，這樣就可以兼容Firefox和Webkit的浏覽器了，需要注意的是IE不支持該標簽。
16. 視頻播放的支持
和<audio>標簽一樣，HTML5也提供了<video>標簽對播放視頻文件的支持。YouTube也宣布了一項新的 HTML5的視頻嵌入。不過有點遺憾，Html5的規范並沒有指定特定的視頻解碼器，而是讓浏覽器自己來決定。這就造成了個浏覽器的兼容問題，雖然 Safari和IE9都支持還H.264格式的視頻( Flash 播放器可以可以播放)，Firefox和Opera則支持開源的Theora和Vorbis格式。因此，當顯示Html5視頻的時候，也得准備2種格式。
1<video tabindex="0" controls="controls" preload="">
2
3
4<div> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </div>
5
6</video>
需要注意的是，type屬性雖然可以省略掉，但是如果加上的話，浏覽器就可以更快的准確的解析該視頻文件。並不是所有的浏覽器都支持Html5的視頻，所以得做好使用Flash版本來代替，當然，這個決定權在於你。
17. 預加載視頻
預加載屬性：preload，首先要確定是否需要預先加載視頻，假如，訪客在訪問一個有很多視頻展示的頁面，那麼就有必要預先加載一段視頻，這樣可以節省訪客的等待時間，提高用戶體驗。你可以給<video>標簽添加一個preload屬性來實現預先加載的功能。
1<video tabindex="0" preload="preload">
2 ...
3</video>
18. 顯示控件 顯示控件屬性可以給視頻添加一個播放暫停的控件，需要注意的是每個浏覽器顯示的效果可能會有些差異。
1<video tabindex="0" preload="preload" controls="controls">
2...
3</video>
19. 使用正則表達式
在Html5中，我們可以直接使用正則表達式。
1<form action="" method="post">
2
3<input name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" required="required" type="text">
4
5</form>
20. 檢測浏覽器對Html5屬性的支持
由於各浏覽器對Html5屬性的支持度不同，這就造成了一些兼容問題。但是可以使用方法來檢測該浏覽器是否支持這些屬性，上例中的代碼如果要檢測pattern屬性是否被浏覽器識別，可以使用Javascript代碼來檢測。
1alert( 'pattern' in document.create_rElement_x('input') ) // boolean;
其實這是確定浏覽器兼容常用的方法，jQuery庫就經常使用這種方法。上面的代碼中創建了一個input標簽，並檢測pattern屬性是否被浏覽器支持，如果能支持的話，浏覽器就支持這個功能，否則就不支持。
1<script>
2 if (!'pattern' in document.create_rElement_x('input') ) {
3
4 }
5</script>
21. Mark標簽
<mark>標簽用於高亮顯示那些需要在視覺上向用戶突出其重要性的文字，包裹在此標簽裡的字符串必須與用戶當前的行為相關。例如，如果我在一些博客中搜索“Open your Mind” ，我可以使用在<mark>標簽裡使用JavaScript 來包裹每一次動作。
1<h3> Search Results </h3>
2<h6> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </h6>
22. 該如何正確的使用div標簽
有些人可能會有疑問，有了<header>和<footer>等這些標簽，<div>標簽在Html5中還有用嗎？答案是肯定的，比如你想創建一個能包裹特殊內容的容器自由靈活的<div>肯定是首選，而你要創建一篇文章或者一個導航菜單，建議你使用更有語義的<article>和<nav>標簽。
很多人認為HTML5可能還是很遙遠的事，所以直接無視，其實不然，現在很多網站都已經開始使用HTML5了，事實上，HTML5的一些新增屬性和功能是讓代碼變得更簡潔，這總歸是一件好事，應該值得我們推崇。最後感謝你閱讀了這篇Html5的入門級文章，希望能為你進一步學習Html5提供一些幫助。