22 個常見的HTML5技巧和實際應用

前端開發這個行業發展飛速，特別是即將普遍的HTML5，本文將整理HTML5的基本使用。對于HTML5的新增屬性，

1，新DOCTYPE
還在使用那個討厭的的標準doctype？試試下面這個

<！DOCTYPE HTML >

2. <figure>標簽（圖元素）
   <figure>
   <img src="path/to/image" alt="About image">
   <figcaption>
   <h7>This is an image of something interesting. </h7>
   </figcaption>
   </figure>

3. small重新定義
   不久前，我使用了<small>標簽來創建與logo相關的副標題。但是在HTML5中重新定義了<small>標簽，使之更能表現語義化，在<small>的字號都會變小，想想如果這個標簽用于網站的底部的版權信息還是個不錯的做法。

4. 去掉了Javascript和CSS標簽的type屬性
   在HTML5中，不再需要type屬性了，因為這顯得有點多余，去掉之后可以讓代碼更為簡潔。

<link href="path/to/stylesheet.css">
<script src="path/to/script.js"></script>

5. 是否使用雙引號
   <h7 id="someId"> Start the reactor.? </h7>

6. 使網頁內容可以編輯
   <h7 contenteditable="true">Break mechanical cab <span>driver</span></h7>

7. 電子郵件輸入框
   HMTL5中新增了一個輸入框的電子郵件屬性，可以檢測輸入的內容是否符合電子郵件的書寫格式，功能越來越強大了吧，在HTML5之前只能依靠JS來檢測。雖然內置的表單驗證功能很快就會成為現實，但這個屬性很多瀏覽器都還不支持，只會當作普通的文本輸入框來處理。

<form method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email">
<button> Submit Form </button>
</form>

8. 占位符
   <input name="email" placeholder="doug@givethesepeopleair.com" type="email">

9. 本地存儲
   HTML5的本地存儲功能，可以讓現代瀏覽器“記住”我們輸入的，就算瀏覽器關閉和刷新也不會受影響。雖然這個功能有些瀏覽器不支持，但是IE8, Safari 4, 還有 Firefox 3.5還是支持這個功能的，你可以測試下。自己是一個五年的全棧工程師，這里推薦一下我的前端學習交流君羊：前面是四八四，中間七五七，最后七六零，群里會不定期更新最新的教程和學習方法，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的web前端黨歡迎加入，
   
   ?

10. 更有語義的header和footer
    <header>
    ...
    </header>

<footer>
...
</footer>

12. 標題群( hgroup)
    <header>
    <hgroup>
    <h2> Recall Fan Page </h2>
    <h3> Only for people who want the memory of a lifetime. </h3>
    </hgroup>
    </header>
13. 必填項屬性
    前端人員肯定做過不少表單驗證的項目，其中很重要的一點就是有些輸入框的內容是必須填寫的，這里就需要使用Javascript來檢查。在HTML5中，新增了一個“必須填寫”的屬性：required。

<input type="text" name="someInput" required>
<input type="text" name="someInput" required="required">

14. 自動獲取焦點
    同樣的，HTML5也不再需要Javascript來解決輸入框的自動獲取焦點，如果某個輸入框應當被選擇或是獲取到輸入焦點，HTML5新增了自動獲取焦點屬性autofocus：

<input name="someInput" placeholder="Douglas Quaid" required="required" autofocus="autofocus" type="text">

15. 音頻播放的支持
    HTML5中提供了<audio>標簽，解決了以往必須依靠第三方插件才能播放音頻文件的問題。目前為止，還只有少數的最新瀏覽器支持該標簽。

<audio tabindex="0" autoplay="autoplay" controls="controls">
<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 tabindex="0" 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 ×××tead.</a> </div>
</video>

17. 預加載視頻
    <video tabindex="0" preload="preload">
    ...
    </video>
18. 顯示控件
    顯示控件屬性可以給視頻添加一個播放暫停的控件，需要注意的是每個瀏覽器顯示的效果可能會有些差異。

<video tabindex="0" preload="preload" controls="controls">
...
</video>

19. 使用正則表達式
    在HTML5中，我們可以直接使用正則表達式。

<form action="" method="post">
<label for="username">Create a Username: </label>
<input name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus="autofocus" required="required" type="text">
<button type="submit">Go </button>
</form>

20. 檢測瀏覽器對HTML5屬性的支持
    由于各瀏覽器對HTML5屬性的支持度不同，這就造成了一些兼容問題。但是可以使用方法來檢測該瀏覽器是否支持這些屬性，上例中的代碼如果要檢測pattern屬性是否被瀏覽器識別，可以使用Javascript代碼來檢測。

alert( 'pattern' in document.createElement('input') ) // boolean;

21. Mark標簽
    <mark>標簽用于高亮顯示那些需要在視覺上向用戶突出其重要性的文字，包裹在此標簽里的字符串必須與用戶當前的行為相關。例如，如 果我在一些博客中搜索“Open your Mind” ，我可以使用在<mark>標簽里使用JavaScript?來包裹每一次動作。

<h4> Search Results </h4>
<h7> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </h7>

22. 該如何正確的使用div標簽
    有些人可能會有疑問，有了<header>和<footer>等這些標簽，<div>標簽在HTML5中還有 用嗎？答案是肯定的，比如你想創建一個能包裹特殊內容的容器自由靈活的<div>肯定是首選，而你要創建一篇文章或者一個導航菜單，建議你使 用更有語義的<article>和<nav>標簽。