HTML5學(xué)前熱身 實(shí)用技巧及應用詳解

十八、視頻預載(Preload Videos)

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

<videopreload> 

十九、顯示控制條

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

<video preload controls> 

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

二十、正則表達式

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

<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> 

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

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

二十一、屬性支持檢測

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

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

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

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

謹記此方法依賴(lài)于JavaScript。

二十二、mark元素(MarkElement)

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

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

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

我們有些人開(kāi)始質(zhì)問(wèn)到底何時(shí)該使用div?，F在我們可以使用header,article,section,和footer，還有機會(huì )使用div嗎?當然可以。

例如，如果你發(fā)現你需要包裹一段代碼塊在對內容定位處理的包裝單元內。不過(guò)如果你是包裹一個(gè)博客文章，或者，可能是，底部的鏈接列表，則需考慮分別使用和元素，因為其更具語(yǔ)義。

二十四、什么可以開(kāi)始立即使用

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

二十五、哪些不是HTML 5？

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

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