雖然HTML 5標(biāo)準(zhǔn)現(xiàn)在仍然是個(gè)草案，但其重要的部分已經(jīng)被許多現(xiàn)代的瀏覽器實(shí)現(xiàn)了。在《現(xiàn)在如何在你的站點(diǎn)上使用HTML 5》一文中我們介紹了如何使用HTML 5，本文將總結(jié)出HTML 5在功能上的主要變化及使用實(shí)例。

51CTO推薦專題：HTML 5 下一代Web開發(fā)標(biāo)準(zhǔn)詳解

一、新的Doctype

你還在使用麻煩的，不可能記得住的XHTML文檔類型嗎？

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

如果是，為什么還在用呢?使用新的HTML 5文檔類型代替吧。

<!DOCTYPEhtml> 

我就琢磨著，為了HTML5搞個(gè)這廝代碼，您可能會(huì)對(duì)這段代碼究竟靠不靠譜表示懷疑。不用擔(dān)心，如今這是可行的，只有老的瀏覽器需要一個(gè)特定的doctype(文檔類型)。瀏覽器如果不知道doctype，就會(huì)很簡(jiǎn)單的以標(biāo)準(zhǔn)模式對(duì)包含的標(biāo)簽進(jìn)行渲染。所以，妹妹你大膽的向前沖，把小心謹(jǐn)慎都拋到九霄云外，去擁抱新的HTML5文檔類型吧。

二、圖形元素(TheFigureElement)

看看下面給圖片添加的標(biāo)示：

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

文字裹在P標(biāo)簽里，與IMG標(biāo)簽各行其道，很難讓人聯(lián)想到這就是標(biāo)題。HTML 5通過采用元素對(duì)此進(jìn)行了改正。當(dāng)合元素組合使用時(shí)，我們就可以語(yǔ)義化地聯(lián)想到這就是圖片相對(duì)應(yīng)的標(biāo)題。

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

三、重新定義

還在不久前，元素被用來創(chuàng)建靠近logo且相關(guān)的副標(biāo)題。這是個(gè)很有用的表現(xiàn)元素，但是，現(xiàn)在，這種用法可能就不正確了。元素已經(jīng)被重新定義了，指小字，因而更具可用性。試想下你網(wǎng)站底部的版權(quán)狀態(tài)，根據(jù)對(duì)此元素新的HTML5定義，可以正確地包裹這些信息。

四、腳本(scripts)和鏈接(links)無需type

您可能現(xiàn)在仍在給link和script標(biāo)簽增加type屬性。

<linkrellinkrel="stylesheet"href="path/to/stylesheet.css"type="text/css"/> 
<scripttypescripttype="text/javascript"src="path/to/script.js"></script> 

這意味著，這些標(biāo)簽都各自指向樣式表和腳本。因此，我們可以把type屬性一起干掉。

<linkrellinkrel="stylesheet"href="path/to/stylesheet.css"/> 
<scriptsrcscriptsrc="path/to/script.js"></script> 

#p#

五、引號(hào)還是不要引號(hào)

這確實(shí)是個(gè)問題。記住，HTML 5不是XHTML，要是你不愿意，你沒有必要非得用引號(hào)標(biāo)記包裹你的屬性，沒有必要非得閉合元素。換句話說，只要你自己覺得舒服，就沒有什么對(duì)錯(cuò)之分。對(duì)于我自己來說就是如此。

<pclasspclass=myClassid=someId>Startthereactor. 

對(duì)此取舍你還得自己拿主意。如果你更傾向于結(jié)構(gòu)化的文檔，就算天塌下來，也要把引號(hào)牢牢拽在懷里。

六、內(nèi)容可編輯

 

最新的瀏覽器有個(gè)很贊的新屬性可以應(yīng)用到元素上，叫做contenteditable。顧名思意，就是允許用戶編輯元素內(nèi)容包含的任意文本，包括子元素。類似的用途還有很多，像是簡(jiǎn)單的待辦事項(xiàng)清單應(yīng)用程序，可大大利用其本地存儲(chǔ)的優(yōu)勢(shì)。

