【正文】 不過，如果不是上述情況而是要包裹博客文章、或者頁腳的鏈接列表，建議你分別使用 article和 nav元素。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 h3 search results /h3 h6 They were interrupted, just after Quato said, mark”O(jiān)pen your Mind”/mark. /h6 22. 何時(shí)使用 div 是否還需要使用 div標(biāo)簽?zāi)?？?dāng)然需要。包裹在此標(biāo)簽里的字符串必須與用戶當(dāng)前的行為相關(guān)。如果能夠識(shí)別的話，瀏覽器就支持這個(gè)功能，否則就不支持。 jQuery 庫利用了這個(gè)技巧。例如，在前面的例子里，如果我們要確定瀏覽器是否能夠執(zhí)行 pattern 屬性，就可以在頁面上添加 JavaScript: JavaScript Code 復(fù)制內(nèi)容到剪貼板 alert( ’pattern’ in (‘input’) ) // boolean。這個(gè)字符串最少必需有四個(gè)字符，最多是十個(gè)字符。 XML/HTML Code 復(fù)制內(nèi)容到 剪貼板 video preload controls ? /video 19. 正則表達(dá)式 對(duì)虧了新模式的屬性，我們可以直接在代碼中插入一個(gè)正則表達(dá)式。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 video preload ? /video 18. 顯示控件 你可能已經(jīng)注意到，用上面的代碼的話，視頻將只會(huì)顯示成一個(gè)圖片，而沒有任何可控制的元件。是否有需 要？假設(shè)，一個(gè)訪客進(jìn)入某個(gè)專門用來顯示視頻的頁面，那么就非常有必要預(yù)先加載這個(gè)頁面節(jié)省一點(diǎn)等待的時(shí)間。因此，顯示 HTML5 視頻的時(shí)候，你必須提供兩種格式。可惜的是，由于 HTML5 說明文件并沒有為視頻指出某個(gè)特定的編碼器，所以都主要取決于瀏覽器來決定了。 第 07 節(jié)、 必須知道的 22 個(gè)學(xué)習(xí) HTML5 的技巧 (三 ) 16. 視頻支持 音頻元素 audio非常像，在新的瀏覽器上也支持 HTML5 視頻。當(dāng) Safari 加載頁面時(shí)，它認(rèn)不出 .ogg 格式的文件，將會(huì)跳過并移到mp3 版本上。 Firefox 希望看到一個(gè) .ogg 文件，Webkit 瀏覽器只支持最常見的 .mp3 擴(kuò)展名。 此時(shí)，最好還是提供一些向后兼容性。 HTML5 提供了音頻元素 audio。如果某個(gè)輸入應(yīng)該被”選擇“或被聚焦，我們現(xiàn)在可以使用 HTML 的自動(dòng)對(duì)焦 autofocus 屬性。下面是一個(gè)簡(jiǎn)單的例子，同時(shí)我們也添加了占位符屬性： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 form method=”post” action=” label for=”someInput” Your Name: /label input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required button type=”submit”Go/button /form 如果輸入是空的，表單將無法提交，突出顯示文本框。你可以依據(jù)自己寫代碼的偏好，用下面兩種不同方式來聲明這個(gè)屬性： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 input type=”text” name=”someInput” required 或者，更嚴(yán)謹(jǐn)： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 input type=”text” name=”someInput” required=”required” 上面兩行代碼都行得通。而使用群組標(biāo)題 hgroup 元素，我們可以將這些標(biāo)題聚集在一起，而不影響文檔的整個(gè)綱要。 (“menu”)。 (“hgroup”)。 (“footer”)。 11. IE 和 HTML5 IE 理解新的 HTML5 元素需要費(fèi)一定的神，為了確保新的 HTML5 元素能夠以塊級(jí)元素正確顯示，有必要將它們用下面的代碼定義風(fēng)格： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 header, footer, article, section, nav, menu, hgroup { display: block。而在 HTML5 中，我們可以使用 header和 footer元素，上面的代碼就可以替換為： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 header ? /header footer ? /footer 不過注意不要將這兩個(gè)元素與網(wǎng)站的頭部和腳部混淆起來。 10. 語義性的 Header 和 Footer XML/HTML Code 復(fù)制內(nèi)容到剪貼板 div id=”header” ? /div div id=”footer” ? /div 上面的代碼一去不復(fù)返。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 input name=”” type=”” placeholder=”” / 9. 本地存儲(chǔ) 多虧了 HTML5 的 local storage ，我們可以讓高級(jí)瀏覽器“記住”我們輸入的內(nèi)容，就算后來瀏覽器關(guān)閉或者重新刷新也不受影響。你可以初步設(shè)定值屬性來看是否合適，但是只要用戶刪除了該文本，輸入的內(nèi)容就會(huì)再次變成空的。最后，雖然你可以使用這種形式的驗(yàn)證，不過不要過分依賴它。例如， Opera 只有在你指定 name 屬性時(shí)才支持電子郵件驗(yàn)證。比較舊的瀏覽器不理解這種“電子郵件”類型，它們只會(huì)簡(jiǎn)單地返回到普通的文本框。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 !DOCTYPE html html lang=”en” head meta charset=” utf8″ titleuntitled/title /head body h2 ToDo List /h2 ul contenteditable=”true” li Break mechanical cab driver. /li li Drive to abandoned factory li Watch video of self /li /ul /body /html 或者，按照第五條技巧所說的，你也可以將第九行的代碼寫成這樣（不用引號(hào)）： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 ul contenteditable=true 7. 電子郵件輸入 如果我們應(yīng)用“電子郵件”類型來指定輸入的形式，我們可以命令瀏覽器只允許符合有效電子郵件地址結(jié)構(gòu)的字符串輸入。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 p class=myClass id=someId Start the reactor. 6. 使你的內(nèi)容可編輯 HTML5 其中一個(gè)非常強(qiáng)大的功能就是“ contenteditable”，顧名思義它將允許用戶編輯元素（包括他的子元素）內(nèi)包含的任何文本內(nèi)容。代碼如下： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 link rel=”stylesheet” href=”path/to/” / 5. 使用還是不使用引號(hào) 記住， HTML5 與 XHTML 不同，如果你不喜歡的話你不必用引號(hào)將屬性包裹起來。 意味著說這兩個(gè)標(biāo)簽分別代表著樣式和腳本。 4. 不再需要腳本、鏈接類型 很可能你仍然像下面的代碼一樣給你的鏈接和腳本標(biāo)簽添加類型的屬性。代碼如下： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 figure img src=”path/to/image” alt=”About image” / figcaption pThis is an image of something interesting. /p /figcaption /figure 3. 重新定義 small 原來你可以利用 small元素來創(chuàng)建與 logo 密切相關(guān)的副標(biāo)題。） 2. 圖形（ Figure）元素 考慮用下面的代碼來標(biāo)記圖片？ XML/HTML Code 復(fù)制內(nèi)容到剪貼板 mg src=”path/to/image” alt=”About image” / pImage of Mars. /p 很不幸，它不能用簡(jiǎn)單、富有語義關(guān)聯(lián)的方式與圖形的標(biāo)題關(guān)聯(lián)，因?yàn)樗鼉H僅是用段落標(biāo)記以及圖片元素包裹著，而 HTML5 通過引進(jìn) figure元素，改進(jìn)了這一點(diǎn)。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 !DOCTYPE html 只要這么簡(jiǎn)單的 15 個(gè)字符就可以了。HTML5 的變化和更新也壓倒不少人，這篇文章將向大家介紹一些最基本也非常必要的HTML 技巧。 })()。 // 滑動(dòng)時(shí)顯示選擇的值 (change, function() { = 。)。 )。 // 當(dāng)用戶選擇了個(gè)值，更新本地存儲(chǔ) (mouseup, function() { alert(你選擇的值是： + + . 我現(xiàn) 在正在用本地存儲(chǔ)保存此值。 // 設(shè)置初始值 // 無論是否本地存儲(chǔ)了，都設(shè)置值為 5 = cachedRangeValue。 39。 ) alert(39。 if ( === 39。 = 39。input39。], cachedRangeValue = ? : 5。], result = f[39。 (function() { var f = [0], range = f[39。 監(jiān)聽，當(dāng)用戶離開滑塊，插入值，同時(shí)本地存儲(chǔ)。 } 第三步： JavaScript 最后，我們 檢測(cè)我們的瀏覽器是否認(rèn)識(shí) range input，如果不，顯示提示。 fontsize: 。 paddingleft: 5px。 paddingright: 5px。 fontweight: bold。我們將使用 :before 和 :after 去告知用戶我們制定的最大值和最小值。 input type=range 最值得注意的是，它可以接收 min, max, step, 和 value 屬性，等等。 自己測(cè)試了下，貌似現(xiàn)在只有在 Opera 瀏覽器下有上佳的效果： 如果您現(xiàn)在使用的是較新版本的 Opera 瀏覽器，您可以狠狠地點(diǎn)擊這里： HTML5 結(jié)果輸出框 demo 此元素也可以接受一個(gè)屬性，它反映了輸出相關(guān)元素的名稱，類似 label 工作原理。)。 } else { alert(39。 ()。sum39。submit39。undefined39。sum39。 form action= method=