【正文】 /a /p /video 無論是” ogg”格式還是” mp4″格式的視頻 Chrome 瀏覽器都能正確編碼 還有一個(gè)值得注意的一些事情： 我們技術(shù)上不需要來設(shè)置 type 屬性，但是，如果我們不這樣做，瀏覽器不得不自己去尋找類型。 / source src= type=video/mp4。因此，當(dāng)顯示 HTML5 的視頻，您必須提供這兩種格式。請(qǐng)注意 IE，每往常一樣，不支持這些格式， Opera 10 和以及以下版本只能使用 .wav 文件。在這個(gè)時(shí)候，它仍然是一個(gè)很好的做法提供一些向后兼容的形式。因此，我們將堅(jiān)持使用單一關(guā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 您可以狠狠地點(diǎn)擊這里： HTML5 必要屬性 Demo 如果 input 里面內(nèi)容是空白，則表單提交的時(shí)候，文本框會(huì)高亮顯示。這取決于你的代碼偏好，你可以以下面兩種方式之一申明此屬性。雖然我們可以使用一個(gè) h1和 h2標(biāo)簽，為其分別創(chuàng)造標(biāo)記，但是依舊沒有（因?yàn)?HTML4）一個(gè)簡單的方法來語義上說明了兩者之間的關(guān)系。 奇怪的是，這段代碼似乎觸發(fā) IE 瀏覽器。 (header)。 所有元素，默認(rèn)的，都有個(gè) inline 的 display 為了確保所有新的 HTML5 元素能以 block 水平的元素正確地渲染，有必要對(duì)其做如下定義： header, footer, article, section, nav, menu, hgroup { display: block。他們只是指他們的容器。 十、語義的 Header 和 Footer 那些過往的日子： div id=header ... /div div id=footer ... /div div 嘛，很自然的，沒有語義化的結(jié)構(gòu) —— 即使在應(yīng)用了 id 后。 //zxx:原視頻默認(rèn)展示的是 YouTube 視頻，不翻墻看不了，所以，這里展示來自另外一個(gè)網(wǎng)站的 video。按照以往的做法，我們需要使用一點(diǎn) JavaScript 代碼實(shí)現(xiàn)占位符效果，例如我之前的“文本框 /域文字提示自動(dòng)顯示隱藏jQuery 小插件”一文所展示的。例如， Opera 似乎支持電子郵件驗(yàn)證，但僅在 name 屬性被指定的時(shí)候。沒錯(cuò)，內(nèi)置表單驗(yàn)證即將到來，由于一 些顯而易見的原因，我們還不能 100%依賴內(nèi)置驗(yàn)證，較舊的瀏覽器不認(rèn)識(shí)這個(gè)” ”型，它們會(huì)簡單地退回到普通文本框。 六、內(nèi)容可編輯 最新的瀏覽器有個(gè)很贊的新屬性可以應(yīng)用到元素上，叫做 contenteditable。換句話說，只要你自己覺得舒服， 就沒有什么對(duì)錯(cuò)之分。這意味著，這些標(biāo)簽都各自指向樣式表和腳本。試想 下你網(wǎng)站底部的版權(quán)狀態(tài)，根據(jù)對(duì)此元素新的 HTML5 定義， small可以正確地包裹這些信息。 HTML5 通過采用 figure元素對(duì)此進(jìn)行了改正。不用擔(dān)心，如今這是可行的，只有老的瀏覽器需要一個(gè)特定的 doctype（文檔類型）。 另外推薦三個(gè)很有幫助的網(wǎng)站： 當(dāng)前瀏覽器 HTML5 支持情況在線測試： 當(dāng)前瀏覽器對(duì) HTML CSS3 的支持情況： 各個(gè)瀏覽器對(duì) HTML CSS3 支持情況大全： 第 03 節(jié)、 HTML5 新增標(biāo)簽簡介 article 標(biāo)記定義一篇文章 aside 標(biāo)記定義頁面內(nèi)容部分的側(cè)邊欄 audio 標(biāo)記定義音頻內(nèi)容 canvas 標(biāo)記定義圖片 mand 標(biāo)記定義一個(gè)命令按鈕 datalist 標(biāo)記定義一個(gè)下拉列表 details 標(biāo)記定義一個(gè)元素的詳細(xì)內(nèi)容 dialog 標(biāo)記定義一個(gè)對(duì)話框 (會(huì)話框 ) embed 標(biāo)記定義外部的可交互的內(nèi)容或插件 figure 標(biāo)記定義一組媒體內(nèi)容以及它們的標(biāo)題 footer 標(biāo)記定義一個(gè)頁面或一個(gè)區(qū)域的底部 header 標(biāo)記定義一個(gè)頁面或一個(gè)區(qū)域的頭部 hgroup 標(biāo)記定義文件中一個(gè)區(qū)塊的相關(guān)信息 keygen 標(biāo)記定義表單里一個(gè)生成的鍵值 mark 標(biāo)記定義有標(biāo)記的文本 meter 標(biāo)記定義 measurement within a predefined range nav 標(biāo)記定義導(dǎo)航鏈接 output 標(biāo)記定義一些輸出類型 progress 標(biāo)記定義任務(wù)的過程 rp 標(biāo)記是用在 Ruby annotations 告訴那些不支持 Ruby 元素的瀏覽器如何去顯示 rt 標(biāo)記定義對(duì) ruby annotations 的解釋 ruby 標(biāo)記定義 ruby annotations. section 標(biāo)記定義一個(gè)區(qū)域 source 標(biāo)記定義媒體資源 time 標(biāo)記定義一個(gè)日期 /時(shí)間 video 標(biāo)記定義一個(gè)視頻 第 04 節(jié)、 你必須知道的 28 個(gè) HTML5 特征、竅門和技術(shù) 前端的發(fā)展如此之迅猛，一不留神，大俠你可能就會(huì)被遠(yuǎn)遠(yuǎn)地甩在后面了。 HTML 5 Cheat Sheet( 非常完整的一份 HTML 5 速查表，包括 HTML 5 標(biāo)簽、屬性、事件及其瀏覽器兼容性，圖片格式。 HTML 5 可以說是近十年來 Web 標(biāo)準(zhǔn)最巨大的飛躍。 一、表單結(jié)構(gòu)更自由 XHTML 中需要放在 form 之中的諸如 inpu/button/select/textarea 等標(biāo)簽元素 ,在 HTML 5中完全可以放在頁面任何位置 ,然后通過新增的 form 屬性指向元素所屬表單的 ID 值 ,即可關(guān)聯(lián)起來 . 比如 : form id=iform input type=text ... /form input value=我在 id 為 iform 的 表單外 form=foo 二、多樣的輸入類型 (大部分新類型目前并不為所有標(biāo)準(zhǔn)瀏覽器支持 ,請(qǐng)參見樣例演示中的提示 ) 輸入類型 input type= name= 此類型要求輸入格式正確的 地址 ,否則瀏覽器是不允許提交的 ,并會(huì)有一個(gè)錯(cuò)誤信息提示 .此類型在 Opera 中必須指定 name 值 ,否則無效果 . url 輸入類型 input type=url 上面代碼展示的文本域要求輸入格式正確的 URL 地址 ,Opera 中會(huì)自動(dòng)在開始處添加 日期時(shí) 間相關(guān)輸入類型 (這些個(gè)很牛 X 的 ) 這一系列是很酷的一個(gè)類型 ,完全解決了煩瑣的 JS 日歷控件問題 .但目前 MS 只有Opera/Chrome 新版本支持 ,且展示效果也不一樣 . number 輸入類型 input type=date input type=time input type=month input type=week 這個(gè)不用多解釋了 ,要求輸入一個(gè)數(shù)字字符 ,若未輸入則會(huì)拋出一個(gè)錯(cuò)誤 . range 輸入類型 input type=number 此類型將顯示一個(gè)可拖動(dòng)的滑塊條 ,并可通過設(shè)定 max/min/step 值限定拖動(dòng)范圍 .拖動(dòng)時(shí)會(huì)反饋給 value 一個(gè)值 . search 輸入類型 input type=search 此類型表示輸入的將是一個(gè)搜索關(guān)鍵字 ,通過 results=s 可顯示一個(gè)搜索小圖標(biāo) . tel 輸入類型 input type=tel 此類型要求輸入一個(gè)電話號(hào)碼 ,但實(shí)際上它并沒有特殊的驗(yàn)證 ,與 text 類型沒什么區(qū)別 . color 輸入類型 input type=color 此類型表單 ,可讓用戶通過顏色選擇器選擇一個(gè)顏色值 ,并反饋到 value 中 . 三、新增的表單屬性 placeholder 屬性 input type=text placeholder=點(diǎn)擊我會(huì)以清除 這是一個(gè)很實(shí)用的屬性 ,免去了用 JS 去實(shí)現(xiàn)點(diǎn)擊清除表單初始值 .瀏覽器支持也還不錯(cuò) ,MS 除了 Firefox,其他標(biāo)準(zhǔn)瀏覽器都能很好的支持 . require/pattern 屬性 input type=text name=require required= input type=text name=require1 required=required input type=text name=require2 pattern=^[19]\d{5}$ 表單驗(yàn)證屬性 ,require 類型時(shí) ,若輸入值為空 ,則拒絕提交 ,并會(huì)有一個(gè)提示 .上面兩種寫法都對(duì) ,這個(gè)很有用 .并且可以用于 textarea 以及 hidden/image/submit 類型 .pattern 類型為正則驗(yàn)證 ,可以完成各種復(fù)雜的驗(yàn)證 .這兩種類型在 Opera 中必須指定 name 值 ,否則無效果 . autofocus 屬性 input type=text autofocus=true 默 認(rèn)聚焦屬性 ,可在頁面加載時(shí)聚焦到一個(gè)表單控件 ,類似于 JS 的 focus(). list 屬性 input type=text list=ilist datalist id=ilist option label=a value=a /optionoption label=b value=b /optionoption label=c value=c /option/datalist 該屬性需要與 datalist 屬性共用 ,datalist 是對(duì)選擇框的記憶 ,而 list 屬性可以為選擇框自定義記憶的內(nèi)容 . max/min/step 屬性 input type=range max=100 min=1 step=20 限制值的輸入范圍 ,以及值的輸入漸進(jìn)程度 ,比如可在 number 設(shè)定輸入最大值最小值 ,或者在 range 中設(shè)定拖動(dòng)階梯 . autoplete 屬性 input type=text autoplete=on 此屬性是為表單提供自動(dòng)完成功能 .如果該屬性為打開狀態(tài)可很好地自動(dòng)完成 .一般來說 ,此屬性必須啟動(dòng)瀏覽器的自動(dòng)完成功能 . 第 02 節(jié)、 HTML 5 標(biāo)簽、屬性、事件及兼容性速查表 為了方便大家學(xué)習(xí) HTML 5 ，本文與大家分享幾份 HTML 5 標(biāo)簽、屬性、事件及瀏覽器兼容性速查表。為了方便大家學(xué)習(xí) HTML 5 ，本文與大家分享幾份 HTML 5 標(biāo)簽、屬性、事件及瀏覽器兼容性速查表。 HTML 5 Cheat Sheet(s/html5cheatsheet/) 另外一份 HTML 5 標(biāo)簽速查表， PDF 格式。你會(huì)活得