<ulcontenteditableulcontenteditable="true"> 
<li>悼念遇難香港同胞</li> 
<li>深圳特區(qū)30周年</li> 
<li>伊春空難</li></ul> 

或者，根據(jù)前面所學(xué)到的一些技巧，我們可以把它寫成：

<ulcontenteditableulcontenteditable=true> 

七、Email輸入(Inputs)

如果我們給表單輸入框應(yīng)用名為”email”的type屬性，我們可以命令瀏覽器只允許符合有效的電子郵件地址結(jié)構(gòu)的字符串。沒錯(cuò)，內(nèi)置表單驗(yàn)證即將到來，由于一些顯而易見的原因，我們還不能100%依賴內(nèi)置驗(yàn)證，較舊的瀏覽器不認(rèn)識(shí)這個(gè)”email”型，它們會(huì)簡(jiǎn)單地退回到普通文本框。

<formactionformaction=""method="get"> 
     <labelforlabelfor="email">郵箱:</label> 
     <inputidinputid="email"name="email"type="email"/> 
     <buttontypebuttontype="submit">確定</button> 
</form> 

還應(yīng)當(dāng)指出，當(dāng)談到哪些元素和屬性支持和不支持時(shí)，當(dāng)前所有的瀏覽器都有點(diǎn)靠不住的。例如，Opera似乎支持電子郵件驗(yàn)證，但僅在name屬性被指定的時(shí)候。而且，它不支持占位符屬性，這個(gè)我們將會(huì)在后面學(xué)到。底線是不依賴于這種形式的驗(yàn)證…但你仍然可以使用它!

八、占位符(Placeholders)

Placeholders的意思，就是文本框/文本域空間默認(rèn)會(huì)有個(gè)文字提示，獲得焦點(diǎn)時(shí)，此提示文字消失;失去焦點(diǎn)時(shí)如果內(nèi)容為空，提示文字又出現(xiàn)。如下圖所示：

這些表單控件里面顯示的些提示性的文字就是占位符。按照以往的做法，我們需要使用一點(diǎn)JavaScript代碼實(shí)現(xiàn)占位符效果，例如我之前的“文本框/域文字提示自動(dòng)顯示隱藏jQuery小插件”一文所展示的。當(dāng)然，你需要設(shè)定一個(gè)初始的默認(rèn)的value值，然后根據(jù)輸入內(nèi)容進(jìn)行判斷，從而決定文本框值的改變與否。如果您使用占位符(placeholders)屬性，一切就輕松了。

<labelforlabelfor="email">郵箱:</label> 
<inputidinputid="email"type="email"placeholder="zhangxinxu@zhangxinxu.com"size="26"/> 

#p#

九、本地存儲(chǔ)(LocalStorage)

多虧了本地存儲(chǔ)(非正式的HTML5，本著方便歸納的目的)，我們可以讓高級(jí)瀏覽器記住我們的編輯后的內(nèi)容，即使瀏覽器被關(guān)掉或是頁(yè)面刷新。

IE8瀏覽器已經(jīng)支持了本地存儲(chǔ)，如下截圖所示：

盡管顯然不支持所有的瀏覽器，我們可以在InternetExplorer8時(shí)，Safari4和Firefox3.5下期待此工作方式。請(qǐng)注意，為了彌補(bǔ)舊的瀏覽器將無法識(shí)別本地存儲(chǔ)，你應(yīng)該先測(cè)試，以確定window.localStorage是否存在。

十、語(yǔ)義的Header和Footer

那些過往的日子：

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

這就是div，很自然的，沒有語(yǔ)義化的結(jié)構(gòu)——即使在應(yīng)用了id后?，F(xiàn)在，通過HTML 5，我們可以使用<header>和<footer>元素。以上的代碼可以替換成：

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

盡量不要混淆”header”和”footer”這些元素。他們只是指他們的容器。因此，將博客底部的，例如，元信息放在footer元素內(nèi)部是說得通的。這同樣也適用于header。

十一、更多HTML5表單特征(MoreHTML5FormFeatures)

您可以通過下面視頻學(xué)習(xí)更多有用的HTML 5表單特征：

十二、IE和HTML 5(InternetExplorer and HTML 5)

