html5新增标记元素的内容类型是,html5的新增标签

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,看代码:

千千阙歌.mp3

//这个歌曲可以网上搜一首歌放在这个根目录里，也可以放很多首哦，记

//得随机应变，举一反三，你就离成功不远了。

//从前有个人想引水浇地，但是用铁锹挖了好多个洞都没找到水，其实他

//快要挖到水了，只是在还有一步之遥的时候他就停住了，有的人只挖了

//一个坑就找到水，不是因为她好运，而是因为他坚持到底，没有放弃，

//没有挖到水的那个人呢，没有深入的去寻找目标，所以他并没有成功。

//成功其实很简单，只要坚持，找对方法就一定可以。

播放

上一首

下一首

window.οnlοad=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].οnclick=function(){

play1();

};

var arr=["千千阙歌.mp3","小苹果.mp3","张杰 - 三生三世.mp3","时间都去哪儿了.mp3","曾经的你-许巍.mp3"]

// 下一首

var index=0;

btn[2].οnclick=function(){

index++;

if(index==arr.length){

index = 0;

}

audio.src="mp3/"+arr[index];

h2.innerHTML=arr[index];

// audio.play();

play1();

}

// 上一首

btn[1].οnclick=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

}

今天就到这了，believe you can do it ,i can do it , we can do it!