【正文】 ： 第 03 節(jié)、 HTML5 新增標(biāo)簽簡(jiǎn)介 article 標(biāo)記定義一篇文章 aside 標(biāo)記定義頁(yè)面內(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è)頁(yè)面或一個(gè)區(qū)域的底部 header 標(biāo)記定義一個(gè)頁(yè)面或一個(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)記定義一些輸出類(lèi)型 progress 標(biāo)記定義任務(wù)的過(guò)程 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 特征、竅門(mén)和技術(shù) 前端的發(fā)展如此之迅猛，一不留神，大俠你可能就會(huì)被遠(yuǎn)遠(yuǎn)地甩在后面了。 HTML5 Canvas Cheat Sheet() HTML 5 Canvas 速查表， PDF 格式。 HTML 5 Cheat Sheet( 非常完整的一份 HTML 5 速查表，包括 HTML 5 標(biāo)簽、屬性、事件及其瀏覽器兼容性，圖片格式。盡管 HTML 5 的實(shí)現(xiàn)還有很長(zhǎng)的路要走，但 HTML 5 正在改變 Web。 HTML 5 可以說(shuō)是近十年來(lái) Web 標(biāo)準(zhǔn)最巨大的飛躍。第 01 節(jié)、 HTML 5 之表單新功能解析 Web 世界里這簇美艷的花朵 — HTML 5，毋庸置疑是新趨勢(shì)的技術(shù)，本文我將詳細(xì)介紹一下 HTML 5 中對(duì)表單功能的更新 . 時(shí)光車(chē)輪滾滾碾來(lái) ,前端之路永無(wú)止歇 .對(duì)于這個(gè)前端這門(mén)精一多專(zhuān)的技術(shù) ,任何一次技術(shù)革新 ,我們都必須第一時(shí)間去了解它學(xué)習(xí)它 ,比如 Web 世界里這簇美艷的花朵 — HTML 5.雖然 HTML 5 發(fā)布之初 ,許多人 (包括我 )都覺(jué)得普及它還很遙遠(yuǎn) ,但自發(fā)布以來(lái) ,許多企業(yè)級(jí)網(wǎng)站對(duì)它的嘗試應(yīng)用 (比如 !doctype html應(yīng)用 ,比如 canvas 的應(yīng)用 ),使 HTML 5 的邁出了一大步 ,隨之而來(lái) IE9 的發(fā)布 ,無(wú)疑又讓我們看到了 HTML 5 離我們不再遙遠(yuǎn) . 學(xué)習(xí) HTML 5 半年有余了 ,雖然對(duì)它的離線存儲(chǔ)以及 canvas 等革新性技術(shù)還是一知半解 ,但我還是希望我現(xiàn)在所 學(xué)到的能幫助更多的前端人學(xué)習(xí)這門(mén)毋庸置疑是新趨勢(shì)的技術(shù) .本文我將詳細(xì)介紹一下 HTML 5 中對(duì)表單功能的更新 .。 一、表單結(jié)構(gòu)更自由 XHTML 中需要放在 form 之中的諸如 inpu/button/select/textarea 等標(biāo)簽元素 ,在 HTML 5中完全可以放在頁(yè)面任何位置 ,然后通過(guò)新增的 form 屬性指向元素所屬表單的 ID 值 ,即可關(guān)聯(lián)起來(lái) . 比如 : form id=iform input type=text ... /form input value=我在 id 為 iform 的 表單外 form=foo 二、多樣的輸入類(lèi)型 (大部分新類(lèi)型目前并不為所有標(biāo)準(zhǔn)瀏覽器支持 ,請(qǐng)參見(jiàn)樣例演示中的提示 ) 輸入類(lèi)型 input type= name= 此類(lèi)型要求輸入格式正確的 地址 ,否則瀏覽器是不允許提交的 ,并會(huì)有一個(gè)錯(cuò)誤信息提示 .此類(lèi)型在 Opera 中必須指定 name 值 ,否則無(wú)效果 . url 輸入類(lèi)型 input type=url 上面代碼展示的文本域要求輸入格式正確的 URL 地址 ,Opera 中會(huì)自動(dòng)在開(kāi)始處添加 日期時(shí) 間相關(guān)輸入類(lèi)型 (這些個(gè)很牛 X 的 ) 這一系列是很酷的一個(gè)類(lèi)型 ,完全解決了煩瑣的 JS 日歷控件問(wèn)題 .但目前 MS 只有Opera/Chrome 新版本支持 ,且展示效果也不一樣 . number 輸入類(lèi)型 input type=date input type=time input type=month input type=week 這個(gè)不用多解釋了 ,要求輸入一個(gè)數(shù)字字符 ,若未輸入則會(huì)拋出一個(gè)錯(cuò)誤 . range 輸入類(lèi)型 input type=number 此類(lèi)型將顯示一個(gè)可拖動(dòng)的滑塊條 ,并可通過(guò)設(shè)定 max/min/step 值限定拖動(dòng)范圍 .拖動(dòng)時(shí)會(huì)反饋給 value 一個(gè)值 . search 輸入類(lèi)型 input type=search 此類(lèi)型表示輸入的將是一個(gè)搜索關(guān)鍵字 ,通過(guò) results=s 可顯示一個(gè)搜索小圖標(biāo) . tel 輸入類(lèi)型 input type=tel 此類(lèi)型要求輸入一個(gè)電話號(hào)碼 ,但實(shí)際上它并沒(méi)有特殊的驗(yàn)證 ,與 text 類(lèi)型沒(méi)什么區(qū)別 . color 輸入類(lèi)型 input type=color 此類(lèi)型表單 ,可讓用戶(hù)通過(guò)顏色選擇器選擇一個(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 類(lèi)型時(shí) ,若輸入值為空 ,則拒絕提交 ,并會(huì)有一個(gè)提示 .上面兩種寫(xiě)法都對(duì) ,這個(gè)很有用 .并且可以用于 textarea 以及 hidden/image/submit 類(lèi)型 .pattern 類(lèi)型為正則驗(yàn)證 ,可以完成各種復(fù)雜的驗(yàn)證 .這兩種類(lèi)型在 Opera 中必須指定 name 值 ,否則無(wú)效果 . autofocus 屬性 input type=text autofocus=true 默 認(rèn)聚焦屬性 ,可在頁(yè)面加載時(shí)聚焦到一個(gè)表單控件 ,類(lèi)似于 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)完成功能 .如果該屬性為打開(kāi)狀態(tài)可很好地自動(dòng)完成 .一般來(lái)說(shuō) ,此屬性必須啟動(dòng)瀏覽器的自動(dòng)完成功能 . 第 02 節(jié)、 HTML 5 標(biāo)簽、屬性、事件及兼容性速查表 為了方便大家學(xué)習(xí) HTML 5 ，本文與大家分享幾份 HTML 5 標(biāo)簽、屬性、事件及瀏覽器兼容性速查表。和以前的版本不同， HTML 5 并非僅僅用來(lái)表示 Web 內(nèi)容，它的使命是將 Web 帶入一個(gè)成熟的應(yīng)用平臺(tái)，在這個(gè)平臺(tái)上，視頻，音頻，圖象，動(dòng)畫(huà)，以及同電腦的交互都被標(biāo)準(zhǔn)化。為了方便大家學(xué)習(xí) HTML 5 ，本文與大家分享幾份 HTML 5 標(biāo)簽、屬性、事件及瀏覽器兼容性速查表。 HTML 5 Visual Cheat Sheet() HTML 5 標(biāo)簽速查表， PDF 格式。 HTML 5 Cheat Sheet(s/html5cheatsheet/) 另外一份 HTML 5 標(biāo)簽速查表， PDF 格式。如果你不想被 HTML5 的改變 /更新攪得不知所措的話，可以把本文的內(nèi)容作為必須了解的熱身課程。你會(huì)活得更久的 —— 正如 Douglas Quaid 說(shuō)的 !DOCTYPE html 我就琢磨著，為了 HTML5 搞個(gè)這廝代碼，您可能會(huì)對(duì)這段代碼究竟靠不靠譜表示懷疑。瀏覽器如果不知道 doctype，就會(huì)很簡(jiǎn)單的以標(biāo)準(zhǔn)模式對(duì)包含的標(biāo)簽進(jìn)行渲染。 二、圖形元素 (The Figure Element ) 看看下面給圖片添加的標(biāo)示： img src=path/to/image alt=About image / pImage of Mars. /p 文字裹在 p 標(biāo)簽里，與 img 標(biāo)簽各行其道，很難讓人聯(lián)想到這就是標(biāo)題。當(dāng)合 figcaption元素組合使用時(shí)，我們就可以語(yǔ)義化地聯(lián)想到這就是圖片相對(duì)應(yīng)的標(biāo)題 figure img src=path/to/image alt=About image / figcaption pThis is an image of something interesting. /p /figcaption /figure 三、 small重新定義 還在不久前， small元素被用來(lái)創(chuàng)建靠近 logo 且相關(guān)的副標(biāo)題。 small元素已經(jīng)被重新定義了，指小字，因而更具可用性。 small 元素專(zhuān)指“小字”。 link rel=stylesheet href=path/to/ type=text/css / 這已經(jīng)是老黃花菜，非必需品了。因此，我們可以把 type 屬性一起干掉。記住， HTML5 不是 XHTML，要是你不愿意，你沒(méi)有必要非得用引號(hào)標(biāo)記包裹你的屬性，沒(méi)有必要非得閉合元素。對(duì)于我自己來(lái)說(shuō)就是如此。如果你更傾向于結(jié)構(gòu)化的文檔，就算天塌下來(lái)，也要把引