不幸的是，討厭的IE瀏覽器需要?jiǎng)狱c(diǎn)小手術(shù)才能理解新的HTML5元素。為了確保所有新的HTML5元素能以block水平的元素正確地渲染，有必要對(duì)其做如下定義：

header,footer,article,section,nav,menu,hgroup{  
       display:block;  
} 

不幸的是，IE仍舊忽略這些樣式，因?yàn)樗恢肋@些標(biāo)簽從哪里來的，好比是header元素。幸運(yùn)的是，有一個(gè)簡(jiǎn)單的解決辦法：

document.createElement("article");  
document.createElement("footer");  
document.createElement("header");  
document.createElement("hgroup");  
document.createElement("nav");  
document.createElement("menu"); 

奇怪的是，這段代碼似乎觸發(fā)IE瀏覽器。為了更簡(jiǎn)單將此應(yīng)用到每個(gè)新的應(yīng)用過程中，雷米夏普(Remy Sharp)創(chuàng)建了一個(gè)腳本，通常稱為HTML 5 shiv。該腳本同樣修復(fù)了些顯示問題。

十三、文檔某一部分的信息(hgroup)

想象一下，在我的網(wǎng)站的標(biāo)題，我有我的站點(diǎn)的名稱，隨后立即由一個(gè)副標(biāo)題。雖然我們可以使用一個(gè)<h1>和<h2>標(biāo)簽，為其分別創(chuàng)造標(biāo)記，但是依舊沒有(因?yàn)镠TML 4)一個(gè)簡(jiǎn)單的方法來語(yǔ)義上說明了兩者之間的關(guān)系。此外，一個(gè)h2標(biāo)記的使用提出了更多的問題，在層次結(jié)構(gòu)上，當(dāng)涉及到其他網(wǎng)頁(yè)上顯示的標(biāo)題時(shí)。通過使用不影響文檔的大綱流hgroup元素，我們可以將這些標(biāo)題組合在一起。

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

#p#

十四、必要的屬性(Required Attribute)

表單允許新的必要屬性，用來指定是否需要特殊的input。這取決于你的代碼偏好，你可以以下面兩種方式之一申明此屬性。

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

或者，使用更結(jié)構(gòu)化的方法：

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

兩種方法都行。有了這個(gè)代碼，并且瀏覽器支持此屬性，如果“someInput”文本框是空白，則表單不會(huì)被提交。下面是一個(gè)簡(jiǎn)單的例子，我們還將添加占位符屬性，因?yàn)闆]有理由不這樣做。

<formactionformaction=""method="get"> 
<labelforlabelfor="name">姓名:</label> 
<inputidinputid="name"name="name"type="text"placeholder="zhangxinxu"required="required"/> 
<buttontypebuttontype="submit">提交</button></form> 

如果input里面內(nèi)容是空白，則表單提交的時(shí)候，文本框會(huì)高亮顯示。

十五、Autofocus屬性

同樣，HTML 5的解決方案消除了對(duì)JavaScript的需要。如果一個(gè)特定的輸入應(yīng)該是“選擇”，或有重點(diǎn)的，默認(rèn)情況下，我們現(xiàn)在可以利用自動(dòng)獲取焦點(diǎn)屬性。

<inputtypeinputtype="text"name="someInput"placeholder="zhangxinxu"requiredautofocus> 

十六、Audio支持

我們無需再依賴第三方插件區(qū)渲染音頻。HTML 5提供了元素，我們將不必?fù)?dān)心這些插件。就目前，只有最近期的的瀏覽器提供HTML 5音頻支持。在這個(gè)時(shí)候，它仍然是一個(gè)很好的做法提供一些向后兼容的形式。

<audioautoplayaudioautoplay="autoplay"controls="controls"> 
<sourcesrcsourcesrc="file.ogg"/> 
<sourcesrcsourcesrc="file.mp3"/> 
<ahrefahref="file.mp3">Downloadthisfile.</a> 
</audio> 

Mozilla和WebKit的還沒有完全相處，當(dāng)涉及到音頻格式，F(xiàn)irefox會(huì)希望看到一個(gè).ogg文件，而WebKit的瀏覽器支持.mp3擴(kuò)展。這意味著，至少在現(xiàn)在，你應(yīng)該創(chuàng)建兩個(gè)版本的音頻。

