召唤御姐演示:
文章目录
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://i-blog.csdnimg.cn/blog_migrate/622a06cbc1ef4a4b2ca35adbc70f82bf.png";</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();
}