HTML5學前熱身 實用技巧及應用詳解

十八、視頻預載(Preload Videos)

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

<videopreload> 

十九、顯示控制條

如果你使用過上面的每一個提到的技術點，你可能已經注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。為了渲染出播放控制條，我們必須在video元素內指定controls屬性。

<video preload controls> 

請注意，不同瀏覽器渲染出來的進度條的模樣都是不一樣的。

二十、正則表達式

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

<formactionformaction=""method="get"> 
<labelforlabelfor="username">姓名:</label> 
<inputidinputid="username"name="username"type="text"placeholder="4-10個英文字母"pattern="[A-Za-z]{4,10}"required="required"autofocus/> 
<buttontypebuttontype="submit">提交</button> 
</form> 

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

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

二十一、屬性支持檢測

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

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

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

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

謹記此方法依賴于JavaScript。

二十二、mark元素(MarkElement)

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

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

二十三、什么時候使用div

我們有些人開始質問到底何時該使用div。現在我們可以使用header,article,section,和footer，還有機會使用div嗎?當然可以。

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

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

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

二十五、哪些不是HTML 5？

那些僅憑自己的假設形象將JavaScript變少的過渡被全部歸為HTML 5的人是可以理解的，甚至蘋果無意中推動這一想法。對于非開發人員，誰管這個呢，它是一個簡單的方法適用于現代網頁標準。不過，對于我們來說，盡管它可能只是語義，重要的是要準確理解什么不是HTML 5。

不管你需求有多大的區別，所有這些技術可以歸為現代網絡堆棧。事實上，不少這些分支規范的管理著還是同一人。