【正文】 get p 10 + 5 = output name=sum/output /p button type=submit計算 /button /form (function() { var f = [0]。 二十七、 Output 元素 正如你可能預(yù)料到的， output 元素被用來顯示部分計算，例如，如果你想顯示一個鼠標的位置，或者是一系列數(shù)字的總和坐標，這個數(shù)據(jù)應(yīng)被插入到 output 元素中。 left: 0。 color: black。 } .data_custom:hover { color: transparent。 // My Value 此屬性還可以用在 CSS 中，例如下面這個有些傻里傻氣的 CSS 文字改變的例子： CSS 代碼： .data_custom { display:inlineblock。)。 var attr = (39。myDiv39。如果你發(fā)現(xiàn)你曾經(jīng)把一個重要的數(shù)據(jù)附加在諸如 class 的屬 性上，可能為了 JavaScript 之用，那么，本屬性將大有幫助啊。 二十六、 data 屬性 (The Data Attribute) 我們現(xiàn)在可以很正式地讓所有的 HTML 元素支持自定義屬性。 不管你需求有多 大的區(qū)別，所有這些技術(shù)可以歸為現(xiàn)代網(wǎng)絡(luò)堆棧。它現(xiàn)在有自己的規(guī)范。 Geolocation:不是 HTML5.//zxx:Geolocation（地理位置）：通過 HTML 5，您應(yīng)該能夠使Web 應(yīng)用程序可確定您的位置，并為您提供更多的相關(guān)信息。 SVG:不是 HTML5，至少 5 歲了。對于非開發(fā)人員，誰管這個呢，它是一個簡單的方法適用于現(xiàn)代網(wǎng)頁標準。 //zxx:YouTuBe 視頻，需要翻墻。事實上，有少量的 HTML5 的功能，我們可以在我們所有的項目中使用！更簡單，更干凈的代碼總是一件好事。不過如果你是包裹一個博客文章，或者，可能是，底部的鏈接列表，則需考慮分別使用 article和nav元素，因為其更具語義。 div 應(yīng)該用在沒有更好的元素的時候。 /p 二十三、什么時候使用 div 我們有些人開始質(zhì)問到底何時該使用 div。例如，我在一些博客上搜索“北川景子”，我就可以使用一些 JavaScript 將當前的每個結(jié)果字符串用 mark 標簽包裹。 二十二、 mark 元素 (Mark Element ) 試想 mark元素作為高亮。input39。pattern39。否則，當然就不支持了。在上面，我們創(chuàng)建了一個新的 input 元素，并確定了里面的 pattern 屬性瀏覽器是否認得。 // boolean 事實上，這是一種確定瀏覽器兼容的常用方法。input39。pattern39。第一個是利用優(yōu)秀的Modernizr 庫，或者，我們可以創(chuàng)建和分析這些元素，以確定瀏覽器的能力。 二十一、屬性支持檢測 如果我們沒有方法檢測瀏覽器是否支持這些屬性，這些就不能稱之為好的屬性。 您可以狠狠地點擊這里： HTML5 正則表達式 Demo //zxx:我自己小測了下，貌似目前只在 Chrome 下有效 (win 系統(tǒng) ) 注意到，我們已經(jīng)開始組合使用這些很棒的屬性。如果瀏覽器支持 pattern 屬性，則提交表單時，如果文本框中的內(nèi)容不符合其正則表達式，文本框會高亮顯示。多虧了新的 pattern 屬性，我們可以在標簽處直接插入一個正則表達式。 video preload controls 請注意，不同瀏覽器渲染出來的進度條的模樣都是不一樣的。 video preload 十九、顯示控制條 如果你使用過上面的每一個提到的技術(shù)點，你可能已經(jīng)注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。影片可以通過設(shè)置 preload=” preload”或 是簡單地添加 preload 進行預(yù)載。是否有必要？或許吧。 有方法可以讓所有的瀏覽器支持 video 標簽，具體參見我前面的“讓所有瀏覽器支持HTML5 video 視頻標簽”一文。這取決于你。 不是所有的瀏覽器理解 HTML5 視頻。 / p Your browser is old. a href=Download this video instead./a /p /video 無論是” ogg”格式還是” mp4″格式的視頻 Chrome 瀏覽器都能正確編碼 還有一個值得注意的一些事情： 我們技術(shù)上不需要來設(shè)置 type 屬性，但是，如果我們不這樣做，瀏覽器不得不自己去尋找類型。codecs=39。 / source src= type=video/mp4。 codecs=39。因此，當顯示 HTML5 的視頻，您必須提供這兩種格式。因為 HTML5 的規(guī)范沒有指定特定的視頻編解碼器，它留給了瀏覽器來決定。請注意 IE，每往常一樣，不支持這些格式， Opera 10 和以及以下版本只能使用 .wav 文件。這意味著，至少在現(xiàn)在，你應(yīng)該創(chuàng)建兩個版本的音頻。在這個時候，它仍然是一個很好的做法提供一些向后兼容的形式。 HTML5 提供了 audio元素，嗯，至少，最終，我們將不必擔心這些插件。因此，我們將堅持使用單一關(guān)鍵字的方法。如果一個特定的輸入應(yīng)該是“選擇”，或有重點的，默認情況下，我們現(xiàn)在可以利用自動獲取焦點屬性。 form action= method=get label for=name姓名 :/label input id=name name=name type=text placeholder=zhangxinxu required=required / button type=submit提交 /button /form 您可以狠狠地點擊這里： HTML5 必要屬性 Demo 如果 input 里面內(nèi)容是空白，則表單提交的時候，文本框會高亮顯示。有了這個代碼，并且瀏覽器支持此屬性，如果“ someInput”文本框是空白，則表單不會被提交。這取決于你的代碼偏好，你可以以下面兩種方式之一申明此屬性。通過使用不影響文檔的大綱流 hgroup 元素，我們可以將這些標題組合在一起。雖然我們可以使用一個 h1和 h2標簽，為其分別創(chuàng)造標記，但是依舊沒有（因為 HTML4）一個簡單的方法來語義上說明了兩者之間的關(guān)系。該腳本同樣修復(fù)了些顯示問題。 奇怪的是，這段代碼似乎觸發(fā) IE 瀏覽器。 (nav)。 (header)。幸運的是，有一個簡單的解決辦法： (article)。 所有元素，默認的，都有個 inline 的 display 為了確保所有新的 HTML5 元素能以 block 水平的元素正確地渲染，有必要對其做如下定義： header, footer, article, section, nav, menu, hgroup { display: block。這同樣也適用于 header。他們只是指他們的容器。以上的代碼可以替換成： header ... /header footer ... /footer 它完全適合您有多個頁眉和頁腳的項目。 十、語義的 Header 和 Footer 那些過往的日子： div id=header ... /div div id=footer ... /div div 嘛，很自然的，沒有語義化的結(jié)構(gòu) —— 即使在應(yīng)用了 id 后。 您可以狠狠地點擊這里： HTML5 本地存儲 Demo IE8 瀏覽器已經(jīng)支持了 本地存儲，如下截圖所示： 盡管顯然不支持所有的瀏覽器，我們可以在 Inter Explorer8 時， Safari 4 和 Firefox 下期待此工作方式。 //zxx:原視頻默認展示的是 YouTube 視頻，不翻墻看不了，所以，這里展示來自另外一個網(wǎng)站的 video。如果您使用占位符 (placeholders)屬性，一切就輕松了。按照以往的做法，我們需要使用一點 JavaScript 代碼實現(xiàn)占位符效果，例如我之前的“文本框 /域文字提示自動顯示隱藏jQuery 小插件”一文所展示的。底線是不依賴于這種形式的驗證?但你仍然可以使用它！ 八、占位符 (Placeholders) //zxx:此處內(nèi)容非直譯，有刪改 Placeholders 什么意思呢，就是文本框 /文本域空間默認會有個文字提示，獲得焦點時，此提示文字消失；失去焦點時如果內(nèi)容為空，提示文字又出現(xiàn)。例如， Opera 似乎支持電子郵件驗證，但僅在 name 屬性被指定的時候。 目前而言，我們不能依賴瀏覽器驗證，客戶端 /服務(wù)器驗證還是必須的。沒錯，內(nèi)置表單驗證即將到來，由于一 些顯而易見的原因，我們還不能 100%依賴內(nèi)置驗證，較舊的瀏覽器不認識這個” ”型，它們會簡單地退回到普通文本框。類似的用途還有很多，像是簡單的待辦事項清單應(yīng)用程序，可大大利用其本地存儲的優(yōu)勢。 六、內(nèi)容可編輯 最新的瀏覽器有個很贊的新屬性可以應(yīng)用到元素上，叫做 contenteditable。 p id=someId Start the reactor. 對此取舍你還得自己拿主意。換句話說，只要你自己覺得舒服， 就沒有什么對錯之分。 link rel=stylesheet href=path/to/ / 五、引號還是不要引號 ?這確實是個問題。這意味著，這些標簽都各自指向樣式表和腳本。 四、腳本 (scripts)和鏈接 (links)無需 type 您可能現(xiàn)在仍在給 link 和 script 標簽增加 type 屬性。試想 下你網(wǎng)站底部的版權(quán)狀態(tài)，根據(jù)對此元素新的 HTML5 定義， small可以正確地包裹這些信息。這是個很有用的表現(xiàn)元素，但是，現(xiàn)在，這種用法可能就不正確了。 HTML5 通過采用 figure元素對此進行了改正。所以，妹妹你大膽的向前沖，把小心 謹慎都拋到九霄云外，去擁抱新的 HTML5 文檔類型吧。不用擔心，如今這是可行的，只有老的瀏覽器需要一個特定的 doctype（文檔類型）。 一、新的 Doctype //zxx:” doctype”中文意思指“文檔類型” 仍在使用麻煩的，不可能記得住的 XHTML 文檔類型？ !DOCTYPE html PUBLIC //W3C//DTD XHTML Transitional//EN 如果是，為什么還在用呢？使用新的 HTML5 文檔類型代替吧。 另外推薦三個很有幫助的網(wǎng)站： 當前瀏覽器 HTML5 支持情況在線測試： 當前瀏覽器對 HTML CSS3 的支持情況： 各個瀏覽器對 HTML CSS3 支持情況大全