HTML5想必大家都很熟悉了,因為太多的媒體在討論這一技術。然而,你能准確地說出Html5帶來了哪些新特性嗎?本文總結了Html5帶來的15項你必須知道的新特性。
一起來看下:
目前許多網頁還在使用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>
在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>
在HTML4或XHtml中,你需要用下面的代碼來聲明“Header”和“Footer”。
- <div id="header">
- ...
- </div>
- ..........
- <div id="footer">
- ...
- </div>
在Html5中,有兩個可以替代上述聲明的元素,這可以使代碼更簡潔。
- <header>
- ...
- </header>
- <footer>
- ...
- </footer>
在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>
你可以把它當做高亮標簽。被這個標簽修飾的字符串應當和用戶當前的行動相關。比如說,當我在某博客中搜索“Open your Mind”時,我可以利用一些JavaScript將出現的詞組用<mark>修飾一下。
- <h3> Search Results </h3>
- <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>
在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>
在HTML4或XHTML中,<small>元素已經存在。然而,卻沒有如何正確使用這一元素的完整說明。在Html5中,<small>被用來定義小字。試想下你網站底部的版權狀態,根據對此元素新的Html5定義,<small>可以正確地诠釋這些信息。
在HTML4或XHtml中,你需要用JavaScript來給文本框添加占位符。比如,你可以提前設置好一些信息,當用戶開始輸入時,文本框中的文字就消失。
而在Html5中,新的“placeholder”就簡化了這個問題。
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>
在上面那個例子中,如果輸入內容空且表格被提交,輸入框將被高亮顯示。
同樣,Html5的解決方案消除了對JavaScript的需要。如果一個特定的輸入應該是“選擇”或聚焦,默認情況下,我們現在可以利用自動聚焦屬性。
- <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
目前我們需要依靠第三方插件來渲染音頻。然而在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格式。
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>
當用戶訪問頁面時這一屬性使得視頻得以預載。為了實現這個功能,可以在<video>元素中加上preload=”preload”或者只是preload。
- <video preload>
如果你使用過上面的每一個提到的技術點,你可能已經注意到,使用上面的代碼,視頻僅僅顯示的是張圖片,沒有控制條。為了渲染出播放控制條,我們必須在video元素內指定controls屬性。
- <video preload controls>
在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>