【文章內容簡介】 我們無需再依賴第三方插件區(qū)渲染音頻。 HTML5 提供了 audio元素，嗯，至少，最終，我們將不必擔心這些插件。就目前，只有最近期的的瀏覽器提供 HTML5 音頻支持。在這個時候，它仍然是一個很好的做法提供一些向后兼容的形式。 audio autoplay=autoplay controls=controls source src= / source src= / a href=Download this file./a /audio Mozilla 和 WebKit 的還沒有完全相處，當涉及到音頻格式， Firefox 會希望看到一個 .ogg文件，而 WebKit 的瀏覽器支持 .mp3 擴展。這意味著，至少在現(xiàn)在，你應該創(chuàng)建兩個版本的音頻。 當 Safari 加載頁面時，它不會承認 .ogg 格式，會跳過它并移動到的 MP3 版本，因此。請注意 IE，每往常一樣，不支持這些格式， Opera 10 和以及以下版本只能使用 .wav 文件。 十七、 Video 支持 與 audio元素很類似，在新的瀏覽器中也存在 Video！事實上，就在最近， YouTube 宣告了新的 HTML5 視頻嵌入，當然，是為支持此功能瀏覽器。因為 HTML5 的規(guī)范沒有指定特定的視頻編解碼器，它留給了瀏覽器來決定。雖然 Safari 和 Inter Explorer9 可以預期支持 格式的視頻（其中 Flash 播放器可以播放）， Firefox 和 Opera 是堅持開源 Theora 和 Vorbis 格式。因此，當顯示 HTML5 的視頻，您必須提供這兩種格式。 video controls preload source src= type=video/ogg。 codecs=39。vorbis, theora39。 / source src= type=video/mp4。 39。codecs=39。, 39。 / p Your browser is old. a href=Download this video instead./a /p /video 無論是” ogg”格式還是” mp4″格式的視頻 Chrome 瀏覽器都能正確編碼 還有一個值得注意的一些事情： 我們技術上不需要來設置 type 屬性，但是，如果我們不這樣做，瀏覽器不得不自己去尋找類型。節(jié)省一些帶寬，還是你自己聲明下吧。 不是所有的瀏覽器理解 HTML5 視頻。在資源元素的下面，我們可以提供一個下載鏈接 ，或嵌入視頻的 Flash 版本代替。這取決于你。 controls 和 preload 屬性就會在下面提及。 有方法可以讓所有的瀏覽器支持 video 標簽，具體參見我前面的“讓所有瀏覽器支持HTML5 video 視頻標簽”一文。 十八、視頻預載 (Preload Videos) 預載屬性不完全是你想的那個樣子，雖然，你應該先決定是否要在瀏覽器預裝的視頻。是否有必要？或許吧。如果訪問者訪問一個專門展示了一個視頻的頁面，你一定要預載的視頻，節(jié)約參觀者等待的一部分時間。影片可以通過設置 preload=” preload”或 是簡單地添加 preload 進行預載。我更喜歡后者的解決方案，它少了一點多余的東西。 video preload 十九、顯示控制條 如果你使用過上面的每一個提到的技術點，你可能已經注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。為了渲染出播放控制條，我們必須在 video 元素內指定 controls 屬性。 video preload controls 請注意，不同瀏覽器渲染出來的進度條的模樣都是不一樣的。 二十、正則表達式 你發(fā)現(xiàn)自己多久匆匆編寫一些正則表達式驗證一個特定的文本 。多虧了新的 pattern 屬性，我們可以在標簽處直接插入一個正則表達式。 form action= method=get label for=username姓名 :/label input id=username name=username type=text placeholder=410 個英文字母 pattern=[AZaz]{4,10} required=required autofocus / button type=submit提 交/button /form 如果你熟悉正則表達式，那么應該清楚 [AZaz]{4,10}表示接受 410 位不區(qū)分大小寫的英文字母。如果瀏覽器支持 pattern 屬性，則提交表單時，如果文本框中的內容不符合其正則表達式，文本框會高亮顯示。如下圖所示。 您可以狠狠地點擊這里： HTML5 正則表達式 Demo //zxx:我自己小測了下，貌似目前只在 Chrome 下有效 (win 系統(tǒng) ) 注意到，我們已經開始組合使用這些很棒的屬性。 如果您對正則表達式概念模糊了，可以參見這里。 二十一、屬性支持檢測 如果我們沒有方法檢測瀏覽器是否支持這些屬性，這些就不能稱之為好的屬性。恩，不錯的觀點，事實上我們是有幾種方法的，這里我們討論 2 個。第一個是利用優(yōu)秀的Modernizr 庫，或者，我們可以創(chuàng)建和分析這些元素，以確定瀏覽器的能力。例如，在我們前面的例子，如果我們要確定瀏覽器是否能使用 pattern 的屬性，我們可以添加一小段 JavaScript 到我們的頁面上： alert( 39。pattern39。 in (39。input39。) )。 // boolean 事實上，這是一種確定瀏覽器兼容的常用方法。 jQuery 庫了利用這種伎倆。在上面，我們創(chuàng)建了一個新的 input 元素，并確定了里面的 pattern 屬性瀏覽器是否認得。如果是，瀏覽器則支持此功能。否則，當然就不支持了。 script if (!39。pattern39。 in (39。input39。) ) { // do client/server side validation } /script 謹記此方法依賴于 JavaScript。 二十二、 mark 元素 (Mark Element ) 試想 mark元素作為高亮。此標簽包裹的字符串應該與用戶當前的行動相關聯(lián)。例如，我在一些博客上搜索“北川景子”，我就可以使用一些 JavaScript 將當前的每個結果字符串用 mark 標簽包裹。 h3 搜索結果 /h3 p 我很喜歡《零秒出手》里面那個拉小提琴的女孩，原來她叫做 mark北川景子/mark。 /p 二十三、什么時候使用 div 我們有些人開始質問到底何時該使用 div。現(xiàn)在我們可以使用 header, article, section, 和footer，還有機會使用 div?嗎？當然可以。 div 應該用在沒有更好的元素的時候。 例如，如果你發(fā)現(xiàn)你需要包裹一段代碼塊在對內容定位處理的包裝單元內。不過如果你是包裹一個博客文章，或者，可能是，底部的鏈接列表，則需考慮分別使用 article和nav元素，因為其更具語義。 二十四、什么可以開始立即使用 一直談論到現(xiàn)在的 HTML5 要到 2022 年才能全部完成，許多人完全忽視它，這是個巨大的錯誤。事實上，有少量的 HTML5 的功能，我們可以在我們所有的項目中使用！更簡單，更干凈的代碼總是一件好事。在今天的視頻快速展示的技巧中，我將告訴你一些可用的選項。 //zxx:YouTuBe 視頻，需要翻墻。 二十五、哪些不是 HTML5(What is Not HTML5) 那些僅憑自己的假設形象將 JavaScript 變少的過渡被全部歸為 HTML5 的人是可以理解的，嘿，甚至蘋果無意中推動這一想法。對于非開發(fā)人員，誰管這個呢，它是一個簡單的方法適用于現(xiàn)代網頁標準。不過，對于我們來說，盡管它可能只是語義，重要的是要準確理解什么不是 HTML5。 SVG:不是 HTML5，至少 5 歲了。 CSS3:不是 HTML5，它是? CSS。 Geolocation:不是 HTML5.//zxx:Geolocation（地理位置）：通過 HTML 5，您應該能夠使Web 應用程序可確定您的位置，并為您提供更多的相關信息。 Client Storage(客戶端存儲 ):非 HTML5，雖說有一點切合，但被排除在規(guī)范之外，原因在于，擔憂其作為一個整體，會變得過于復雜。它現(xiàn)在有自己的規(guī)范。 Web Sockets:不是 HTML5，同樣的，有著自己的一套準則。 不管你需求有多 大的區(qū)別，所有這些技術可以歸為現(xiàn)代網絡堆棧。事實上，不少這些分支規(guī)范的管理著還是同一人。 二十六、 data 屬性 (The Data Attribute) 我們現(xiàn)在可以很正式地讓所有的 HTML 元素支持自定義屬性。然而，以前，我們可能會這樣： h1 id=someId customAttribute=value 小樣，膽兒挺肥的呢 /h1 ?校驗器會小題大做！但是現(xiàn)在，只要我們以” data”為前綴定義我們的自定義屬性，盜版屬性立馬變成正牌的了。如果你發(fā)現(xiàn)你曾經把一個重要的數(shù)據附加在諸如 class 的屬 性上，可能為了 JavaScript 之用，那么，本屬性將大有幫助啊。 HTML 片段 div id=myDiv datacustomattr=My Value 巴拉巴拉， lady 嘎嘎 /div 檢索自定義屬性的價值 var theDiv = (39。myDiv39。)。 var attr = (39。datacustomattr39。)。 alert(attr)。 // My Value 此屬性還可以用在 CSS 中，例如下面這個有些傻里傻氣的 CSS 文字改變的例子： CSS 代碼： .data_custom { display:inlineblock。 position: relative。 } .data_custom:hover { color: transparent。 } .data_custom:hover:after { content: attr(datahoverresponse)。 color: black。 position: absolute。 left: 0。 } HTML 代碼： a datahoverresponse=我說過不要碰我！ href=不要碰我，雅蠛蝶~~/a 如果你的瀏覽器支持 after 偽類，以及 content 的 attr 屬性，則可以看到類似下面的效果(IE8 不一樣 )： 要查看上圖所示的效果，您可以狠狠地點擊這里： CSS 與 HTML5 自定義屬性 demo