html5(二)
一、新特性
1.用于繪畫的canvas元素
2.用于媒體回放的video 和 audio 元素
3對本地離線存盤的更好支持
4.新的特殊內容元素比如(article、footer、header、nav、section)
5.新的表單控制元件比如(calendar、date、time、email、url、search)
二、HTML全域屬性
1.accesskey 規定激活(使元素獲得焦點) 元素的快捷鍵
<a href="http://www.w3school.com.cn/" accesskey="w">W3School</a><br /><!-- 復制可用-- >
2.class 規定元素的類名
3.contenteditable屬性規定元素內容是否可編輯[true為可編輯/false為不可編輯]
<p contenteditable="true">這是一段可編輯的段落，請試著編輯該文本，</p><!-- 復制可用-- >
4.contextmenu 屬性規定元素的背景關系選單
(僅支持火狐)
5.data-* 用于存盤頁面或應用程式的私有自定義資料.屬性值somevalue
<script>
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");
alert(animal.innerHTML + "是一種" + animalType + "，");
}
</script>
</head>
<body>
<h1>物種</h1>
<p>點擊某個物種來查看其類別：</p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="鳥類">喜鵲</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="魚類">金槍魚</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蠅虎</li>
</ul>
6.**dir **規定元素內容的文本放向
[ltr 默認從左向右的文本方向
rtl 自右向左的文本方向]
7.draggable 規定元素是否可拖動
[true 規定元素可拖動的
false 規定元素不可拖動
auto 使用瀏覽器默認行為]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">這是一段可移動的段落，請把該段落拖入上面的矩形，</p>
</body>
8.hidden 規定元素仍未或不再相關
9.id規定HTML元素的唯一的id
10.lang 規定元素內容的語言
11.spellcheck 規定是否對元素進行拼寫和語法檢查
12. style 規定元素的行內樣式
13. **tabindex ** 規定遠勝于的tab鍵控制次序(當tab鍵用于導航時)
14. title 規定關于元素的額外資訊
15. translate 規定是否翻譯元素內容
yes 規定應該翻譯元素內容
no 規定不翻譯元素內容
三、video物件
1、video物件屬性
1.audioTracks 回傳表示可用音頻軌道的AudioTrackList物件
2.autoplay 設定或回傳是否在就緒(加載完成)后隨即播放視頻
3.buffered 回傳表示視頻已經緩沖部分的TimeRanges物件
4.controller 回傳表示視頻當前媒體控制器的MediaController物件，
5.controls 設定或回傳視頻是否應該顯示控制元件(比如播放/暫停等)，
6.crossOrigin 設定或回傳視頻的CORS設定，
7.controls 設定或回傳視頻是否應該顯示控制元件(比如播放/暫停等)，
8. crossOrigin設定或回傳視頻的CORS設定，
9.currentSrc 回傳當前視頻的URL，
10.currentTime 設定或回傳視頻中的當前播放位置(以秒計)，
11.defaultMuted 設定或回傳視頻默認是否靜音，
9. defaultPlaybackRate設 置或回傳視頻的默認播放速度，
13.duration 回傳視頻的長度(以秒計)，
10. ended回傳視頻的播放是否已結束，
15.error 回傳表示視頻錯誤狀態的MediaError物件，
11. height 設定或回傳視頻的height屬性的值，
12. loop設定或回傳視頻是否應在結束時再次播放，
13. mediaGroup 設定或回傳視頻所屬媒介組合的名稱，
14. muted 設定或回傳是否關閉聲音，
15. networkState回傳視頻的當前網路狀態，
16. paused 設定或回傳視頻是否暫停，
17. playbackRate 設定或回傳視頻播放的速度，
18. played回傳表示視頻已播放部分的TimeRanges物件，
19. poster設定或回傳視頻的poster屬性的值，
20. preload設定或回傳視頻的preload屬性的值，
26 readyState 回傳視頻當前的就緒狀態，
21. seekable 回傳表示視頻可尋址部分的TimeRanges物件，
22. seeking回傳用戶當前是否正在視頻中進行查找，
29.src 設定或回傳視頻的src屬性的值，
23. startDate 回傳表示當前時間偏移的Date物件，
24. textTracks 回傳表示可用文本軌道的TextTrackList物件，
25. videoTracks 回傳表示可用視頻軌道VideoTrackList 物件，
26. volume 設定或回傳視頻的音量，
27. width 設定或回傳視頻的width屬性的值，
2、video物件方法
1.addTextTrack() 向視頻添加新的文本軌道
2.canPlayType() 檢查瀏覽器是否能播放指定的視頻型別
3. load() 重新加載視頻元素
4. play() 開始播放視頻
5. pause() 暫停當前播放的視頻
三、HTML事件屬性
1、Window事件屬性,針對window物件觸發時間
1.onafterprint 檔案列印后運行的腳本
2. onbeforeprint 檔案在列印后運行的腳本
3. onbeforeunload 檔案在列印前運行的腳本
4. onerror 在錯誤發生時運行的腳本
5. onhaschange 在檔案已發生改變時運行的腳本
6. onload 頁面結束加載之后觸發
7. onmessage 在訊息被處罰是運行的腳本
8. ossline 當檔案離線運行是的腳本
9. ononline 在檔案上線時運行的腳本
10. onpagehide 當視窗隱藏時運行的腳本
11. onpageshow 當視窗成為可見運行的腳本
12. onpopstate 當視窗歷史記錄發生改變時運行的腳本
13. onredo 當檔案執行撤銷時運行的腳本
14. onresize 當瀏覽器視窗被調整大時觸發
15. onstorage 在Web Storage 區域更新后運行的腳本
16. onundo 在檔案執行undo時運行的腳本
17. onunload 一旦頁面已下載時觸發(或者瀏覽器視窗已被關閉)
2、from事件表單內的動作觸發的事件
1.onblur 屬性在元素失去焦點時觸發
2.onchange 在元素值改變時觸發
3.oncontextmenu 當上下選單被觸發時運行的腳本
4.onfocus 屬性在元素獲得焦點時觸發
5.onformchange 在表單發生改變時運行的腳本
6.onforminput 當元素獲得用戶輸入時運行的腳本
7.oninput 當元素獲得用戶輸入時運行的腳本
8.oninvalid 當元素無效時運行的腳本
9.onreset 當表單中的重置按鈕被點擊時觸發H5中不支持
10.onselect 屬性在元素中的文本被選中時觸發
11.onsubmit 屬性在提交表單時觸發
3、keyboard事件
1.onkeydown 屬性在用戶按下時觸發
2.onkeypress 屬性在按下抬起后觸發
3.onkeyup 屬性在用戶釋放按鍵時觸發
4、Mouse(滑鼠)事件 由滑鼠或類似用戶動作觸發的事件
1.onclick 屬性由元素上的滑鼠點擊觸發
2.ondblclick 屬性在滑鼠雙擊時觸發
3.ondrag 元素被拖動時運行的腳本
4.ondragend 元素被拖動操作末端運行的腳本
5.ondragenter 當元素被拖動到有效拖放區域時運行的腳本
6.ondragleave 當元素離開有效拖放目標時運行的腳本
7.ondragover 當元素在有效拖放目標上正在被拖動時運行的腳本
8.ondragstart 在拖動操作開端運行的腳本
9.ondrop 當被拖元素正在被拖放時運行的腳本
10.onmousedown 屬性在滑鼠按鈕元素上按下時觸發
11.onmouseup松開滑鼠時觸發
12.onmousemove 滑鼠在元素內移動時觸發
13.onmouseover 滑鼠移入元素時觸發
14. onmouseout 滑鼠移出元素時觸發
15. onmousewheel 當滑鼠滾輪觸發時運行腳本
16. onscroll 當元素滾動時運行的腳本
5、HTML5中的新屬性,前面是屬性,后面是屬性值
1.controls controls如果出現該屬性,則向用用戶顯示控制元件,比如播放按鈕
2.heiget heiget=“240” 設定播放器的高度
3.loop 出現則檔案播放完后再次播放
4.muted 規定視頻的音頻應該被靜音
5.preload preload=“auto” 如果出現該屬性,則視頻在頁面加載時進行加載.并預備播放/如果使用autoplay 則忽略該屬性
6.poster poster= "/images/w3school.gif"日規定 視頻下載時顯示的影像，或者在用戶點擊播放按鈕前顯示的影像，
7.src src=“movie.ogg” 要播放的視頻的url
8.width 設定視頻播放器的寬度
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/57751.html
標籤：其他
上一篇：Web程式設計筆記（四）