Web技術的發展速度太快了，如果你不與時俱進，就會被淘汰。因此，為了應對即將到來的HTML5，本文總結了22個HTML5的初級技巧，希望能對你進一步學習好HTML5會有所協助。
1. 新的Doctype聲明
XHTML的聲明太長了，我相信很少會有前端開發人員能手寫出這個Doctype聲明。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5的Doctype聲明很短，看到這個聲明相信你馬上就能記住，不用浪費腦細胞去記那長的有點變態的XHTML的Doctype聲明了。
<!DOCTYPE html>
HTML5的簡短的DOCTYPE聲明是讓Firefox、Chrome等現代瀏覽器和IE6/7/8等瀏覽器都進入(准)標準模式，你可能會奇怪IE6/7居然也可以支援HTML5 Doctype，事實上，IE是只要doctype符合 這種格式，都會進入標準模式。
2. <figure>標籤
看看下面一段簡單的代碼：
<IMG alt="About image" src="path/to/image"> <H6>Image of Mars.</H6>
遺憾的是，這裡的h6標籤和img標籤好像沒有什麼關係，語義不夠明確。HTML5意識到了這一點，於是就採用了<figure>標籤。當<figure>結合<figcaption>標籤的使用，可以讓h6標籤和img標籤組合起來，代碼就更具語義化了。
<FIGURE> <IMG alt="About image" src="path/to/image"> <FIGCAPTION><H6>This is an image of something interesting. </H6></FIGCAPTION></FIGURE>
3. 重新定義<small>
不久前，我使用了<small>標籤來建立與logo相關的副標題。但是在HTML5中重新定義了<small>標籤，使之更能表現語義化，在<small>的字型大小都會變小，想想如果這個標籤用於網站的底部的著作權資訊還是個不錯的做法。
4. 去掉了Javascript和CSS標籤的type屬性
通常你會在<link>和<script>加上type屬性：
<LINK rel=stylesheet type=text/css href="path/to/stylesheet.css"> <SCRIPT type=text/javascript src="path/to/script.js"></SCRIPT>
在HTML5中，不再需要type屬性了，因為這顯得有點多餘，去掉之後可以讓代碼更為簡潔。
<LINK href="path/to/stylesheet.css"> <SCRIPT src="path/to/script.js"></SCRIPT>
5. 是否使用雙引號
這有點讓人糾結，HTML5並不是XTHML，你可以省去標籤中的雙引號。相信大多數同志也包括我都習慣了加上雙引號，因為這讓代碼看起來會更標準。不過，這可以根據你的個人喜好來確定是到底要不要雙引號。
<H6 id=someId class=myClass> Start the reactor.
6. 使網頁內容可以編輯
7. 電子郵件輸入框
HMTL5中新增了一個輸入框的電子郵件屬性，可以檢測輸入的內容是否符合電子郵件的書寫格式，功能越來越強大了吧，在HTML5之前只能依靠JS來檢測。雖然內建的表單驗證功能很快就會成為現實，但這個屬性很多瀏覽器都還不支援，只會當作普通的文本輸入框來處理。
<FORM method=get> <LABEL for=email>Email:</LABEL><INPUT id=email type=email name=email> <BUTTON type=submit> Submit Form </BUTTON></FORM>
到目前為止，包括現代瀏覽器在內都不支援該屬性，所以這個屬性暫時還是靠不住的。
8. 預留位置
文字框中的預留位置(看看本博的搜尋方塊效果)有利於提升使用者體驗，之前，我們只能依靠JS來實現預留位置的效果，在HTML5中新增了預留位置屬性placeholder。
<INPUT type=email name=email placeholder="doug@givethesepeopleair.com">
同樣，目前的主流現代瀏覽器對該屬性的支援不大好，暫時只有Chrome和Safari支援該屬性，Firefox和Opera不支援該屬性。
9. 本機存放區
HTML5的本機存放區功能，可以讓現代瀏覽器“記住”我們輸入的，就算瀏覽器關閉和重新整理也不會受影響。雖然這個功能有些瀏覽器不支援，但是IE8, Safari 4, 還有 Firefox 3.5還是支援這個功能的，你可以測試下。
10. 更有語義的header和footer
下面的代碼在HTML5中將不複存在
<DIV id=header> ...</DIV><DIV id=footer> ...</DIV>
通常我們都會給header和footer定義一個div，然後再添加一個id，但是在HTML5中可以直接使用<header>和<footer>標籤，所以可以將上面的代碼改寫成：
<HEADER> ...</HEADER><FOOTER> ...</FOOTER>
要注意不要將這兩個標籤和網站的頭部和頁尾混淆起來，它們只是代表它們的容器。
11. IE對HTML5的支援
IE瀏覽器目前對HTML5的支援並不好，也是阻礙HTML5的更快普及的一大絆腳石，不過，IE9對HTML5的支援度還是很不錯的。
IE把HTML5新增的標籤都解析成內嵌元素，而實際上它們是區塊層級元素，所以有必要為它們定義一個樣式：
header, footer, article, section, nav, menu, hgroup { display: block;}
儘管如此，IE還是不能解析這些新增的HTML5標籤，這個時候就需要藉助Javascript來解決這個問題：
document.createElement("article");document.createElement("footer");document.createElement("header");document.createElement("hgroup");document.createElement("nav");document.createElement("menu");
你可以藉助這一段Javascript代碼來修複IE更好的解析HTML5
<SCRIPT mce_src="http://html5shim.googlecode.com/svn/trunk/html5.js"></SCRIPT>
12. 標題群( hgroup)
這個類似於第二點技巧。如果用h1和h2標籤分別表示網站的名稱和副標題，但這會讓兩個本義上密切相關的標題並沒有關聯起來。這個時候可以使用<hgroup>標籤將它們組合起來，這樣代碼會更有語義。
<HEADER><HGROUP><H1> Recall Fan Page </H1><H2> Only for people who want the memory of a lifetime. </H2></HGROUP></HEADER>
13. 必填項屬性
前端人員肯定做過不少表單驗證的項目，其中很重要的一點就是有些輸入框的內容是必須填寫的，這裡就需要使用Javascript來檢查。在HTML5中，新增了一個“必須填寫”的屬性：required。required屬性有兩種使用方法，第二種方法顯得更有結構性，而第一種更簡潔。
<input type="text" name="someInput" required><input type="text" name="someInput" required="required">
有了這個屬性，使表單的提交驗證變得更簡單了，看看下面簡單的例子：
<FORM method=post> <LABEL for=someInput> Your Name: </LABEL><INPUT id=someInput type=text name=someInput placeholder="Douglas Quaid" required="required"> <BUTTON type=submit>Go</BUTTON></FORM>
如果輸入框為空白，表單將無法提交成功。
14. 自動擷取焦點
同樣的，HTML5也不再需要Javascript來解決輸入框的自動擷取焦點，如果某個輸入框應當被選擇或是擷取到輸入焦點，HTML5新增了自動擷取焦點屬性autofocus：
<INPUT type=text name=someInput placeholder="Douglas Quaid" required="required" autofocus="autofocus">
autofocus也同樣可以寫成”autofocus=autofocus”，這樣看起來標準些，這個根據自己的個人喜好而定。
15. 音頻播放的支援
HTML5中提供了<audio>標籤，解決了以往必須依靠第三方外掛程式才能播放音頻檔案的問題。目前為止，還只有少數的最新瀏覽器支援該標籤。
<AUDIO controls="controls" autoplay="autoplay"> <SOURCE src="file.ogg" /> <SOURCE src="file.mp3" /> <A href="file.mp3">Download this file.</A></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種格式。
<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'" /> <DIV> Your browser is old. <A href="cohagenPhoneCall.mp4">Download this video instead.</A> </DIV></VIDEO>
需要注意的是，type屬性雖然可以省略掉，但是如果加上的話，瀏覽器就可以更快的準確的解析該視頻檔案。並不是所有的瀏覽器都支援HTML5的視頻，所以得做好使用Flash版本來代替，當然，這個決定權在於你。
17. 預先載入視頻
預先載入屬性：preload，首先要確定是否需要積極式載入視頻，假如，訪客在訪問一個有很多視頻展示的頁面，那麼就有必要積極式載入一段視頻，這樣可以節省訪客的等待時間，提高使用者體驗。你可以給<video>標籤添加一個preload屬性來實現積極式載入的功能。
<VIDEO preload="preload"> ...</VIDEO>
18. 顯示控制項
顯示控制項屬性可以給視頻添加一個播放暫停控制項，需要注意的是每個瀏覽器顯示的效果可能會有些差異。
<VIDEO controls="controls" preload="preload">...</VIDEO>
19. 使用Regex
在HTML5中，我們可以直接使用Regex。
<FORM method=post action=""> <LABEL for=username>Create a Username: </LABEL> <INPUT id=username type=text name=username placeholder="4 <> 10" required="required" autofocus="autofocus" pattern="[A-Za-z]{4,10}"> <BUTTON type=submit>Go </BUTTON></FORM>
20. 檢測瀏覽器對HTML5屬性的支援
由於各瀏覽器對HTML5屬性的支援度不同，這就造成了一些相容問題。但是可以使用方法來檢測該瀏覽器是否支援這些屬性，上例中的代碼如果要檢測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>
21. Mark標籤
<mark>標籤用於高亮顯示那些需要在視覺上向使用者突出其重要性的文字，包裹在此標籤裡的字串必須與使用者當前的行為相關。例如，如果我在一些部落格中搜尋“Open your Mind” ，我可以使用在<mark>標籤裡使用JavaScript 來包裹每一次動作。
<H3> Search Results </H3><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提供一些協助。
英文原文
翻譯整理：雨夜帶刀’s Blog
本文連結：http://stylechen.com/22-html5-tips.html
如需轉載請以連結形式註明原載或原文地址。
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