當(dāng)Safari加載頁(yè)面時(shí)，它不會(huì)承認(rèn).ogg格式，會(huì)跳過它并移動(dòng)到的MP3版本，因此。請(qǐng)注意IE，每往常一樣，不支持這些格式，Opera10和以及以下版本只能使用.wav文件。

十七、Video支持

與元素很類似，在新的瀏覽器中也存在Video!事實(shí)上，就在最近，YouTube宣告了新的HTML 5視頻嵌入，當(dāng)然，是為支持此功能瀏覽器。因?yàn)镠TML5的規(guī)范沒有指定特定的視頻編解碼器，它留給了瀏覽器來決定。雖然Safari和InternetExplorer9可以預(yù)期支持H.264格式的視頻(其中Flash播放器可以播放)，F(xiàn)irefox和Opera是堅(jiān)持開源Theora和Vorbis格式。因此，當(dāng)顯示HTML 5的視頻，您必須提供這兩種格式。

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

還有一個(gè)值得注意的一些事情：

1.我們技術(shù)上不需要來設(shè)置type屬性，但是，如果我們不這樣做，瀏覽器不得不自己去尋找類型。

2.不是所有的瀏覽器理解HTML5視頻。在資源元素的下面，我們可以提供一個(gè)下載鏈接，或嵌入視頻的Flash版本代替。

3.controls和preload屬性就會(huì)在下面提及。

4.有方法可以讓所有的瀏覽器支持video標(biāo)簽。

#p#

十八、視頻預(yù)載(Preload Videos)

預(yù)載屬性不完全是你想的那個(gè)樣子，雖然，你應(yīng)該先決定是否要在瀏覽器預(yù)裝的視頻。是否有必要?或許吧。如果訪問者訪問一個(gè)專門展示了一個(gè)視頻的頁(yè)面，你一定要預(yù)載的視頻，節(jié)約參觀者等待的一部分時(shí)間。影片可以通過設(shè)置preload=”preload”或是簡(jiǎn)單地添加preload進(jìn)行預(yù)載。我更喜歡后者的解決方案，它少了一點(diǎn)多余的東西。

<videopreload> 

十九、顯示控制條

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

<video preload controls> 

請(qǐng)注意，不同瀏覽器渲染出來的進(jìn)度條的模樣都是不一樣的。

二十、正則表達(dá)式

你發(fā)現(xiàn)自己多久匆匆編寫一些正則表達(dá)式驗(yàn)證一個(gè)特定的文本。多虧了新的pattern屬性，我們可以在標(biāo)簽處直接插入一個(gè)正則表達(dá)式。

<formactionformaction=""method="get"> 
<labelforlabelfor="username">姓名:</label> 
<inputidinputid="username"name="username"type="text"placeholder="4-10個(gè)英文字母"pattern="[A-Za-z]{4,10}"required="required"autofocus/> 
<buttontypebuttontype="submit">提交</button> 
</form> 

如果你熟悉正則表達(dá)式，那么應(yīng)該清楚[A-Za-z]{4,10}表示接受4-10位不區(qū)分大小寫的英文字母。如果瀏覽器支持pattern屬性，則提交表單時(shí)，如果文本框中的內(nèi)容不符合其正則表達(dá)式，文本框會(huì)高亮顯示。如下圖所示。

注意到，我們已經(jīng)開始組合使用這些很棒的屬性。

二十一、屬性支持檢測(cè)

如果我們沒有方法檢測(cè)瀏覽器是否支持這些屬性，這些就不能稱之為好的屬性。第一個(gè)是利用優(yōu)秀的Modernizr庫(kù)，或者，我們可以創(chuàng)建和分析這些元素，以確定瀏覽器的能力。例如，在我們前面的例子，如果我們要確定瀏覽器是否能使用pattern的屬性，我們可以添加一小段JavaScript到我們的頁(yè)面上：

alert('pattern'indocument.createElement('input'));//boolean 

事實(shí)上，這是一種確定瀏覽器兼容的常用方法。jQuery庫(kù)了利用這種伎倆。在上面，我們創(chuàng)建了一個(gè)新的input元素，并確定了里面的pattern屬性瀏覽器是否認(rèn)得。如果是，瀏覽器則支持此功能。否則，當(dāng)然就不支持了。

