召唤御姐演示：
文章目录
html5结构元素
1，header整个页面的头部，某块区域的标题，页眉。
2，footer文档或者某一块的底部，页脚。
3，main主要内容区域
4，nav导航链接部分
5，section页面中一个内容区域
6，article它代表一个独立的，完整的相关内容块
7，aside元素表示一个页面的一部分，它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。
8，figure标签规定独立的流内容（图像，图表，照片，代码等等）
Html5功能元素
》video视频 :
controls 控制播放
》audio音频 :
controls 控制播放
audio 默认无大小，需设置
》progress进度条：
如：
<html>
<body>
<progress id="progress" value="0" max="100"></progress>>>>我要前进了
<script>
var timer=setInterval(function (){
if(progress.value==100){
clearInterval(timer);
}
progress.value+=10;
},1000)
</script>
</body>
</html>
召唤御姐的小demo (复制粘贴即可用):
<html>
<style>
img {
opacity: 0;
transition: opacity 1s ease;
}
#ImgSpan {
display: block;
width: 500px;
text-align: center;
color: white;
background-color: #4c4c4c;
opacity: 0;
transition: opacity 1s ease;
}
</style>
<body>
<p><progress id="progress" value="" max="100"></progress>>>>10秒等待...召唤御姐中</p>
<img id="Img" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1893214605,172916425&fm=26&gp=0.jpg">
<p><span id="ImgSpan">是你在召唤我吗？</span></p>
<script>
var timer = setInterval(function () {
if (progress.value == 100) {
clearInterval(timer);
Img.style.opacity = 1;
ImgSpan.style.opacity = 1;
}
progress.value += 10;
}, 1000)
</script>
</body>
</html>
效果图如下：
》source资源：
该标签可以为或元素指定一个或者多个的媒体资源
》figcaption标签定义figure元素的标题
Html5表单元素
要实现单选就设置相同的name值
如：
name值相同的情况》》》
<input type="radio" name="choose">选1
<input type="radio" name="choose">选2
name值不同的情况，哦豁，全部选中，无法单选》》》
<input type="radio" name="choose1">选1
<input type="radio" name="choose2">选2
//Multiple可上传多个文件 Placeholder提示 Pattern验证inpt类型输入框中内容是否与正则匹配
input新属性：
type="range" >max min step
可调节进度条
type="number" >max min
可调节输入框
type="email"
邮件提交框
type="date"
日期文本框
type="week"
周
type="time"
时间
type="month"
月
type="datatime-local"
表示本地日期和时间
type="color"
选择颜色
Audio/Video元素基本属性
基本使用：
<audio src="./source/song.mp3" controls></audio>
<video src="./source/video.mp4" poster></video>//poster设置视频的海报
设置白色初音的图片为视频封面，比如：
<video id="myVideo" src="./source/video.mp4" poster>
<script>document.getElementById("myVideo").poster="https://img-blog.csdnimg.cn/20200415230726970.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTM2MjE2,size_16,color_FFFFFF,t_70";</script>
如何动态创建播放器？
如：
var myAudio = new Audio('./source/song.mp3');
myAudio.controls=true;
document.body.appendChild(myAudio);
浏览器支持情况
canPlayType()方法
audio.canPlayType()返回probably或者maybe,返回空为不支持
如：
var myAudio=document.getElementById('myAudio');
if(myAudio.canPlayType){
if(myAudio.canPlayType('audio/mpeg')!=""){
document.write('您的浏览器支持mp3编码;');
}
if(myAudio.canPlayType('audio/ogg'; codecs="vorbis")!=""){
document.write('您的浏览器支持ogg编码；');
}
if(myAudio.canPlayType('audio/mp4'; codecs="mp4a.40.5")!=""){
document.write('您的浏览器支持acc编码；');
}
}
else{
document,write('您的浏览器不支持要检测的音频文件');
}
\\\\\\\\\\\\\\\\\\\\\\\\\
多媒体属性：
controls 控件
autoplay 自动播放
muted 静音
loop循环播放
preload(none/metadata/auto): 是否预加载
none: 不进行预加载
metadata: 部分预加载
auto: 全部预加载
pause：暂停
currentSrc: 返回资源链接（注意要资源加载完成才能获得到）
duration: 媒体持续时间（总时长，注意要资源加载完成才能获得到）
可由在该事件下获取：audio.oncanPlay=function (){}
currentTime: 返回或设置资源当前时间
volume: 音量[0-1],可读可写
muted: 静音
playbackRate+=0.1;
played 播放时间段
played.start;
played.end;
方法：
play() 播放
pause() 停止
load() 重置媒体元素并重新载入媒体，可中止正在进行的任务或事件,用于切换下一首非常有用
palybackRate: 读取或设置媒体资源播放的当前速率（大于1快放，大于0小于1慢放，无倒放）
paused/ended/seeking: 查询媒体播放状态，返回true/false
paused: 是否暂停
ended: 是否结束了
seeking： 正在请求某一播放位置的媒体数据
played/buffered/seekable: 均返回一个TimeRanges对象
(timeRanges对象的length属性为部分时间段，end(i)返回已播放时间段的结束时间，start(i)返回已播放时间段的开始时间)
played： 标明媒体资源在浏览器中已播放的时间范围
buffered: 确定浏览器已缓存媒体文件
seekable: 标明可以对当前媒体资源进行请求
play: 媒体开始播放时触发
pause: 媒体暂停时触发
ended: 资源播放结束
canplay: 浏览器能够开始播放媒体数据，但是不确定已当前的速率能否顺利的播放完媒体
如何知道资源链接？
如：
//myAudio表示多媒体控件
var myAudio=document.getElementById('myAudio');
myAudio.oncanplay=function (){
console.log(myAudio.currentSrc);
}
音乐控件中如何加减音量？
如：
//lessVolume表示减音量的按钮
//myAudio表示多媒体控件
lessVolume.onclick=function (){
var volume=parseInt((myAudio.volume-0.1)*10)/10;
//音量的范围是0到1.0，保险起见，所以小于或等于1的时候才可以赋值
if(volume>=0 && volume <=1){
myAudio.volume=volume;
}
}
//减的代码已经写好,加的话依次类推
如何控制播放器播放速度（playbackRate）？
如：
myAudio.playbackRate += 0.1;
如何暂停播放器（ play()/pause() ）？
如：
方法一（根据myAudio.paused的状态判断后选择播放 或 暂停）：
<button id="p">play/pause</button>
p.onclick=function (){
if(myAudio.paused){
myAudio.play();
}
else{
myAudio.pause();
}
方法二（设置一个变量做状态判断后选择播放 或 暂停）：
p.onclick=function (){
flag = !flag;
if(flag){
myAudio.play();
}
else{
myAudio.pause();
}
