国产成人a在一区线观看高清,国产亚洲成av人片在线观黄桃

HTML5編輯器mac版V1.2.0

類型：Mac編程軟件大小：7.5M語(yǔ)言：中文評(píng)分：10.0
標(biāo)簽：

立即下載

前端的發(fā)展如此之迅猛，一不留神，大俠你可能就會(huì)被遠(yuǎn)遠(yuǎn)地甩在后面了。如果你不想被HTML5的改變/更新攪得不知所措的話，可以把本文的內(nèi)容作為必須了解的熱身課程。

一、新的Doctype
//zxx:”doctype”中文意思指“文檔類型”
仍在使用麻煩的，不可能記得住的XHTML文檔類型？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">如果是，為什么還在用呢？使用新的HTML5文檔類型代替吧。你會(huì)活得更久的——正如Douglas Quaid說(shuō)的

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

二、圖形元素(The Figure Element )
看看下面給圖片添加的標(biāo)示：

<img src="path/to/image" alt="About image" /><p>Image of Mars. </p> 文字裹在p標(biāo)簽里，與img標(biāo)簽各行其道，很難讓人聯(lián)想到這就是標(biāo)題。HTML5通過(guò)采用<figure>元素對(duì)此進(jìn)行了改正。當(dāng)合<figcaption>元素組合使用時(shí)，我們就可以語(yǔ)義化地聯(lián)想到這就是圖片相對(duì)應(yīng)的標(biāo)題

<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption></figure>三、<small>重新定義
還在不久前，<small>元素被用來(lái)創(chuàng)建靠近logo且相關(guān)的副標(biāo)題。這是個(gè)很有用的表現(xiàn)元素，但是，現(xiàn)在，這種用法可能就不正確了。<small>元素已經(jīng)被重新定義了，指小字，因而更具可用性。試想下你網(wǎng)站底部的版權(quán)狀態(tài)，根據(jù)對(duì)此元素新的HTML5定義，<small>可以正確地包裹這些信息。

small元素專指“小字”。

四、腳本(scripts)和鏈接(links)無(wú)需type
您可能現(xiàn)在仍在給link和script標(biāo)簽增加type屬性。

<p class=myClass id=someId> Start the reactor. 對(duì)此取舍你還得自己拿主意。如果你更傾向于結(jié)構(gòu)化的文檔，就算天塌下來(lái)，也要把引號(hào)牢牢拽在懷里。

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

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

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

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

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

您可以狠狠地點(diǎn)擊這里：HTML5郵箱內(nèi)置驗(yàn)證demo

//zxx:經(jīng)我小測(cè)了下，貌似僅在Chrome瀏覽器下有效果(xp系統(tǒng))，當(dāng)輸入內(nèi)容不是合法郵箱格式，點(diǎn)擊“確定”按鈕是沒(méi)有反應(yīng)的；當(dāng)輸入為合法郵箱，點(diǎn)擊“確定”按鈕才會(huì)提交刷新頁(yè)面。

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

八、占位符(Placeholders)
//zxx:此處內(nèi)容非直譯，有刪改
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)屬性，一切就輕松了。

<label for="email">郵箱:</label><input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />根據(jù)我的測(cè)試，目前僅webkit核心的瀏覽器支持placeholders屬性，像是Chrome5，Safari4，結(jié)果如下所示：

您可以狠狠地點(diǎn)擊這里：HTML5占位符Demo

九、本地存儲(chǔ)(Local Storage)
多虧了本地存儲(chǔ)(非正式的HTML5，本著方便歸納的目的)，我們可以讓高級(jí)瀏覽器記住我們的編輯后的內(nèi)容，即使瀏覽器被關(guān)掉或是頁(yè)面刷新。
//zxx:所以，這里展示來(lái)自另外一個(gè)網(wǎng)站的video。建議全屏觀看，以看清其中的HTML與JavaScript代碼

//zxx:根據(jù)視頻內(nèi)容，我自己做了個(gè)demo，關(guān)于本地存儲(chǔ)的。

您可以狠狠地點(diǎn)擊這里：HTML5本地存儲(chǔ)Demo

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

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

十、語(yǔ)義的Header和Footer
那些過(guò)往的日子：

<div id="header"> ...</div><div id="footer"> ...</div>div嘛，很自然的，沒(méi)有語(yǔ)義化的結(jié)構(gòu)——即使在應(yīng)用了id后�，F(xiàn)在，通過(guò)HTML5，我們可以使用<header>和<footer>元素。以上的代碼可以替換成：

它完全適合您有多個(gè)頁(yè)眉和頁(yè)腳的項(xiàng)目。

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

十一、更多HTML5表單特征(More HTML5 Form Features )
通過(guò)下面視頻學(xué)習(xí)更多有用的HTML5表單特征

Subscribe to our YouTube page to watch all of the video tutorials!

十二、IE和HTML5(Internet Explorer and HTML5)
不幸的是，討厭的IE瀏覽器需要?jiǎng)狱c(diǎn)小手術(shù)才能理解新的HTML5元素。

