如鵬網學習筆記（十二）HTML5

標籤：play   檔案讀取   相互   start   new   圖形繪製   版本   over   ofo   

一、HTML5簡介

　　HTML5是HTML語言第五次修改產生的新的HTML語言版本

　　改進主要包括：
　　　　增加新的HTML標籤或者屬性、新的CSS樣式屬性、新的JavaScript API等。同時刪除了一些過時的和樣式相關的HTML標籤和屬性

　　給網頁帶來了新的特性：
　　　　多媒體支援、本機存放區、圖形繪製和樣式特效等

二、新的多媒體標籤

　　1，<video> 用來在頁面播放視頻
　　　　部分屬性：
　　　　　　src 　　 要播放的視頻的地址
　　　　　　width 　　 設定播放器的寬度，單位px
　　　　　　height 　　 設定播放器的高度，單位px
　　　　　　controls 　　 如果出現該屬性，則向使用者顯示控制項，比如播放按鈕
　　　　　　autoplay 　　 視頻在就緒後馬上播放
　　　　　　loop　　 播放完成後重新開始

　　　　範例程式碼：
　　　　　　<video controls="control" width="960px" height="450px">
　　　　　　　　<source src="resource/世界5500年版圖演變史.webm"/>
　　　　　　　　<source src="resource/世界5500年版圖演變史.mp4"/>
　　　　　　</video>


　　2，<audio>在頁面播放音頻
　　　　支援OFF\MP3\WAV三種音頻格式
　　　　用法與<video>相似

　　　　範例程式碼：
　　　　<audio controls="controls">
　　　　　　<source src="resource/風吹麥浪-葉一茜.mp3" />
　　　　　　<source src="resource/風吹麥浪-葉一茜.wav" />
　　　　　　<source src="resource/風吹麥浪-葉一茜.ogg" />
　　　　</audio>


　　3，<source>指定多媒體資源的位置,配合上面兩個標籤使用，是個單標籤

三、新的表單控制項

　　新增的表單控制項就是在input標籤的type屬性增加了新的可選項

　　date　　 日期控制項 value格式為：2016-03-20
　　time 　　 時間控制項value格式為10:20
　　number　　數字控制項
　　range　　範圍控制項使用max和min屬性來控制拖動的範圍
　　search　　搜尋方塊控制項
　　color　　顏色選取器value格式為：16進位顏色值
　　email、url、datetime 　　 這些不是所有瀏覽器都支援

　　HTML5其實是把第三方外掛程式的效果整合了

四、input標籤的新屬性

　　placeholder 　　 輸入框的輸入提示資訊

　　required 　　 必填的意思，required="required"

　　pattern 　　 使用者驗證使用者輸入

　　form 　　 指定控制項所屬的表單，這樣控制項就不必一定要在<form>標籤內了

　　autofocus 　　 自動獲得焦點

　　multiple 　　 指定檔案上傳時是否可選多個檔案

