導航
【初探HTML5之使用新標簽布局】用html5布局我的博客頁！
【HTML5初探之form標簽】解放表單驗證、增加文件上傳、集成拖放
【HTML5初探之繪制圖像（上）】看我canvas元素引領下一代web頁面
【HTML5初探之繪制圖像（下）】看我canvas元素引領下一代web頁面
【HTML5初探之多媒體元素】視頻播放HTML5、Flash誰才是王道？
【HTML5初探之本地存儲】如果沒有數據庫。。。
【HTML5初探之離線應用】如何打造零請求、無流量的網站？
【HTML5初探之通信API】跨域門檻不再高、數據推送不是夢
【HTML5初探之Web Workers】網頁也能多線程
【HTML5初探之Geolocation API】讓我們來回去地理信息
HTML中與form有關的東東
新增屬性
個人理解
form
html5之前，表單內的從屬元素需要放入標簽中，現在可以為標簽指定form標簽即可
點評：該功能解決了我們實際中遇到的一些問題，比如iframe模擬異步圖片上傳時，就必須將圖片寫到form外。
formaction
formmethod
該屬性用于按鈕（submit）讓表單提交頁面可又按鈕控制
formmethod指定各按鈕提交方式
placehoder
該屬性非常有用，用于文本框中顯示提示信息，非常有用的一屬性
list
list屬性需要與datalist一同使用，相當于文本框，模擬select，非常適用的一個屬性
autofocus
用于文本框主動獲取焦點，有用的東東
新增input屬性，解放驗證，各瀏覽器支持不好
tel
用于電話
url
驗證url
email
驗證郵箱
date/time
日期類驗證，會出現日期選擇插件哦。。。
number
只能是數字
range
控制數字范圍
color
顏色選擇器，好東西啊。。。
HTML5中增加了很多與form有關的屬性，說實在的，這些東西真心貼心啊！！！很大程度上講：
完全解放表單驗證
若不是考慮兼容性問題，老夫恨不得立即投入其中，但一旦想起兼容性問題的話，你就會非常頭疼！！！
因為原本很好的東西，卻是因為歷史的原因，反而會增加我們的工作量！！！
在錯的時間，做對的事情，他看起來是對的，實際上也是對的。。。但你會發現，他錯了。。。。
增強頁面元素
項目
個人理解
figure/figcaption
據說表示頁面獨立內容，移除后無影響，暫無發現用處..
details
該標簽有點意思，用于替代js中，元素收起展開功能。
最新ff都不支持……個人覺得，既然提供了該標簽應該提供屬性表示上下展開或者左右展開；
mark
高亮顯示，當真語義化
progress
屌絲們，可以告別gif圖片了，也不用div模擬百分比了，與windows區域一致的進度條出現啦，異步文件上傳更加完善！
改良ol
老夫就沒有用過這個主。。。
……
以上元素屬于可有可無的元素，不必贅述，接下來，本文明星對象登場：
文件API
FileList與file對象：
在html4中，file標簽只允許選擇一個文件，但html5中，對file標簽設置multiple屬性后，變可以選擇多文件了！！！
而，選擇后便會形成這里的filelist對象，即一個個file組成的對象列表，簡單來說就是file數組。
file對象具有2屬性，name代表文件名（不包括路徑），lastModifiedDate表示最后修改時間
其實我們在html4中操作file時，可以獲取本地很多屬性，比如文件大小，但是萬惡的ie不支持，到ie9后才有所好轉。
所以想客戶端提示文件上傳過大的同學放棄吧。。。
Blob對象
表示二進制原始數據，提供一slice方法訪問字節內部原始數據；size表示blob對象字節長度、type表示其mime類型，類型未知則返回空字符串。
來來，簡單做一實驗：
關于File
我們在ff中選擇圖片后，提交，設個斷點看看：
file主角登場，就是他了，我們將之屬性輸出來看看：
真的是應有盡有啊！有了該屬性就可以做很多事情了，但是。。。我們來看看ie7、8：
各位觀眾，人家壓根沒這個屬性，所以一切百搭。。。
話說，我覺得ie瀏覽器調試起來很痛苦，請問各位大神有沒有什么好的ie開發插件，就像ff的firebug，google自帶的插件？？
FIleReader接口
filereader接口，可將文件讀入內存，有了這個東東我們就可以很舒服的做圖片預覽了，但他的公用不止如此。
filereader的四個方法：
readAsBinaryString 將文件讀取為二進制碼——通常我們將數據傳給后端；
readAsText 將文件讀取為文本——讀取文本內容；
readAsURL 將文件讀取為DataURL——一般是小文件，圖片或者html；
abort 中斷讀取，因為文件過大等待時間就很長了
filereader接口事件：
onabort 讀取中斷觸發；
onerror 讀取失敗觸發；
onloadstart 開始讀取時觸發；
onprogress 讀取中
onload 讀取成功時觸發；
onloadend 讀取完成后觸發，無論成功失敗；
光說不練不行，我們這里做個小實驗：
我是一個小實驗
用最新瀏覽器運行試試呢！
我們再做一個判斷，看看其事件執行順序：
reader.onload = function (e) {
alert('onload');
}
reader.onprogress = function (e) {
alert('onprogress');
}
reader.onerror = function (e) {
alert('onerror');
}
reader.onloadstart = function (e) {
alert('onloadstart');
}
reader.onloaded = function (e) {
alert('onloaded');
}
此處具體應用：
簡單圖片上傳
此處暫時告一段落，若是想看更復雜一點的應用，請猛擊，記得頂喲：
http://www.cnblogs.com/yexiaochai/archive/2013/04/11/3014404.html
拖放API
其實之前，我還用jquery寫了個拖放的插件呢。。
工作中碰到的一些東西【彈出窗口】【拖放】【異步文件上傳】
但是集成在HTML5中當然更好！！！我們現在來看看這個東東。。。并且它的強大之處，就是不止在瀏覽器中拖動，這就不得了了哦（拖動圖片上傳）
html5中默認對圖片、鏈接可以拖放，其它元素需要設置draggable="true"才能拖放，事不宜遲，老夫馬上去試試。
拖放的例子
拖放時候一定要記住，阻止頁面默認行為，否則會打開新窗口的，其中以下亦是重點：
1 拖放可使用DataTransfer傳遞數據，該對象是非常有用的，因為在拖動目標元素時，可能會經過其它元素，我們可以用此傳遞信息；
API：
dragstart 被拖放元素 開始拖放時
drag 被拖放元素 拖放過程中
dragenter 拖放過程中鼠標經過的元素 被拖放元素開始進入本元素時
dragover ?拖放過程中鼠標經過的元素 本元素內移動
drageleave ?拖放過程中鼠標經過的元素 離開本元素
drop 拖放的目標元素 拖動的元素放到了本元素中
dragend 拖放的對象 拖放結束
其實這里是有問題的，我并未去深入研究從開始拖動到經過各種元素會產生神馬情況，這個可以作為二次學習時的重點研究對象。
結語
html5的文件和表單做的比較精致，個人感覺比布局新增的幾個標簽有用多了，明天開始學習canvas，雖然不懂，雖然見過，但是還是感覺很厲害的樣子！?
本文轉自葉小釵博客園博客，原文鏈接http://www.cnblogs.com/yexiaochai/archive/2013/04/16/3025240.html，如需轉載請自行聯系原作者
、slideUp()執行結束后才執行下一次，導致鼠標離開后很久動畫依然在執行的問題...)
![[轉]再見 NoSQL！](http://pic.xiahunao.cn/[轉]再見 NoSQL！)
![RIL接聽電話沒有聲音的問題 [ RIL_Answer | RIL_SetAudioDevices ]](http://pic.xiahunao.cn/RIL接聽電話沒有聲音的問題 [ RIL_Answer | RIL_SetAudioDevices ])
![[轉]敏捷開發之Scrum掃盲,及敏捷開發中XP與SCRUM的區別](http://pic.xiahunao.cn/[轉]敏捷開發之Scrum掃盲,及敏捷開發中XP與SCRUM的區別)