所有元素，默認(rèn)的，都有個(gè)inline的display

為了確保所有新的HTML5元素能以block水平的元素正確地渲染，有必要對(duì)其做如下定義：

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

不幸的是，IE仍舊忽略這些樣式，因?yàn)樗恢肋@些標(biāo)簽從哪里來(lái)的，好比是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)用過(guò)程中，雷米夏普(Remy Sharp)創(chuàng)建了一個(gè)腳本，通常稱為HTML5 shiv。該腳本同樣修復(fù)了些顯示問(wèn)題。

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

<header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup></header>十四、必要的屬性(Required Attribute )
表單允許新的必要屬性，用來(lái)指定是否需要特殊的input。這取決于你的代碼偏好，你可以以下面兩種方式之一申明此屬性。

<input type="text" name="someInput" required>或者，使用更結(jié)構(gòu)化的方法：
<input type="text" name="someInput" required="required">兩種方法都行。有了這個(gè)代碼，并且瀏覽器支持此屬性，如果“someInput”文本框是空白，則表單不會(huì)被提交。下面是一個(gè)簡(jiǎn)單的例子，我們還將添加占位符屬性，因?yàn)闆](méi)有理由不這樣做。

<form action="" method="get"> <label for="name">姓名:</label> <input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" /> <button type="submit">提交</button></form>您可以狠狠地點(diǎn)擊這里：HTML5必要屬性Demo

如果input里面內(nèi)容是空白，則表單提交的時(shí)候，文本框會(huì)高亮顯示。//zxx:貌似僅在Chrome瀏覽器下有點(diǎn)小效果

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

<input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>有趣的是，雖然我個(gè)人更傾向于喜歡XHTML的方法（用引號(hào)，等等），寫作“autofocus=autofocus”讓人感到有點(diǎn)怪。因此，我們將堅(jiān)持使用單一關(guān)鍵字的方法。

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

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

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

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

十七、Video支持
與<audio>元素很類似，在新的瀏覽器中也存在Video！事實(shí)上，就在最近，YouTube宣告了新的HTML5視頻嵌入，當(dāng)然，是為支持此功能瀏覽器。因?yàn)镠TML5的規(guī)范沒(méi)有指定特定的視頻編解碼器，它留給了瀏覽器來(lái)決定。雖然Safari和Internet Explorer9可以預(yù)期支持H.264格式的視頻（其中Flash播放器可以播放），F(xiàn)irefox和Opera是堅(jiān)持開源Theora 和Vorbis格式。因此，當(dāng)顯示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>還有一個(gè)值得注意的一些事情：

我們技術(shù)上不需要來(lái)設(shè)置type屬性，但是，如果我們不這樣做，瀏覽器不得不自己去尋找類型。節(jié)省一些帶寬，還是你自己聲明下吧。
不是所有的瀏覽器理解HTML5視頻。在資源元素的下面，我們可以提供一個(gè)下載鏈接，或嵌入視頻的Flash版本代替。這取決于你。
controls和preload屬性就會(huì)在下面提及。
有方法可以讓所有的瀏覽器支持video標(biāo)簽，具體參見(jiàn)我前面的“讓所有瀏覽器支持HTML5 video視頻標(biāo)簽”一文。
十八、視頻預(yù)載(Preload Videos)
預(yù)載屬性不完全是你想的那個(gè)樣子，雖然，你應(yīng)該先決定是否要在瀏覽器預(yù)裝的視頻。是否有必要？或許吧。如果訪問(wèn)者訪問(wèn)一個(gè)專門展示了一個(gè)視頻的頁(yè)面，你一定要預(yù)載的視頻，節(jié)約參觀者等待的一部分時(shí)間。影片可以通過(guò)設(shè)置 preload=”preload”或是簡(jiǎn)單地添加preload進(jìn)行預(yù)載。我更喜歡后者的解決方案，它少了一點(diǎn)多余的東西。

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

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

<form action="" method="get"> <label for="username">姓名:</label> <input id="username" name="username" type="text" placeholder="4-10個(gè)英文字母" pattern="[A-Za-z]{4,10}" required="required" autofocus /> <button type="submit">提交</button></form>如果你熟悉正則表達(dá)式，那么應(yīng)該清楚[A-Za-z]{4,10}表示接受4-10位不區(qū)分大小寫的英文字母。如果瀏覽器支持pattern屬性，則提交表單時(shí)，如果文本框中的內(nèi)容不符合其正則表達(dá)式，文本框會(huì)高亮顯示。如下圖所示。
您可以狠狠地點(diǎn)擊這里：HTML5正則表達(dá)式Demo

//zxx:我自己小測(cè)了下，貌似目前只在Chrome下有效(win系統(tǒng))

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

如果您對(duì)正則表達(dá)式概念模糊了，可以參見(jiàn)這里。

