22個(gè)html 5 第二講：上面一章講到了HTML5的幾個(gè)技巧，現(xiàn)在我們來(lái)學(xué)習(xí)新的技巧。

8. 占位符

此前，我們需要使用JavaScript來(lái)創(chuàng)建文本框的占位符。你可以初步設(shè)定值屬性來(lái)看是否合適，但是只要用戶(hù)刪除了該文本，輸入的內(nèi)容就會(huì)再次變成空的。占位符屬性有效地彌補(bǔ)了這一點(diǎn)。

<input name=”email” type=”email” placeholder=”xingyuyu27@163.com” />   

9. 本地存儲(chǔ)

多虧了HTML5的 local storage ，我們可以讓高級(jí)瀏覽器"記住"我們輸入的內(nèi)容，就算后來(lái)瀏覽器關(guān)閉或者重新刷新也不受影響。盡管不是所有的瀏覽器都支持，但是最關(guān)鍵的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。

10. 語(yǔ)義性的Header和Footer 

<div id=”header”>   
…   
</div>   
<div id=”footer”>   
…   
</div>   

上面的代碼一去不復(fù)返。Divs從根本上來(lái)說(shuō)并沒(méi)有任何語(yǔ)義結(jié)構(gòu)，即使應(yīng)用上了ID還是如此。而在HTML5中，我們可以使用<header>和<footer>元素，上面的代碼就可以替換為： 

<header>   
…   
</header>   
<footer>   
…   
</footer>   

不過(guò)注意不要將這兩個(gè)元素與網(wǎng)站的頭部和腳部混淆起來(lái)。它們只是代表它們的容器。

11. IE和HTML5

IE理解新的HTML5元素需要費(fèi)一定的神，為了確保新的HTML5元素能夠以塊級(jí)元素正確顯示，有必要將它們用下面的代碼定義風(fēng)格：

header, footer, article, section, nav, menu, hgroup {     
display: block;     
}   

就算如此，IE還是不知道這些元素究竟是什么，因而會(huì)無(wú)視這些格式，還需要用到下面的代碼來(lái)解決這個(gè)問(wèn)題：

document.createElement(“article”);   
document.createElement(“footer”);   
document.createElement(“header”);   
document.createElement(“hgroup”);   
document.createElement(“nav”);   
document.createElement(“menu”);   

12. 群組標(biāo)題（hgroup）

假設(shè)一個(gè)網(wǎng)站有名稱(chēng)、副標(biāo)題分別用<h1>、<h2>標(biāo)簽來(lái)標(biāo)記，在HTML4中還沒(méi)有一種能夠?qū)烧咧g的關(guān)系用很好的語(yǔ)義關(guān)系來(lái)描述的方法，此外，當(dāng)使用h2在頁(yè)面中顯示其它標(biāo)題時(shí)，在層級(jí)方面問(wèn)題就更多。而使用群組標(biāo)題hgroup元素，我們可以將這些標(biāo)題聚集在一起，而不影響文檔的整個(gè)綱要。

<header>   
<hgroup>   
<h1> Recall Fan Page </h1>   
<h2> Only for people who want the memory of a lifetime. </h2>   
</hgroup>   
</header>   

13.必要（Required）屬性

表單允許新的必要屬性，規(guī)定是否某個(gè)特定的輸入是必要的。你可以依據(jù)自己寫(xiě)代碼的偏好，用下面兩種不同方式來(lái)聲明這個(gè)屬性：

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

或者，更嚴(yán)謹(jǐn)：

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

上面兩行代碼都行得通。用了這行代碼之后，并且瀏覽器支持required屬性的話(huà)， 輸入空白的表單就不會(huì)被提交。下面是一個(gè)簡(jiǎn)單的例子，同時(shí)我們也添加了占位符屬性：

<Form method=”post” action=”">   
<label for=”someInput”> Your Name: </label>   
<input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required>   
<button type=”submit”>Go</button>   
</form>   

如果輸入是空的，表單將無(wú)法提交，突出顯示文本框。
14. 自動(dòng)對(duì)焦（Autofocus）屬性

同樣地，有了HTML5就不再需要用JavaScript方案來(lái)解決自動(dòng)對(duì)焦的問(wèn)題。如果某個(gè)輸入應(yīng)該被"選擇"或被聚焦，我們現(xiàn)在可以使用HTML的自動(dòng)對(duì)焦autofocus屬性。

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

15. 音頻支持

我們?cè)僖膊恍枰揽康谌讲寮?lái)提供音頻了。HTML5提供了音頻元素<audio>。目前，只有***的瀏覽器支持HTML5音頻。 此時(shí)，***還是提供一些向后兼容性。

<audio autoplay=”autoplay” controls=”controls”>   
<source src=http://www.css3-html5.com/HTML5-Tutorial/”file.ogg” />   
<source src=http://www.css3-html5.com/HTML5-Tutorial/”file.mp3″ />   
<a href=http://www.css3-html5.com/HTML5-Tutorial/”file.mp3″>Download this file.</a>   
</audio>   

說(shuō)道音頻格式，Mozilla和Webkit都還沒(méi)有完全支持。Firefox希望看到一個(gè) .ogg文件，Webkit瀏覽器只支持最常見(jiàn)的.mp3擴(kuò)展名。這意味著說(shuō)，至少目前為止，你應(yīng)該創(chuàng)建兩個(gè)版本的音頻。當(dāng)Safari加載頁(yè)面時(shí)，它認(rèn)不出.ogg格式的文件，將會(huì)跳過(guò)并移到mp3版本上。請(qǐng)注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。