22個(gè)HTML 5第三講
22個(gè)HTML5 第三講：我們繼續(xù)講解HTML5的技巧。
16. 視頻支持
音頻元素 <audio>非常像，在新的瀏覽器上也支持HTML5視頻。事實(shí)上，就在最近YouTube宣布了一項(xiàng)新的 HTML5視頻嵌入?？上У氖牵捎贖TML5說明文件并沒有為視頻指出某個(gè)特定的編碼器，所以都主要取決于瀏覽器來決定了。盡管Safari和IE9可以支持H.264 格式的視頻，F(xiàn)irefox 和Opera卻仍然堅(jiān)持Theora 和Vorbis格式。因此，顯示HTML5視頻的時(shí)候，你必須提供兩種格式。
17. 視頻預(yù)先加載
你首先需要決定是否需要瀏覽器來預(yù)先加載視頻。是否有需要？假設(shè)，一個(gè)訪客進(jìn)入某個(gè)專門用來顯示視頻的頁面，那么就非常有必要預(yù)先加載這個(gè)頁面節(jié)省一點(diǎn)等待的時(shí)間。你可以通過設(shè)置 preload=”preload”來預(yù)先加載視頻，或者之間添加preload也可以。
- <Video preload>
- …
- </video >
18. 顯示控件
你可能已經(jīng)注意到，用上面的代碼的話，視頻將只會(huì)顯示成一個(gè)圖片，而沒有任何可控制的元件。為了獲取這些播放控件，我們必需在視頻元素里指定這些控件屬性。
- <video preload controls>
- …
- </video >
19. 正則表達(dá)式
對虧了新模式的屬性，我們可以直接在代碼中插入一個(gè)正則表達(dá)式。
- <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=”[A-Za-z]{4,10}”>
- <button type=”submit”>Go </button>
- </form>
如果你比較熟悉正則表達(dá)式的話就會(huì)注意到這個(gè)新模式: [A-Za-z]{4,10}只接受大小寫字母。這個(gè)字符串最少必需有四個(gè)字符，最多是十個(gè)字符。
20. 檢測瀏覽器對屬性的支持
前面提到過并非所有的瀏覽器都支持這些屬性，那是否有什么方法能夠判斷瀏覽器是否能夠識(shí)別它們呢？這個(gè)問題問得非常好，這里給大家介紹兩種方式，第一個(gè)選擇是使用Modernizr來檢測，或者你也可以創(chuàng)建并剖析這些元素來看看瀏覽器都有什么能力。例如，在前面的例子里，如果我們要確定瀏覽器是否能夠執(zhí)行pattern屬性，就可以在頁面上添加JavaScript:
- alert( ’pattern’ in document.createElement(‘input’) ) // boolean;
實(shí)際上，這是確定瀏覽器兼容性的一種非常常用的方法。jQuery庫利用了這個(gè)技巧。上面的代碼里，我們創(chuàng)建了一個(gè)新的輸入元素，并確認(rèn)pattern屬性是否能夠被識(shí)別。如果能夠識(shí)別的話，瀏覽器就支持這個(gè)功能，否則就不支持。
- <script>
- if (!’pattern’ in document.createElement(‘input’) ) {
- // do client/server side validation
- }
- </script>
記住，這將需要依靠 JavaScript來實(shí)現(xiàn)！
21. Mark元素
<mark> 元素的主要功能就是在頁面中高亮顯示那些需要在視覺上向用戶突出其重要性的文字。包裹在此標(biāo)簽里的字符串必須與用戶當(dāng)前的行為相關(guān)。例如，如果我在一些博客中搜索"Open your Mind" ，我可以使用在<mark>標(biāo)簽里使用JavaScript 來包裹每一次動(dòng)作。
- <h3> search results </h3>
- <h6> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </h6>
22. 何時(shí)使用<div>
是否還需要使用<div>標(biāo)簽?zāi)?？?dāng)然需要。例如，如果你想在一個(gè)元素里將一段代碼包裹住，特別是為了內(nèi)容的定位，<div> 將會(huì)是非常理想的選擇。不過，如果不是上述情況而是要包裹博客文章、或者頁腳的鏈接列表，建議你分別使用 <article>和<nav>元素。
