Posted on 2012-04-15 16:37
zljpp 閱讀(127)
評論(0) 編輯 收藏
22個HTML5 技巧二：上面一章講到了HTML5的幾個技巧，現在我們來學習新的技巧。
8. 占位符
此前，我們需要使用JavaScript來創建文本框的占位符。你可以初步設定值屬性來看是否合適，但是只要用戶刪除了該文本，輸入的內容就會再次變成空的。占位符屬性有效地彌補了這一點。
- <input name=”email” type=”email” placeholder=”xingyuyu27@163.com” />
9. 本地存儲
多虧了HTML5的 local storage ，我們可以讓高級瀏覽器"記住"我們輸入的內容，就算后來瀏覽器關閉或者重新刷新也不受影響。盡管不是所有的瀏覽器都支持，但是最關鍵的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。
10. 語義性的Header和Footer
- <div id=”header”>
- …
- </div>
- <div id=”footer”>
- …
- </div>
-
上面的代碼一去不復返。Divs從根本上來說并沒有任何語義結構，即使應用上了ID還是如此。而在HTML5中，我們可以使用<header>和<footer>元素，上面的代碼就可以替換為：
- <header>
- …
- </header>
- <footer>
- …
- </footer>
-
不過注意不要將這兩個元素與網站的頭部和腳部混淆起來。它們只是代表它們的容器。
11. IE和HTML5
IE理解新的HTML5元素需要費一定的神，為了確保新的HTML5元素能夠以塊級元素正確顯示，有必要將它們用下面的代碼定義風格：
- header, footer, article, section, nav, menu, hgroup {
-
- display: block;
-
- }
就算如此，IE還是不知道這些元素究竟是什么，因而會無視這些格式，還需要用到下面的代碼來解決這個問題：
- document.createElement(“article”);
- document.createElement(“footer”);
- document.createElement(“header”);
- document.createElement(“hgroup”);
- document.createElement(“nav”);
- document.createElement(“menu”);
12. 群組標題（hgroup）
假設一個網站有名稱、副標題分別用<h1>、<h2>標簽來標記，在HTML4中還沒有一種能夠將兩者之間的關系用很好的語義關系來描述的方法，此外，當使用h2在頁面中顯示其它標題時，在層級方面問題就更多。而使用群組標題hgroup元素，我們可以將這些標題聚集在一起，而不影響文檔的整個綱要。
- <header>
- <hgroup>
- <h1> Recall Fan Page </h1>
- <h2> Only for people who want the memory of a lifetime. </h2>
- </hgroup>
- </header>
13.必要（Required）屬性
表單允許新的必要屬性，規定是否某個特定的輸入是必要的。你可以依據自己寫代碼的偏好，用下面兩種不同方式來聲明這個屬性：
- <input type=”text” name=”someInput” required>
或者，更嚴謹：
- <input type=”text” name=”someInput” required=”required”>
上面兩行代碼都行得通。用了這行代碼之后，并且瀏覽器支持required屬性的話， 輸入空白的表單就不會被提交。下面是一個簡單的例子，同時我們也添加了占位符屬性：
- <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>
如果輸入是空的，表單將無法提交，突出顯示文本框。
14. 自動對焦（Autofocus）屬性
同樣地，有了HTML5就不再需要用JavaScript方案來解決自動對焦的問題。如果某個輸入應該被"選擇"或被聚焦，我們現在可以使用HTML的自動對焦autofocus屬性。
- <input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
15. 音頻支持
我們再也不需要依靠第三方插件來提供音頻了。HTML5提供了音頻元素<audio>。目前，只有最新的瀏覽器支持HTML5音頻。 此時，最好還是提供一些向后兼容性。
- <audio autoplay=”autoplay” controls=”controls”>
- <source src=”file.ogg” />
- <source src=”file.mp3″ />
- <a href=”file.mp3″>Download this file.</a>
- </audio>
說道音頻格式，Mozilla和Webkit都還沒有完全支持。Firefox希望看到一個 .ogg文件，Webkit瀏覽器只支持最常見的.mp3擴展名。這意味著說，至少目前為止，你應該創建兩個版本的音頻。當Safari加載頁面時，它認不出.ogg格式的文件，將會跳過并移到mp3版本上。請注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。