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