HTML5學(xué)前熱身 實(shí)用技巧及應(yīng)用詳解

十四、必要的屬性(Required Attribute)

表單允許新的必要屬性，用來(lái)指定是否需要特殊的input。這取決于你的代碼偏好，你可以以下面兩種方式之一申明此屬性。

<inputtypeinputtype="text"name="someInput"required> 

或者，使用更結(jié)構(gòu)化的方法：

<inputtypeinputtype="text"name="someInput"required="required"> 

兩種方法都行。有了這個(gè)代碼，并且瀏覽器支持此屬性，如果“someInput”文本框是空白，則表單不會(huì)被提交。下面是一個(gè)簡(jiǎn)單的例子，我們還將添加占位符屬性，因?yàn)闆]有理由不這樣做。

<formactionformaction=""method="get"> 
<labelforlabelfor="name">姓名:</label> 
<inputidinputid="name"name="name"type="text"placeholder="zhangxinxu"required="required"/> 
<buttontypebuttontype="submit">提交</button></form> 

如果input里面內(nèi)容是空白，則表單提交的時(shí)候，文本框會(huì)高亮顯示。

十五、Autofocus屬性

同樣，HTML 5的解決方案消除了對(duì)JavaScript的需要。如果一個(gè)特定的輸入應(yīng)該是“選擇”，或有重點(diǎn)的，默認(rèn)情況下，我們現(xiàn)在可以利用自動(dòng)獲取焦點(diǎn)屬性。

<inputtypeinputtype="text"name="someInput"placeholder="zhangxinxu"requiredautofocus> 

十六、Audio支持

我們無(wú)需再依賴第三方插件區(qū)渲染音頻。HTML 5提供了元素，我們將不必?fù)?dān)心這些插件。就目前，只有最近期的的瀏覽器提供HTML 5音頻支持。在這個(gè)時(shí)候，它仍然是一個(gè)很好的做法提供一些向后兼容的形式。

<audioautoplayaudioautoplay="autoplay"controls="controls"> 
<sourcesrcsourcesrc="file.ogg"/> 
<sourcesrcsourcesrc="file.mp3"/> 
<ahrefahref="file.mp3">Downloadthisfile.</a> 
</audio> 

Mozilla和WebKit的還沒有完全相處，當(dāng)涉及到音頻格式，F(xiàn)irefox會(huì)希望看到一個(gè).ogg文件，而WebKit的瀏覽器支持.mp3擴(kuò)展。這意味著，至少在現(xiàn)在，你應(yīng)該創(chuàng)建兩個(gè)版本的音頻。

當(dāng)Safari加載頁(yè)面時(shí)，它不會(huì)承認(rèn).ogg格式，會(huì)跳過它并移動(dòng)到的MP3版本，因此。請(qǐng)注意IE，每往常一樣，不支持這些格式，Opera10和以及以下版本只能使用.wav文件。

十七、Video支持

與元素很類似，在新的瀏覽器中也存在Video!事實(shí)上，就在最近，YouTube宣告了新的HTML 5視頻嵌入，當(dāng)然，是為支持此功能瀏覽器。因?yàn)?a class="contentlabel" href="http://2s4d.com/news/listbylabel/label/HTML5">HTML5的規(guī)范沒有指定特定的視頻編解碼器，它留給了瀏覽器來(lái)決定。雖然Safari和InternetExplorer9可以預(yù)期支持H.264格式的視頻(其中Flash播放器可以播放)，F(xiàn)irefox和Opera是堅(jiān)持開源Theora和Vorbis格式。因此，當(dāng)顯示HTML 5的視頻，您必須提供這兩種格式。

<videocontrolspreload> 
<sourcesrcsourcesrc="cohagenPhoneCall.ogv"type="video/ogg;codecs='vorbis,theora'"/> 
<sourcesrcsourcesrc="cohagenPhoneCall.mp4"type="video/mp4;'codecs='avc1.42E01E,mp4a.40.2'"/> 
<p>Yourbrowserisold.<ahrefahref="cohagenPhoneCall.mp4">Downloadthisvideoinstead.</a></p> 
</video> 

還有一個(gè)值得注意的一些事情：

1.我們技術(shù)上不需要來(lái)設(shè)置type屬性，但是，如果我們不這樣做，瀏覽器不得不自己去尋找類型。

2.不是所有的瀏覽器理解HTML5視頻。在資源元素的下面，我們可以提供一個(gè)下載鏈接，或嵌入視頻的Flash版本代替。

3.controls和preload屬性就會(huì)在下面提及。

4.有方法可以讓所有的瀏覽器支持video標(biāo)簽。