22 個(gè)常見(jiàn)的HTML5技巧和實(shí)際應(yīng)用

前端開(kāi)發(fā)這個(gè)行業(yè)發(fā)展飛速，特別是即將普遍的HTML5，本文將整理HTML5的基本使用。對(duì)于HTML5的新增屬性，

1，新DOCTYPE
還在使用那個(gè)討厭的的標(biāo)準(zhǔn)doctype？試試下面這個(gè)

<！DOCTYPE HTML >

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

3. small重新定義
   不久前，我使用了<small>標(biāo)簽來(lái)創(chuàng)建與logo相關(guān)的副標(biāo)題。但是在HTML5中重新定義了<small>標(biāo)簽，使之更能表現(xiàn)語(yǔ)義化，在<small>的字號(hào)都會(huì)變小，想想如果這個(gè)標(biāo)簽用于網(wǎng)站的底部的版權(quán)信息還是個(gè)不錯(cuò)的做法。

4. 去掉了Javascript和CSS標(biāo)簽的type屬性
   在HTML5中，不再需要type屬性了，因?yàn)檫@顯得有點(diǎn)多余，去掉之后可以讓代碼更為簡(jiǎn)潔。

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

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

6. 使網(wǎng)頁(yè)內(nèi)容可以編輯
   <h7 contenteditable="true">Break mechanical cab <span>driver</span></h7>

7. 電子郵件輸入框
   HMTL5中新增了一個(gè)輸入框的電子郵件屬性，可以檢測(cè)輸入的內(nèi)容是否符合電子郵件的書(shū)寫(xiě)格式，功能越來(lái)越強(qiáng)大了吧，在HTML5之前只能依靠JS來(lái)檢測(cè)。雖然內(nèi)置的表單驗(yàn)證功能很快就會(huì)成為現(xiàn)實(shí)，但這個(gè)屬性很多瀏覽器都還不支持，只會(huì)當(dāng)作普通的文本輸入框來(lái)處理。

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

10. 更有語(yǔ)義的header和footer
    <header>
    ...
    </header>

<footer>
...
</footer>

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

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

14. 自動(dòng)獲取焦點(diǎn)
    同樣的，HTML5也不再需要Javascript來(lái)解決輸入框的自動(dòng)獲取焦點(diǎn)，如果某個(gè)輸入框應(yīng)當(dāng)被選擇或是獲取到輸入焦點(diǎn)，HTML5新增了自動(dòng)獲取焦點(diǎn)屬性autofocus：

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

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

<audio tabindex="0" autoplay="autoplay" controls="controls">
<source src="file.ogg">
<source src="file.mp3">
<a href="file.mp3">Download this file.</a>
</audio>
為什么會(huì)有兩種格式的音頻文件？因?yàn)镕irefox和Webkit瀏覽器所支持的格式存在差異，F(xiàn)irefox只能支持.ogg文件，而Webkit只支 持.mp3的文件，解決的辦法就是創(chuàng)建兩個(gè)版本的音頻文件，這樣就可以兼容Firefox和Webkit的瀏覽器了，需要注意的是IE不支持該標(biāo)簽。

16. 視頻播放的支持
    和<audio>標(biāo)簽一樣，HTML5也提供了<video>標(biāo)簽對(duì)播放視頻文件的支持。YouTube也宣布了一項(xiàng)新的 HTML5的視頻嵌入。不過(guò)有點(diǎn)遺憾，HTML5的規(guī)范并沒(méi)有指定特定的視頻×××，而是讓瀏覽器自己來(lái)決定。這就造成了個(gè)瀏覽器的兼容問(wèn)題，雖然 Safari和IE9都支持還H.264格式的視頻( Flash 播放器可以可以播放)，F(xiàn)irefox和Opera則支持開(kāi)源的Theora和Vorbis格式。因此，當(dāng)顯示HTML5視頻的時(shí)候，也得準(zhǔn)備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. 預(yù)加載視頻
    <video tabindex="0" preload="preload">
    ...
    </video>
18. 顯示控件
    顯示控件屬性可以給視頻添加一個(gè)播放暫停的控件，需要注意的是每個(gè)瀏覽器顯示的效果可能會(huì)有些差異。

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

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

<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. 檢測(cè)瀏覽器對(duì)HTML5屬性的支持
    由于各瀏覽器對(duì)HTML5屬性的支持度不同，這就造成了一些兼容問(wèn)題。但是可以使用方法來(lái)檢測(cè)該瀏覽器是否支持這些屬性，上例中的代碼如果要檢測(cè)pattern屬性是否被瀏覽器識(shí)別，可以使用Javascript代碼來(lái)檢測(cè)。

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

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

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

22. 該如何正確的使用div標(biāo)簽
    有些人可能會(huì)有疑問(wèn)，有了<header>和<footer>等這些標(biāo)簽，<div>標(biāo)簽在HTML5中還有 用嗎？答案是肯定的，比如你想創(chuàng)建一個(gè)能包裹特殊內(nèi)容的容器自由靈活的<div>肯定是首選，而你要?jiǎng)?chuàng)建一篇文章或者一個(gè)導(dǎo)航菜單，建議你使 用更有語(yǔ)義的<article>和<nav>標(biāo)簽。