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

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

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

<videopreload> 

十九、顯示控制條

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

<video preload controls> 

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

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

你發(fā)現(xiàn)自己多久匆匆編寫(xiě)一些正則表達(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ū)分大小寫(xiě)的英文字母。如果瀏覽器支持pattern屬性，則提交表單時(shí)，如果文本框中的內(nèi)容不符合其正則表達(dá)式，文本框會(huì)高亮顯示。如下圖所示。

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

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

如果我們沒(méi)有方法檢測(cè)瀏覽器是否支持這些屬性，這些就不能稱(chēng)之為好的屬性。第一個(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è)拉小提琴的女孩，原來(lái)她叫做<mark>北川景子</mark>。  
</p> 

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

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

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

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

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

二十五、哪些不是HTML 5？

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

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