<script>if(!'pattern'indocument.createElement('input')){//doclient/serversidevalidation}  
</script> 

謹(jǐn)記此方法依賴于JavaScript。

二十二、mark元素(MarkElement)

試想元素作為高亮。此標(biāo)簽包裹的字符串應(yīng)該與用戶當(dāng)前的行動(dòng)相關(guān)聯(lián)。例如，我在一些博客上搜索“北川景子”，我就可以使用一些JavaScript將當(dāng)前的每個(gè)結(jié)果字符串用mark標(biāo)簽包裹。

<h3>搜索結(jié)果</h3> 
<p>我很喜歡《零秒出手》里面那個(gè)拉小提琴的女孩，原來她叫做<mark>北川景子</mark>。  
</p> 

二十三、什么時(shí)候使用div

我們有些人開始質(zhì)問到底何時(shí)該使用div。現(xiàn)在我們可以使用header,article,section,和footer，還有機(jī)會(huì)使用div嗎?當(dāng)然可以。

例如，如果你發(fā)現(xiàn)你需要包裹一段代碼塊在對(duì)內(nèi)容定位處理的包裝單元內(nèi)。不過如果你是包裹一個(gè)博客文章，或者，可能是，底部的鏈接列表，則需考慮分別使用和元素，因?yàn)槠涓哒Z(yǔ)義。

二十四、什么可以開始立即使用

一直談?wù)摰浆F(xiàn)在的HTML5要到2022年才能全部完成，許多人完全忽視它，這是個(gè)巨大的錯(cuò)誤。事實(shí)上，有少量的HTML5的功能，我們可以在我們所有的項(xiàng)目中使用!更簡(jiǎn)單，更干凈的代碼總是一件好事。在今天的視頻快速展示的技巧中，我將告訴你一些可用的選項(xiàng)。

二十五、哪些不是HTML 5？

那些僅憑自己的假設(shè)形象將JavaScript變少的過渡被全部歸為HTML 5的人是可以理解的，甚至蘋果無意中推動(dòng)這一想法。對(duì)于非開發(fā)人員，誰(shuí)管這個(gè)呢，它是一個(gè)簡(jiǎn)單的方法適用于現(xiàn)代網(wǎng)頁(yè)標(biāo)準(zhǔn)。不過，對(duì)于我們來說，盡管它可能只是語(yǔ)義，重要的是要準(zhǔn)確理解什么不是HTML 5。

不管你需求有多大的區(qū)別，所有這些技術(shù)可以歸為現(xiàn)代網(wǎng)絡(luò)堆棧。事實(shí)上，不少這些分支規(guī)范的管理著還是同一人。

#p#

二十六、data屬性(TheDataAttribute)

我們現(xiàn)在可以很正式地讓所有的HTML元素支持自定義屬性。然而，以前，我們可能會(huì)這樣：

<h1idh1id=someIdcustomAttribute=value>小樣，膽兒挺肥的呢</h1> 

校驗(yàn)器會(huì)小題大做!但是現(xiàn)在，只要我們以”data”為前綴定義我們的自定義屬性，盜版屬性立馬變成正牌的了。如果你發(fā)現(xiàn)你曾經(jīng)把一個(gè)重要的數(shù)據(jù)附加在諸如class的屬性上，可能為了JavaScript之用，那么，本屬性將大有幫助。

二十七、Output元素

正如你可能預(yù)料到的，output元素被用來顯示部分計(jì)算，例如，如果你想顯示一個(gè)鼠標(biāo)的位置，或者是一系列數(shù)字的總和坐標(biāo)，這個(gè)數(shù)據(jù)應(yīng)被插入到output元素中。舉個(gè)簡(jiǎn)單的例子，當(dāng)提交按鈕被按下，我們用JavaScript將兩個(gè)數(shù)字相加值插入到空的output中。

