html5的新增標(biāo)簽的類型有：
- 結(jié)構(gòu)標(biāo)簽
- 媒體組合標(biāo)簽
- 表單控件
一.新增的結(jié)構(gòu)標(biāo)簽有###
- article 頁面上結(jié)構(gòu)完整并且內(nèi)容獨(dú)立 （例如一些文章呀，報(bào)道呀，小說呀之類的）
- aside 用來裝在非正文類的內(nèi)容（例如廣告，側(cè)邊欄）
- section 標(biāo)簽定義文檔中的節(jié)
- header 標(biāo)簽定義文檔的頁面頭部，通常是一些引導(dǎo)和導(dǎo)航
- footer 標(biāo)簽定義section或者document的頁腳
- nav 標(biāo)簽定義顯示導(dǎo)航鏈接
- time定義日期和時(shí)間或者兩者
-
main 規(guī)定文檔的主要內(nèi)容
這里應(yīng)該注意的是，main元素不能使以下元素的后代。
二.媒體組合標(biāo)簽###
- ** figure>figcaption** 標(biāo)簽包含獨(dú)立的媒體內(nèi)容
figcaption 標(biāo)簽定義figure元素的標(biāo)題
- details>summary 標(biāo)簽用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)
- datalist>option 輸入框提示列表
input的list屬性值為datalist的id
- progress 進(jìn)度條
max => 進(jìn)度完成值，value=>定義當(dāng)前進(jìn)度值
- mark 標(biāo)記需要突出顯示的文本
三.新增表單控件###
- email 郵箱
- tel 電話
- url 網(wǎng)址
- number 數(shù)字
- date 日期
- range 數(shù)值選擇器
- search 搜索框
- color 顏色選擇器
四.新增表單屬性###
- placeholder 輸入框提示信息
- autofocus 提示表單自動(dòng)獲取輸入焦點(diǎn)
- required 必須要填寫的字段
- pattern 正則驗(yàn)證
- form 規(guī)定輸入與所屬的一個(gè)或多個(gè)表單
五.新增表單驗(yàn)證###
- novalidate 表單取消驗(yàn)證
- formnovalidate submit元素取消驗(yàn)證
- setCustomValidity 自定義驗(yàn)證消息
六.音頻和視頻###
1.媒體元素
1> audio 音頻標(biāo)簽
2> video 視頻標(biāo)簽
3> source 媒體來源標(biāo)簽
2.媒體元素屬性和說明
1>controls 顯示和隱藏用戶控制界面
2>autoplay 媒體是否自動(dòng)播放
3>loop 媒體是否循環(huán)播放
4>currentTime 開始播放到現(xiàn)在所用的時(shí)間
5>duration 媒體總時(shí)間(只讀的)
6>volume 0.0-1.0的音量相對(duì)值
7>muted 是否靜音
8>paused 媒體是否暫停(只讀)
9>ended 媒體是否播放完畢(只讀)
10>error 媒體發(fā)聲錯(cuò)誤時(shí)返回錯(cuò)誤代碼(只讀)
11>currentsrc 一字符串的形式返回媒體地址(只讀)
3.媒體事件和說明
1>onended 當(dāng)媒體到達(dá)結(jié)尾時(shí)觸發(fā)
2>ontimeupdate 當(dāng)播放時(shí)間發(fā)生改變時(shí)觸發(fā)
3>onplay當(dāng)點(diǎn)擊開始按鈕時(shí)觸發(fā)
4>onpause 點(diǎn)擊暫停時(shí)按鈕觸發(fā)
4.媒體元素方法和說明
1>play() 媒體播放
2>pause()媒體暫停
3>load()重新加載媒體
給大家看一個(gè)簡(jiǎn)單的小demo,看代碼:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>千千闕歌.mp3</h2>
<audio src="mp3/千千闕歌.mp3" controls></audio>
//這個(gè)歌曲可以網(wǎng)上搜一首歌放在這個(gè)根目錄里，也可以放很多首哦，記
//得隨機(jī)應(yīng)變，舉一反三，你就離成功不遠(yuǎn)了。
//從前有個(gè)人想引水澆地，但是用鐵鍬挖了好多個(gè)洞都沒找到水，其實(shí)他
//快要挖到水了，只是在還有一步之遙的時(shí)候他就停住了，有的人只挖了
//一個(gè)坑就找到水，不是因?yàn)樗眠\(yùn)，而是因?yàn)樗麍?jiān)持到底，沒有放棄，
//沒有挖到水的那個(gè)人呢，沒有深入的去尋找目標(biāo)，所以他并沒有成功。
//成功其實(shí)很簡(jiǎn)單，只要堅(jiān)持，找對(duì)方法就一定可以。
<br/>
<button>播放</button>
<button>上一首</button>
<button>下一首</button>
<!--<audio controls>-->
<!--<source src="mp3/千千闕歌.mp3"/>-->
<!--<source src="mp3/千千闕歌.ogg"/>-->
<!--</audio>-->
<script>
window.onload=function(){
var audio=document.getElementsByTagName("audio")[0];
var btn=document.getElementsByTagName("button");
var h2=document.getElementsByTagName("h2")[0];
// 播放暫停
function play1(){
if(audio.paused){
audio.play();
btn[0].innerHTML="暫停";
}else{
audio.pause();
btn[0].innerHTML="播放";
}
}
btn[0].onclick=function(){
play1();
};
var arr=["千千闕歌.mp3","小蘋果.mp3","張杰 - 三生三世.mp3","時(shí)間都去哪兒了.mp3","曾經(jīng)的你-許巍.mp3"]
// 下一首
var index=0;
btn[2].onclick=function(){
index++;
if(index==arr.length){
index = 0;
}
audio.src="mp3/"+arr[index];
h2.innerHTML=arr[index];
// audio.play();
play1();
}
// 上一首
btn[1].onclick=function(){
index--;
if(index ==-1){
index=arr.length-1;
}
audio.src="mp3/"+arr[index];
h2.innerHTML=arr[index];
// audio.play();
play1();
}
// alert(audio.currentTime)
// alert(audio.duration)
// alert(audio.volume)
// audio.volume=0.5
}
</script>
</body>
</html>
