【正文】 例如，如果你想在一個(gè)元素里將一段代碼包裹住，特別是為了內(nèi)容的定位， div 將會(huì)是非常理想的選擇。 JavaScript Code 復(fù)制內(nèi)容到剪貼板 script if (!’pattern’ in (‘input’) ) { // do client/server side validation } /script 記 住，這將需要依靠 JavaScript 來(lái)實(shí)現(xiàn)！ 21. Mark 元素 mark 元素的主要功能就是在頁(yè)面中高亮顯示那些需要在視覺(jué)上向用戶突出其重要性的文字。 實(shí)際上，這是確定瀏覽器兼容性的一種非常常用的方法。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 form method=post action=” label for=”username”create a username: /label input id=” username” type=” text” name=” username” placeholder=” 4 10″ required=”required” autofocus=” autofocus” pattern=” [AZaz]{4,10}” button type=”submit”Go /button /form 如果你比較熟悉正則表達(dá)式的話就會(huì)注意到這個(gè)新模式 : [AZaz]{4,10}只接受大小寫字母。你可以通過(guò)設(shè)置 preload=” preload”來(lái)預(yù)先加載視頻，或者之間添加 preload 也可以。盡管 Safari 和 IE9 可以支持 格式的視頻， Firefox 和 Opera 卻仍然堅(jiān)持 Theora 和 Vorbis 格式。請(qǐng)注意， IE 并不支持它， Opera 10 或更低的版本只支持 .wav 文件。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 audio autoplay=”autoplay” controls=”controls” source src=”” / source src=” ″ / a href=” ″ Download this file./a /audio 說(shuō)道音頻格式， Mozilla 和 Webkit 都還沒(méi)有完全支持。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus 15. 音頻支持 我們?cè)僖膊恍枰揽康谌讲寮?lái)提供音頻了。用了這行代碼之后，并且瀏覽器支持 required 屬性的話， 輸入空白的表單就不會(huì)被提交。 12. 群組標(biāo)題（ hgroup） 假設(shè)一個(gè)網(wǎng)站有名稱、副標(biāo)題分別用 h h2標(biāo)簽來(lái)標(biāo)記，在 HTML4 中 還沒(méi)有一種能夠?qū)烧咧g的關(guān)系用很好的語(yǔ)義關(guān)系來(lái)描述的方法，此外，當(dāng)使用 h2 在頁(yè)面中顯示其它標(biāo)題時(shí)，在層級(jí)方面問(wèn)題就更多。 (“header”)。它們只是代表它們的容 器。盡管不是所有的瀏覽器都支持，但是最關(guān)鍵的 Inter Explorer 8, Safari 4, Firefox 。 第 06 節(jié)、 必須知道的 22 個(gè)學(xué)習(xí) HTML5 的技巧 (二 ) 8. 占位符 此前，我們需要使用 JavaScript 來(lái)創(chuàng)建文本框的占位符。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 !DOCTYPE html html lang=”en” head meta charset=” utf8″ titleuntitled/title /head body form action=” method=”get” label for=””Email:/label input id=”” name=”” type=”” / button type=”submit” Submit Form /button /form /body /html 在說(shuō)到瀏覽器所支持和不支持的元素以及屬性 時(shí)，你必需知道當(dāng)前所有瀏覽器都不是那么可靠。它的用途非常廣，如，簡(jiǎn)單的任務(wù)清單或是基于 wiki 的站點(diǎn)也非常實(shí)用，此外，它還有一個(gè)優(yōu)勢(shì)就是利用了本地的存儲(chǔ)。因此，我們可以將它們的類型屬性都刪除掉。不過(guò)，現(xiàn)在 HTML5 修改了這個(gè)用法， small元素被重新定義了，或者更恰當(dāng)?shù)卣f(shuō)，它現(xiàn)在用來(lái)代表小字或其他邊注（如，網(wǎng)站底部的版權(quán)聲明）。（注意：你的 doctype 的申明需要出現(xiàn)在你 html文件的第一行。 您可以狠狠地點(diǎn)擊這里： HTML5 range input 炫酷效果 demo 第 05 節(jié)、 必須知道的 22 個(gè)學(xué)習(xí) HTML5 的技巧 (一 ) 互聯(lián)網(wǎng)科技發(fā)展的速度真可謂驚人的快，一個(gè)稍不留神，你就可能無(wú)法跟上它的步伐。 }, false)。在現(xiàn)代瀏覽器上刷新并檢測(cè)。)。text39。)。result39。 然后，下次用戶刷新頁(yè)面的時(shí)候，選擇的區(qū)域和值會(huì)自動(dòng)地設(shè)置成他們最后一次選擇。 fontweight: bold。 } input[type=range]:after { content: attr(max)。 input { fontsize: 14px。 二十八、使用區(qū)域 input 創(chuàng)建滑塊 (Create Sliders with the Range Input) HTML5 引進(jìn)了 range 類型的 input。你的瀏覽器尚未準(zhǔn)備好！ 39。].value = 15。 ) { (39。 if ( typeof f[39。 } HTML 代碼： a datahoverresponse=我說(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)用”這篇文章。 } .data_custom:hover:after { content: attr(datahoverresponse)。 alert(attr)。)。然而，以前，我們可能會(huì)這樣： h1 id=someId customAttribute=value 小樣，膽兒挺肥的呢 /h1 ?校驗(yàn)器會(huì)小題大做！但是現(xiàn)在，只要我們以” data”為前綴定義我們的自定義屬性，盜版屬性立馬變成正牌的了。 Web Sockets:不是 HTML5，同樣的，有著自己的一套準(zhǔn)則。 CSS3:不是 HTML5，它是? CSS。 二十五、哪些不是 HTML5(What is Not HTML5) 那些僅憑自己的假設(shè)形象將 JavaScript 變少的過(guò)渡被全部歸為 HTML5 的人是可以理解的，嘿，甚至蘋果無(wú)意中推動(dòng)這一想法。 二十四、什么可以開(kāi)始立即使用 一直談?wù)摰浆F(xiàn)在的 HTML5 要到 2022 年才能全部完成，許多人完全忽視它，這是個(gè)巨大的錯(cuò)誤?，F(xiàn)在我們可以使用 header, article, section, 和footer，還有機(jī)會(huì)使用 div?嗎？當(dāng)然可以。此標(biāo)簽包裹的字符串應(yīng)該與用戶當(dāng)前的行動(dòng)相關(guān)聯(lián)。 in (39。如果是，瀏覽器則支持此功能。) )。例如，在我們前面的例子，如果我們要確定瀏覽器是否能使用 pattern 的屬性，我們可以添加一小段 JavaScript 到我們的頁(yè)面上： alert( 39。 如果您對(duì)正則表達(dá)式概念模糊了，可以參見(jiàn)這里。 form action= method=get label for=username姓名 :/label input id=username name=username type=text placeholder=410 個(gè)英文字母 pattern=[AZaz]{4,10} required=required autofocus / button type=submit提 交/button /form 如果你熟悉正則表達(dá)式，那么應(yīng)該清楚 [AZaz]{4,10}表示接受 410 位不區(qū)分大小寫的英文字母。為了渲染出播放控制條，我們必須在 video 元素內(nèi)指定 controls 屬性。如果訪問(wèn)者訪問(wèn)一個(gè)專門展示了一個(gè)視頻的頁(yè)面，你一定要預(yù)載的視頻，節(jié)約參觀者等待的一部分時(shí)間。 controls 和 preload 屬性就會(huì)在下面提及。節(jié)省一些帶寬，還是你自己聲明下吧。 39。 video controls preload source src= type=video/ogg。 十七、 Video 支持 與 audio元素很類似，在新的瀏覽器中也存在 Video！事實(shí)上，就在最近， YouTube 宣告了新的 HTML5 視頻嵌入，當(dāng)然，是為支持此功能瀏覽器。 audio autoplay=autoplay controls=controls source src= / source src= / a href=Download this file./a /audio Mozilla 和 WebKit 的還沒(méi)有完全相處，當(dāng)涉及到音頻格式， Firefox 會(huì)希望看到一個(gè) .ogg文件，而 WebKit 的瀏覽器支持 .mp3 擴(kuò)展。 十六、 Audio 支持 我們無(wú)需再依賴第三方插件區(qū)渲染音頻。 //zxx:貌似僅在Chrome 瀏覽器下有點(diǎn)小效果 十五、 Autofocus 屬性 同樣， HTML5 的解決方案消除了對(duì) JavaScript 的需要。 input type=text name=someInput required 或者，使用更結(jié)構(gòu)化的方法： input type=text name=someInput required=required 兩種方法都行。此外，一個(gè) h2 標(biāo)記的使用提出了更多的問(wèn)題，在層次結(jié)構(gòu)上，當(dāng)涉及到其他網(wǎng)頁(yè)上顯示的標(biāo)題時(shí)。為了更簡(jiǎn)單將此應(yīng)用到每個(gè)新的應(yīng)用過(guò)程中，雷米夏普 (Remy Sharp)創(chuàng)建了一個(gè)腳本，通常稱為 HTML5 shiv。 (hgroup)。 } 不幸的是， IE 仍舊忽略這些樣式，因?yàn)樗恢肋@些標(biāo)簽從哪里來(lái)的，好比是 header元素。因此，將博客底部的，例如，元信息放在 footer 元素內(nèi)部是說(shuō)得通的?，F(xiàn)在，通過(guò) HTML5，我們可以使用 header和 footer元素。建議全