標籤: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