開發者必須知道的HTML5十五大新特性

2024-04-27 14:58:46

字體：大中小

來源：轉載

供稿：網友

HTML5想必大家都很熟悉了，因為太多的媒體在討論這一技術。然而，你能準確地說出HTML5帶來了哪些新特性嗎？本文總結了HTML5帶來的15項你必須知道的新特性。

一起來看下：

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

目前許多網頁還在使用XHTML1.0并且要在第一行像這樣聲明文檔類型：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

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

<!DOCTYPEhtml>

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

在HTML4或XHTML中，你需要用下面的幾行代碼來給你的網頁添加CSS和javaScript文件。

<linkrel="stylesheet"href="path/to/stylesheet.css"type="text/css"/>
<scripttype="text/Javascript"src="path/to/script.js"></script>

而在HTML5中，你不再需要指定類型屬性。因此，代碼可以簡化如下：

<linkrel="stylesheet"href="path/to/stylesheet.css"/>
<scriptsrc="path/to/script.js"></script>

3.語義Header和Footer (The Semantic Header and Footer)

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

<divid="header">
...
</div>
..........
<divid="footer">
...
</div>

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

<header>
...
</header>
<footer>
...
</footer>

4.Hgroup

在HTML5中，有許多新引入的元素，hgroup就是其中之一。假設我的網站名下面緊跟著一個子標題，我可以用<h1>和<h2>標簽來分別定義。然而，這種定義沒有說明這兩者之間的關系。而且，h2標簽的使用會帶來更多問題，比如該頁面上還有其他標題的時候。

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

<header>
<hgroup>
<h1>RecallFanPage</h1>
<h2>Onlyforpeoplewhowantthememoryofalifetime.</h2>
</hgroup>
</header>

5.標記元素 (Mark Element)

你可以把它當做高亮標簽。被這個標簽修飾的字符串應當和用戶當前的行動相關。比如說，當我在某博客中搜索“OpenyourMind”時，我可以利用一些JavaScript將出現的詞組用<mark>修飾一下。

<h3>SearchResults</h3>
<p>Theywereinterrupted,justafterQuatosaid,<mark>"OpenyourMind"</mark>.</p>

6.圖形元素 (Figure Element)

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

<imgsrc="path/to/image"alt="Aboutimage"/>
<p>ImageofMars.</p>

然而，上述代碼沒有將文字和圖片內在聯系起來。因此，HTML5引入了<figure>元素。當和<figcaption>結合起來后，我們可以語義化地將注釋和相應的圖片聯系起來。

<figure>
<imgsrc="path/to/image"alt="Aboutimage"/>
<figcaption>
<p>Thisisanimageofsomethinginteresting.</p>
</figcaption>
</figure>

7.重新定義<small> (Small Element redefined)
在HTML4或XHTML中，<small>元素已經存在。然而，卻沒有如何正確使用這一元素的完整說明。在HTML5中，<small>被用來定義小字。試想下你網站底部的版權狀態，根據對此元素新的HTML5定義，<small>可以正確地詮釋這些信息。

8.占位符 (Placeholder)
在HTML4或XHTML中，你需要用JavaScript來給文本框添加占位符。比如，你可以提前設置好一些信息，當用戶開始輸入時，文本框中的文字就消失。
而在HTML5中，新的“placeholder”就簡化了這個問題。

9.必要屬性 (Required Attribute)

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

<inputtype="text"name="someInput"required>
<inputtype="text"name="someInput"required="required">

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

<formmethod="post"action="">
<labelfor="someInput">YourName:</label>
<inputtype="text"id="someInput"name="someInput"placeholder="DouglasQuaid"required>
<buttontype="submit">Go</button>
</form>

在上面那個例子中，如果輸入內容空且表格被提交，輸入框將被高亮顯示。

10.Autofocus屬性 (Autofocus Attribute)

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

<inputtype="text"name="someInput"placeholder="DouglasQuaid"requiredautofocus>

11.Audio支持 (Audio Support)

目前我們需要依靠第三方插件來渲染音頻。然而在HTML5中，<audio>元素被引進來了。

<audioautoplay="autoplay"controls="controls">
<sourcesrc="file.ogg"/>
<sourcesrc="file.mp3"/>
<ahref="file.mp3">Downloadthisfile.</a>
</audio>

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

12.Video支持 (Video Support)

HTML5中不僅有<audio>元素，而且還有<video>。然而，和<audio>類似，HTML5中并沒有指定視頻解碼器，它留給了瀏覽器來決定。雖然Safari和InternetExplorer9可以支持H.264格式的視頻，Firefox和Opera是堅持開源Theora和Vorbis格式。因此，指定HTML5的視頻時，你必須提供這兩種格式。

<videocontrolsPReload>
<sourcesrc="cohagenPhoneCall.ogv"type="video/ogg;codecs='vorbis,theora'"/>
<sourcesrc="cohagenPhoneCall.mp4"type="video/mp4;'codecs='avc1.42E01E,mp4a.40.2'"/>
<p>Yourbrowserisold.<ahref="cohagenPhoneCall.mp4">Downloadthisvideoinstead.</a></p>
</video>

13.視頻預載 (Preload attribute in Videos element)

當用戶訪問頁面時這一屬性使得視頻得以預載。為了實現這個功能，可以在<video>元素中加上preload=”preload”或者只是preload。

<videopreload>

14.顯示控制條 (Display Controls)

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

<videopreloadcontrols>

15.正規表達式 (Regular Expressions)

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

<formaction=""method="post">
<labelfor="username">CreateaUsername:</label>
<inputtype="text"
name="username"
id="username"
placeholder="4<>10"
pattern="[A-Za-z]{4,10}"
autofocus
required>
<buttontype="submit">Go</button>
</form>