HTML5的十五大新特性是什么

這篇文章主要介紹“HTML5的十五大新特性是什么”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“HTML5的十五大新特性是什么”文章能幫助大家解決問題。

專注于為中小企業提供做網站、網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業西湖免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了千余家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

1.新的文檔類型 (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>

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

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

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

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

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

...

</div>

..........

...

</div>

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

...

</header>

...

</footer>

4.Hgroup

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

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

<h2> Recall Fan Page </h2>

<h3> Only for people who want the memory of a lifetime. </h3>

</hgroup>

</header>

5.標記元素 (Mark Element)

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

<h4> Search Results </h4>

<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

6.圖形元素 (Figure Element)

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

<p>Image of Mars. </p>

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

<p>This is an image of something interesting. </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”指定了某一輸入是否必需。有兩種方法聲明這一屬性。

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

</form>

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

10.Autofocus 屬性 (Autofocus Attribute)

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

11.Audio 支持 (Audio Support)

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

<a href="file.mp3">Download this file.</a>

</audio>

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

12.Video 支持 (Video Support)

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

<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>

</video>

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

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

14.顯示控制條 (Display Controls)

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

15.正規表達式 (Regular Expressions)

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

<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>

</form>

關于“HTML5的十五大新特性是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注創新互聯行業資訊頻道，小編每天都會為大家更新不同的知識點。

新聞名稱：HTML5的十五大新特性是什么
鏈接URL：http://www.js-pz168.com/article32/pojcsc.html

成都網站建設公司_創新互聯，為您提供網頁設計公司、網站設計、手機網站建設、定制網站、服務器托管、網站導航

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

猜你還喜歡下面的內容

久久99久久人婷婷精品综合_超碰aⅴ人人做人人爽欧美_亚洲电影第三页_日韩欧美一中文字暮专区_波多野结衣的一区二区三区_婷婷在线播放_人人视频精品_国产精品日韩精品欧美精品_亚洲免费黄色_欧美性猛交xxxxxxxx

HTML5的十五大新特性是什么