　　accept　　指定上傳檔案時允許的MIME類型（檔案類型），如image/*代表所有圖片格式

五、增加JavaScript對要上傳的檔案的處理功能

　　為JavaScript提供新的API，使其能夠處理要上傳的檔案

　　1，File　　表示被選中的一個檔案，包含和此檔案相關的資訊

　　　　size屬性　　檔案大小
　　　　type屬性　　檔案類型
　　　　name屬性　　檔案名稱

　　2，FileList　　被選中上傳的檔案清單

　　3，FileReader　　對檔案資料進行處理
　　　　readAsText(file,encoding)　　以文本的形式讀取檔案資料
　　　　readAsDataURL( file)　　 以base64編碼的形式讀取檔案資料
　　　　result屬性 　　 讀取到的被處理過的檔案資料
　　　　onload　　事件屬性，檔案讀取成功時觸發

六、新的文檔語義標籤

　　在HTML5之前，文檔中無論是布局還是內容結構方面，使用的都是div標籤

　　Html5為文檔內容語言結構方面定義了一些新的標籤：

　　header　　 一般放置logo或者功能表列

　　nav 　　 一般放置網站內的目錄、導覽列連結，或者網站外的友情連結

　　article 　　 頁面中相對獨立的結構，如一篇文章，或者此文章的每一個評論

　　section 　　 定義頁面或者article的章節

　　aside 　　 一般放置廣告或者解釋性資訊

　　footer 　　 一般放置著作權資訊的

　　其中article和section的用法比較靈活，可以相互嵌套

　　這些標籤除了可以讓文檔的語義結構更加清晰外，還可以方便搜尋引擎的抓取，也為程式對頁面的準確分析提供了可能
　　只是現今階段這些標籤還沒有成為主流

七、新的事件類型

　　beforeunload　　 頁面關閉前或重新整理前觸發

　　scroll　　 頁面滾動時觸發

　　resize　　 頁面尺寸被調整時觸發

　　mousewheel 　　 滑鼠滾輪滾動時觸發

　　dragstart、dragover、drop　　 拖放事件

八、元素拖放（drag/drop）
　　在HTML5中，元素時可以被拖放的（拖拽，放下）

　　1，draggable是否可被拖拽（元素的公用屬性）

　　2，dragstart拖拽開始事件，元素a被拖拽時觸發

　　3，dragover拖拽到另一個元素上，當一個被拖拽元素a進入到另一個元素b的範圍時觸發

　　4，drop拖拽停止事件，滑鼠按鍵鬆開時觸發，事件來源是元素b

　　圖片、超連結預設是可以拖拽，想要拖拽其他元素，需要設定元素的draggable屬性為true

　　元素預設拒絕接受另一個被拖拽的元素，表現為滑鼠指標變為，drop事件也不會觸發

　　注意：
　　　　被選中的文本也可以被拖拽，先忽略這一點。拖放動作只會觸發一些事件，並不會做任何實際性的事情，
　　　　就像點擊了一個普通按鈕不會觸發任何效果一樣，想做一些事情就需要在事件處理函數裡面寫處理代碼


九、元素拖放實現

　　若要實現把元素a拖放到元素b中，需要進行一下步驟：

　　1.確保元素a可拖拽（設定元素的draggable屬性為true）

　　2，給元素a註冊dragstart事件處理函數（主要用來儲存一些相關資料）

　　3，給元素b註冊dragover事件處理函數（主要用來取消事件預設行為）

　　4，給元素b註冊drop事件處理函數（主要用來把元素a插入到元素b中）

　　由於整個拖放過程涉及到多個事件，所以就需要event.dataTransfer對象在整個拖放過程中儲存和傳遞需要的資料

　　event.dataTransfer.setData(key,value)存放資料
　　event.dataTransfer.getData(key)取得資料

十、繪圖功能

　　HTML5新增了<canvas>標籤（畫布的意思），同時提供了一組新的JavaScript api，相配合完成繪圖功能

　　繪製過程是由js代碼控制，一般步驟為：

　　　　1，獲得canvas畫布元素對象

　　　　2，設定畫筆顏色或者填充顏色

　　　　3，繪製基本圖形或者圖片

　　　　4，重複2和3步，最終回執成複雜的圖形

　　　　5，配合定時器使用，則可以繪製動畫

十一、JavaScript繪圖API

　　var context = canvas.getContext("2d"); //獲得繪圖上下文（繪圖功能的核心對象）
　　context.strokeStyle = "顏色值"; //設定畫筆顏色
　　context.fillStyle = "顏色值"; //設定填充顏色
　　context.fillRect(x, y , width , height); //繪製並填充矩形
　　context.strokeRect(x, y , width , height); //繪製矩形
　　context.clearRect(x, y , width , height); // 清除矩形地區內的圖形
　　//繪製圖片
　　var img = new Image(); //建立圖片對象
　　img.src="resource/1.png"; //設定圖片的src，設定後即開始載入圖片資料
　　img.onload=function(){ //圖片資料載入完成後才可以繪製此圖片
　　　　context.drawImage(img,230,10);
　　}

　　注意：對咱們後端開發人員來說，只需要瞭解一下繪圖功能即可

十二、本機存放區

　　在HTML5之前，伺服器可以通過cookie把少量資料存放區到使用者本地電腦上，儲存上限每個網站大約是4KB

　　HTML5為window對象新增了localStorage屬性對象，儲存字串類型的索引值對資料，

　　如：localStorage.username="蛋蛋";localStorage.age="20";

　　這些索引值對資料會儲存到使用者本地電腦上，並且這些資料是網站獨享的，各個網站之間的資料並不會相互影響，而且瀏覽器之間也是不共用的

　　HTML5的本機存放區大約可以儲存5MB的資料，有些瀏覽器可以設定儲存上限

如鵬網學習筆記（十二）HTML5