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

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

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

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

或者，使用更結構化的方法：

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

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

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

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

十五、Autofocus屬性

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

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

十六、Audio支持

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

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

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

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

十七、Video支持

與元素很類(lèi)似，在新的瀏覽器中也存在Video!事實(shí)上，就在最近，YouTube宣告了新的HTML 5視頻嵌入，當然，是為支持此功能瀏覽器。因為HTML5的規范沒(méi)有指定特定的視頻編解碼器，它留給了瀏覽器來(lái)決定。雖然Safari和InternetExplorer9可以預期支持H.264格式的視頻(其中Flash播放器可以播放)，Firefox和Opera是堅持開(kāi)源Theora和Vorbis格式。因此，當顯示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)設置type屬性，但是，如果我們不這樣做，瀏覽器不得不自己去尋找類(lèi)型。

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

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

4.有方法可以讓所有的瀏覽器支持video標簽。