html5的官方文檔,內容比較多,粗略翻了一遍感覺學習到的不是很多。 幸好先前瞭解一些html的知識。可以從升級後的差異化來進行學習一下。 一:新的文檔類型(New Doctype) 目前許多網頁還在使用XHTML 1.0 並且要在第一行像這樣聲明文檔類型。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 在HTML5中,上面那種聲明方式將失效。下面是HTML5中的聲明方式: <!DOCTYPE html> 二:腳本和鏈接無需type(No More Types for Scripts and Links) 在HTML4或XHTML中,你需要用下面的幾行代碼來給你的網頁添加CSS和JavaScript文件。 <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css"/> <script type="text/javascript" src="path/to/script.js"> </script> 而在HTML5中,你不再需要指定類型屬性。因此,代碼可以簡化如下: <link rel="stylesheet" href="path/to/stylesheet.css"/> <script src="path/to/script.js"> </script> 三:語義Header和Footer(The Semantic Header and Footer) 在HTML4或XHTML中,你需要用下面的代碼來聲明"Header"和"Footer"。 <div id="header"> ... </div> .......... <div id="footer"> ... </div> 在HTML5中,有兩個可以替代上述聲明的元素,這可以使代碼更簡潔。 <header> ... </header> <footer> ... </footer> 四:Hgroup 在HTML5中,有許多新引入的元素,hgroup就是其中之一。 假設我的網站名下面緊跟着一個子標題,我可以用<h1>和<h2>標籤來分別定義。 然而,這種定義沒有說明這兩者之間的關係。而且,h2標籤的使用會帶來更多問題,比如該頁面上還有其他標題的時候。 在HTML5中,我們可以用hgroup元素來將它們分組,這樣就不會影響文件的大綱。 <header> <hgroup> <h1>Recall Fan Page</h1> <h2>Only for people who want the memory of a lifetime.</h2> </hgroup> </header> 五:標記元素(Mark Element) 你可以把它當做高亮標籤。被這個標籤修飾的字符串應當和用戶當前的行動相關。 比如說,當我在某博客中搜索“Open your Mind”時,我可以利用一些JavaScript將出現的詞組用<mark>修飾一下。 <h3>Search Results</h3> <p>They were interrupted, just after Quato said,<mark>"Open your Mind"</mark>.</p> 六:圖形元素(Figure Element) 在HTML4或XHTML中,下面的這些代碼被用來修飾圖片的註釋。 <img src="path/to/image" alt="About image"/> <p>Image of Mars.</p> 然而,上述代碼沒有將文字和圖片內在聯繫起來。因此,HTML5引入了<figure>元素。 當和<figcaption>結合起來後,我們可以語義化地將註釋和相應的圖片聯繫起來。 <figure> <img src="path/to/image" alt="About image"/> <figcaption> <p>This is an image of something interesting.</p> </figcaption> </figure> 七:重新定義<small>(Small Element redefined) 在HTML4或XHTML中,<small>元素已經存在。然而,卻沒有如何正確使用這一元素的完整說明。 在HTML5中,<small>被用來定義小字。 試想下你網站底部的版權狀態,根據對此元素新的HTML5定義,<small>可以正確地詮釋這些信息。 八:佔位符(Placeholder) 在HTML4或XHTML中,你需要用JavaScript來給文本框添加佔位符。 比如,你可以提前設置好一些信息,當用戶開始輸入時,文本框中的文字就消失。 而在HTML5中,新的“placeholder”就簡化了這個問題。 九:必要屬性(Required Attribute) HTML5中的新屬性“required”指定了某一輸入是否必需。有兩種方法聲明這一屬性。 <input type="text" name="someInput" required> <input type="text" name="someInput" 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> 在上面那個例子中,如果輸入內容空且表格被提交,輸入框將被高亮顯示。 十:Autofocus屬性(Autofocus Attribute) 同樣,HTML5的解決方案消除了對JavaScript的需要。 如果一個特定的輸入應該是“選擇”或聚焦,默認情況下,我們現在可以利用自動聚焦屬性。 <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus> 十一:Audio 支持 (Audio Support) 目前我們需要依靠第三方插件來渲染音頻。然而在HTML5中,<audio>元素被引進來了。 <audio autoplay="autoplay" controls="controls"> <source src="file.ogg"/> <source src="file.mp3"/> <a href="file.mp3">Download this file.</a> </audio> 當使用<audio>元素時請記得包含兩種音頻格式。FireFox想要.ogg格式的文件,而Webkit瀏覽器則需要.mp3格式的。 和往常一樣,IE是不支持的,且Opera 10及以下版本只支持.wav格式。 十二:Video 支持 (Video Support) HTML5中不僅有<audio>元素,而且還有<video>。 然而,和<audio>類似,HTML5中並沒有指定視頻解碼器,它留給了瀏覽器來決定。 雖然Safari和Internet Explorer9可以支持H.264格式的視頻,Firefox和Opera是堅持開源Theora 和Vorbis格式。 因此,指定HTML5的視頻時,你必須提供這兩種格式。 <video controls preload> <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'"/> <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'"/> <p>Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> </video> 十三:視頻預載 (Preload attribute in Videos element) 當用戶訪問頁面時這一屬性使得視頻得以預載。 爲了實現這個功能,可以在<video>元素中加上preload="preload"或者只是preload。 <video preload> 十四:顯示控制條 (Display Controls) 如果你使用過上面的每一個提到的技術點,你可能已經注意到,使用上面的代碼,視頻僅僅顯示的是張圖片,沒有控制條。 爲了渲染出播放控制條,我們必須在video元素內指定controls屬性。 <video preload controls> 十五:正規表達式 (Regular Expressions) 在HTML4或XHTML中,你需要用一些正規表達式來驗證特定的文本。 而HTML5中新的pattern屬性讓我們能夠在標籤處直接插入一個正規表達式。 <form action="" method="post"> <label for="username">Create a Username:</label> <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required> <button type="submit">Go</button> </form> 結論 事實上,還有很多新元素和特性,上面提到的只是一些我認爲網站開發中常用的,以後碰到會繼續補充的。
html5新特性
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.