HTML5學前熱身 實用技巧及應用詳解

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

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

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

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

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

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

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

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

十五、Autofocus屬性

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

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

十六、Audio支持

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

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

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

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

十七、Video支持

與元素很類似，在新的瀏覽器中也存在Video!事實上，就在最近，YouTube宣告了新的HTML 5視頻嵌入，當然，是為支持此功能瀏覽器。因為HTML5的規范沒有指定特定的視頻編解碼器，它留給了瀏覽器來決定。雖然Safari和InternetExplorer9可以預期支持H.264格式的視頻(其中Flash播放器可以播放)，Firefox和Opera是堅持開源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> 

還有一個值得注意的一些事情：

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

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

3.controls和preload屬性就會在下面提及。

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