html5的新特性

時間 2019-12-07

標籤 html5 html 特性欄目 HTML5 简体版

原文原文鏈接

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

目前許多網頁還在使用XHTML 1.0 而且要在第一行像這樣聲明文檔類型：css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >html

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

<!DOCTYPE html >瀏覽器

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

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

< link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />網站

< script type="text/javascript" src="path/to/script.js"ui

</ scriptthis

而在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就是其中之一。假設個人網站名下面緊跟着一個子標題，我能夠用<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

5.標記元素 (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

6.圖形元素 (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

7.從新定義<small> (Small Element redefined)

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

在HTML4或XHTML中，你須要用JavaScript來給文本框添加佔位符。好比，你能夠提早設置好一些信息，當用戶開始輸入時，文本框中的文字就消失。而在HTML5中，新的「placeholder」就簡化了這個問題。 9.必要屬性 (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

在上面那個例子中，若是輸入內容空且表格被提交，輸入框將被高亮顯示。 10.Autofocus 屬性 (Autofocus Attribute)

一樣，HTML5的解決方案消除了對JavaScript的須要。若是一個特定的輸入應該是「選擇」或聚焦，默認狀況下，咱們如今能夠利用自動聚焦屬性。

< input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus

11.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格式。 12.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

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

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

< video preload

14.顯示控制條 (Display Controls)