<formactionformaction=""method="get"> 
<p>10+5=<outputnameoutputname="sum"></output></p> 
<buttontypebuttontype="submit">計(jì)算</button></form>(function()  
{varf=document.forms[0];if(typeoff['sum']!=='undefined')  
{f.addEventListener('submit',function(e){f['sum'].value=15;e.preventDefault();  
},false);  
}  
else  
{alert('你的瀏覽器尚未準(zhǔn)備好！');  
}  
}  
)  
(); 

自己測(cè)試了下，貌似現(xiàn)在只有在Opera瀏覽器下有上佳的效果：

如果您現(xiàn)在使用的是較新版本的Opera瀏覽器，您可以狠狠地點(diǎn)擊這里：HTML 5結(jié)果輸出框demo。此元素也可以接受一個(gè)屬性，它反映了輸出相關(guān)元素的名稱，類似label工作原理。

二十八、使用區(qū)域input創(chuàng)建滑塊

HTML 5引進(jìn)了range類型的input。

<inputtypeinputtype="range"> 

最值得注意的是，它可以接收min,max,step,和value屬性，等等。雖然現(xiàn)在似乎只有Opera瀏覽器充分支持這種輸入類型，但是當(dāng)我們可以實(shí)際使用時(shí)，這將是美妙無比的!

第一步：標(biāo)簽

首先，創(chuàng)建標(biāo)簽

<formmethodformmethod="post"> 
<h4>音量控制</h4> 
<inputtypeinputtype="range"name="range"min="0"max="10"step="1"value=""/> 
<outputnameoutputname="result"> 
</output> 
</form> 

第二步：CSS

下面，我們要使用一點(diǎn)點(diǎn)的樣式。我們將使用:before和:after去告知用戶我們制定的最大值和最小值。

input{font-size:14px;font-weight:bold;}input[type=range]:before  
{content:attr(min);padding-right:5px;}input[type=range]:after  
{content:attr(max);padding-left:5px;}output  
{display:block;font-size:5.5em;font-weight:bold;} 

第三步：JavaScript

◆檢測(cè)我們的瀏覽器是否認(rèn)識(shí)rangeinput，如果不，顯示提示。

◆當(dāng)用戶移動(dòng)滑塊的時(shí)候，動(dòng)態(tài)改變output的值。

◆監(jiān)聽，當(dāng)用戶離開滑塊，插入值，同時(shí)本地存儲(chǔ)。

◆然后，下次用戶刷新頁(yè)面的時(shí)候，選擇的區(qū)域和值會(huì)自動(dòng)地設(shè)置成他們最后一次選擇。

(function(){  
    var  f=document.forms[0],  
    range=f['range'],  
    result=f['result'],  
    cachedRangeValue=localStorage.rangeValue?localStorage.rangeValue:5;  
    //檢測(cè)瀏覽器是否是足夠酷  
    //識(shí)別range input.  
    var o=document.createElement('input');  
    o.type='range';  
    if(o.type==='text')alert('不好意思，你的瀏覽器還不夠酷，試試最新的Opera瀏覽器吧。');   
 
    //設(shè)置初始值  
    //無論是否本地存儲(chǔ)了，都設(shè)置值為5  
    range.value=cachedRangeValue;  
    result.value=cachedRangeValue;  
    //當(dāng)用戶選擇了個(gè)值，更新本地存儲(chǔ)  
    range.addEventListener("mouseup",function(){  
  alert("你選擇的值是："+range.value+".我現(xiàn)在正在用本地存儲(chǔ)保存此值。在現(xiàn)代瀏覽器上刷新并檢測(cè)。");  
  localStorage?(localStorage.rangeValue=range.value):alert("數(shù)據(jù)保存到了數(shù)據(jù)庫(kù)或是其他什么地方。");  
    },false);  
    //滑動(dòng)時(shí)顯示選擇的值  
    range.addEventListener("change",function(){  
          result.value=range.value;  
    },false);  
})();  

【編輯推薦】

1. 現(xiàn)在如何在你的站點(diǎn)上使用HTML 5
2. HTML 5視頻標(biāo)簽全屬性詳解
3. 為網(wǎng)站提速 探秘HTML 5鏈接預(yù)取功能
4. 主流瀏覽器CSS 3和HTML 5兼容清單
5. 從零開始構(gòu)建HTML 5 Web頁(yè)面