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