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>
网友评论