二十一、屬性支持檢測(cè)
如果我們沒(méi)有方法檢測(cè)瀏覽器是否支持這些屬性，這些就不能稱之為好的屬性。恩，不錯(cuò)的觀點(diǎn)，事實(shí)上我們是有幾種方法的，這里我們討論2個(gè)。第一個(gè)是利用優(yōu)秀的Modernizr庫(kù)，或者，我們可以創(chuàng)建和分析這些元素，以確定瀏覽器的能力。例如，在我們前面的例子，如果我們要確定瀏覽器是否能使用pattern的屬性，我們可以添加一小段JavaScript到我們的頁(yè)面上：

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

二十二、mark元素(Mark Element )
試想<mark>元素作為高亮。此標(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è)拉小提琴的女孩，原來(lái)她叫做 <mark>北川景子</mark>。 </p>二十三、什么時(shí)候使用div
我們有些人開始質(zhì)問(wèn)到底何時(shí)該使用div�，F(xiàn)在我們可以使用header, article, section,和footer，還有機(jī)會(huì)使用div…嗎？當(dāng)然可以。

div應(yīng)該用在沒(méi)有更好的元素的時(shí)候。

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

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

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

Subscribe to our YouTube page to watch all of the video tutorials!

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

SVG:不是HTML5，至少5歲了。
CSS3:不是HTML5，它是…CSS。
Geolocation:不是HTML5.//zxx:Geolocation（地理位置）：通過(guò)HTML 5，您應(yīng)該能夠使Web應(yīng)用程序可確定您的位置，并為您提供更多的相關(guān)信息。
Client Storage(客戶端存儲(chǔ)):非HTML5，雖說(shuō)有一點(diǎn)切合，但被排除在規(guī)范之外，原因在于，擔(dān)憂其作為一個(gè)整體，會(huì)變得過(guò)于復(fù)雜。它現(xiàn)在有自己的規(guī)范。
Web Sockets:不是HTML5，同樣的，有著自己的一套準(zhǔn)則。
不管你需求有多大的區(qū)別，所有這些技術(shù)可以歸為現(xiàn)代網(wǎng)絡(luò)堆棧。事實(shí)上，不少這些分支規(guī)范的管理著還是同一人。

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

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

HTML片段

<div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉，lady 嘎嘎 </div>
檢索自定義屬性的價(jià)值

HTML代碼：<a class="data_custom" data-hover-response="我說(shuō)過(guò)不要碰我！" href="#">不要碰我，雅蠛蝶~~</a>

如果你的瀏覽器支持after偽類，以及content的attr屬性，則可以看到類似下面的效果(IE8不一樣)：

要查看上圖所示的效果，您可以狠狠地點(diǎn)擊這里：CSS與HTML5自定義屬性demo

還有，content屬性其實(shí)是一個(gè)非常強(qiáng)大的屬性，由于低版本的IE不支持，所以此屬性尚未流行，關(guān)于content內(nèi)容生成技術(shù)，可以參見(jiàn)我之前的“CSS content內(nèi)容生成技術(shù)以及應(yīng)用”這篇文章。

二十七、Output元素
正如你可能預(yù)料到的，output元素被用來(lái)顯示部分計(jì)算，例如，如果你想顯示一個(gè)鼠標(biāo)的位置，或者是一系列數(shù)字的總和坐標(biāo)，這個(gè)數(shù)據(jù)應(yīng)被插入到output元素中。

舉個(gè)簡(jiǎn)單的例子，當(dāng)提交按鈕被按下，我們用JavaScript將兩個(gè)數(shù)字相加值插入到空的output中。

<form action="" method="get">
<p>
10 + 5 = <output name="sum"></output>
</p>
<button type="submit">計(jì)算</button>
</form>
(function() {
var f = document.forms[0];
if ( typeof f['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)擊這里：HTML5結(jié)果輸出框demo

此元素也可以接受一個(gè)屬性，它反映了輸出相關(guān)元素的名稱，類似label工作原理。

二十八、使用區(qū)域input創(chuàng)建滑塊(Create Sliders with the Range Input)
HTML5引進(jìn)了range類型的input。

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

參見(jiàn)下面的快速演示：

第一步：標(biāo)簽

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

<form method="post"> <h4>音量控制</h4> <input type="range" name="range" min="0" max="10" step="1" value="" /> <output name="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í)range input，如果不，顯示提示。
當(dāng)用戶移動(dòng)滑塊的時(shí)候，動(dòng)態(tài)改變output的值。
監(jiān)聽(tīng)，當(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è)置初始值 // 無(wú)論是否本地存儲(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);})();您可以狠狠地點(diǎn)擊這里：HTML5 range input炫酷效果demo

感謝您的閱讀！我們已經(jīng)討論了很多，但可能只是觸及到HTML5的皮毛，全當(dāng)拋磚引玉，希望能對(duì)您的學(xué)習(xí)有所幫助！

//zxx:以上是翻譯/編輯的全部?jī)?nèi)容，內(nèi)容已經(jīng)夠多了，我就不多說(shuō)什么了。