網(wǎng)站設(shè)計人員必知的15個HTML5新特性

網(wǎng)站設(shè)計人員想必對HTML5都很熟悉了，因為太多的媒體在討論這一技術(shù)，也出現(xiàn)大量的大師級的HTML5新作品。然而，你能準(zhǔn)確地說出HTML5帶來了哪些新特性嗎？本文總結(jié)了HTML5帶來的15項你必須知道的新特性。

1.新的文檔類型 (New Doctype)

目前許多網(wǎng)頁還在使用XHTML 1.0 并且要在第一行像這樣聲明文檔類型：

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

在HTML5中，上面那種聲明方式將失效。下面是HTML5中的聲明方式：

  >  2.腳本和鏈接無需type  (No More Types for Scripts and Links)

在HTML4或XHTML中，你需要用下面的幾行代碼來給你的網(wǎng)頁添加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>   3.語義Header和Footer (The Semantic Header and Footer)

在HTML4或XHTML中，你需要用下面的代碼來聲明"Header"和"Footer"。

  <div id="header">  ...  div>  ..........  <div id="footer">  ...  div>  

在HTML5中，有兩個可以替代上述聲明的元素，這可以使代碼更簡潔。

  <header>  ...  header>  <footer>  ...  footer> 
4.Hgroup

在HTML5中，有許多新引入的元素，hgroup就是其中之一。假設(shè)我的網(wǎng)站名下面緊跟著一個子標(biāo)題，我可以用

和 標(biāo)簽來分別定義。然而，這種定義沒有說明這兩者之間的關(guān)系。而且，h2標(biāo)簽的使用會帶來更多問題，比如該頁面上還有其他標(biāo)題的時候。

在HTML5中，我們可以用hgroup元素來將它們分組，這樣就不會影響文件的大綱。

  <header>  <hgroup>  <h1> Recall Fan Page h1>  <h2> Only for people who want the memory of a lifetime. h2>  hgroup>  header>    5.標(biāo)記元素 (Mark Element)

你可以把它當(dāng)做高亮標(biāo)簽。被這個標(biāo)簽修飾的字符串應(yīng)當(dāng)和用戶當(dāng)前的行動相關(guān)。比如說，當(dāng)我在某博客中搜索“Open your Mind”時，我可以利用一些JavaScript將出現(xiàn)的詞組用修飾一下。

  <h3> Search Results h3>  <p> They were interrupted, just after Quato said, <mark>"Open your Mind"mark>. p>   6.圖形元素 (Figure Element)

在HTML4或XHTML中，下面的這些代碼被用來修飾圖片的注釋。

  <img src="path/to/image" alt="About image" />  <p>Image of Mars. p>  

然而，上述代碼沒有將文字和圖片內(nèi)在聯(lián)系起來。因此，HTML5引入了元素。當(dāng)和結(jié)合起來后，我們可以語義化地將注釋和相應(yīng)的圖片聯(lián)系起來。

  <figure>  <img src="path/to/image" alt="About image" />  <figcaption>  <p>This is an image of something interesting. p>  figcaption>  figure>   7.重新定義 (Small Element redefined)

在HTML4或XHTML中，元素已經(jīng)存在。然而，卻沒有如何正確使用這一元素的完整說明。在HTML5中，被用來定義小字。試想下你網(wǎng)站底部的版權(quán)狀態(tài)，根據(jù)對此元素新的HTML5定義，<small>可以正確地詮釋這些信息。

8.占位符 (Placeholder)

在HTML4或XHTML中，你需要用JavaScript來給文本框添加占位符。比如，你可以提前設(shè)置好一些信息，當(dāng)用戶開始輸入時，文本框中的文字就消失。

而在HTML5中，新的“placeholder”就簡化了這個問題。

9.必要屬性 (Required Attribute)

HTML5中的新屬性“required”指定了某一輸入是否必需。有兩種方法聲明這一屬性。

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

當(dāng)文本框被指定必需時，如果空白的話表格就不能提交。下面是一個如何使用的例子。

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

在上面那個例子中，如果輸入內(nèi)容空且表格被提交，輸入框?qū)⒈桓吡溜@示。

10.Autofocus 屬性 (Autofocus Attribute)

同樣，HTML5的解決方案消除了對JavaScript的需要。如果一個特定的輸入應(yīng)該是“選擇”或聚焦，默認(rèn)情況下，我們現(xiàn)在可以利用自動聚焦屬性。

  <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>  11.Audio 支持 (Audio Support)

目前我們需要依靠第三方插件來渲染音頻。然而在HTML5中，元素被引進(jìn)來了。

  <audio autoplay="autoplay" controls="controls">  <source src="file.ogg" />  <source src="file.mp3" />  <a href="file.mp3">Download this file.a>  audio>  

當(dāng)使用元素時請記得包含兩種音頻格式。FireFox想要.ogg格式的文件，而Webkit瀏覽器則需要.mp3格式的。和往常一樣，IE是不支持的，且Opera 10及以下版本只支持.wav格式。

12.Video 支持 (Video Support)

HTML5中不僅有元素，而且還有。然而，和類似，HTML5中并沒有指定視頻解碼器，它留給了瀏覽器來決定。雖然Safari和Internet Explorer9可以支持H.264格式的視頻，F(xiàn)irefox和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>   13.視頻預(yù)載 (Preload attribute in Videos element)

當(dāng)用戶訪問頁面時這一屬性使得視頻得以預(yù)載。為了實現(xiàn)這個功能，可以在元素中加上preload="preload"或者只是preload。

  <video preload>  14.顯示控制條 (Display Controls)

如果你使用過上面的每一個提到的技術(shù)點，你可能已經(jīng)注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。為了渲染出播放控制條，我們必須在video元素內(nèi)指定controls屬性。

  <video preload controls>  15.正規(guī)表達(dá)式 (Regular Expressions)

在HTML4或XHTML中，你需要用一些正規(guī)表達(dá)式來驗證特定的文本。而HTML5中新的pattern屬性讓我們能夠在標(biāo)簽處直接插入一個正規(guī)表達(dá)式。

  <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>   結(jié)論

事實上，還有很多新元素和特性，上面提到的只是HTML5中一些我認(rèn)為網(wǎng)站開發(fā)中常用的，剩下的就由你們自己去摸索HTML5啦。

歡迎轉(zhuǎn)載，本文版權(quán)歸于成都網(wǎng)站建設(shè)（www.bm7419.com）相關(guān)閱讀：HTML 5 & CSS 3 的新交互特性分享

分享標(biāo)題：網(wǎng)站設(shè)計人員必知的15個HTML5新特性
當(dāng)前路徑：http://www.bm7419.com/news5/180555.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站設(shè)計等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)