新增标签 *
Html5新增了很多语义化标签，这些标签多为块元素，其表现形式与div完全一致，即没有特殊样式 。新增现音但是标签div是无意义的块元素，而Html5新增的这些元素多为有意义的元素，例如header表达了头部的意思，在网页中任意暗含头部的结构都可以使用header标签。
article,视视频速 section,aside,header,nav,footer,address......
此外，Html5还新增了一些功能性标签，但是由于其在各个浏览器中的表现形式不一致，我们很少使用这些元素，取而代之的是组件 。这里不多做讨论 。频实
progress 表示运行中的放暂进度 等
input输入框
1.placeholder 用来描述输入字段预期值的提示信息 。输入字段为空时显示
2.type的停快类型
可以设置为number，date等 。type='number' 设置只能输入数字类型，火狐没效果，谷歌可以，兼容性差不建议使用
音视频
video视频
在video标签出现之前，如果想在网页中播放视频或者音频数据是进慢进倍非常困难的。H5中video标签可以向使用img显示图片一样简单去播放视频 。操作
属性：
src 需要引入的新增现音视频资源地址
controls是否显示视频的控件，比如播放暂停进度条音量全屏等 。
autoplay在视频就绪后马上播放 。标签跟muted搭配使用，否则可能不能自动播放 。视视频速
muted视频的频实音频为静音 。
loop当视频完成播放后再次开始播放
volume视频的放暂音量 0～1
duration视频的总时长
currentTime当前播放的进度
paused当前视频的状态是否暂停 暂停true
width设置宽度
height 设置高度
方法：
play()播放
pause()暂停方法：
load()重新加载当前视频
//controls 设置显示视频的控件 显示暂停播放进度条<video src="./1.mp4" controls></video>实现效果：当然，你自己放你的音频上去
代码实现：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><progress value="50" max="100"></progress><input type="number"><video src="./videos.mp4" controls></video><div class="btns"><button>播放</button><button>暂停</button><button>快进</button><button>快退</button><button>快倍速</button><button>慢倍速</button></div><div class="play"><button id="play">播放</button><button id="progress">获得播放百分比</button></div><div class="showprogress"></div><script>//1.获取视频var video=document.getElementsByTagName('video')[0];//2.获取音频var btns=document.getElementsByClassName('btns')[0];console.log(btns);//3.判断按钮的文本内容、绑定事件btns.onclick=function(){//4.获取按钮内的停快事件 因为这里产生了点击 所以有点击事件var text=event.target.innerText;if(text == '播放'){// console.log(video.volume); // 视频的音量// console.log(video.duration); //视频的总长度 // console.log(video.cuttertTime); //视频当前播放的时长 // console.log(video.paused); //视频当前播放状态 true为暂停video.play()}if(text == '暂停'){video.pause()}if(text == '快进'){video.currentTime +=10video.play()}if(text == '快退'){video.currentTime -=10video.play()}if(text == '快倍速'){console.log(video.playbackRate);video.playbackRate *= 1.8video.play()}if(text == '慢倍速'){video.playbackRate *= 0.5video.play()}}//需求：2. 同一个按钮实现暂停播放var play_btn = document.getElementById('play')play_btn.onclick = function(){if(video.paused){//判断视频播放状态 true为暂停video.play()play_btn.innerText = '暂停'}else{video.pause()play_btn.innerText = '播放'}}// 需求：3.获得播放的百分比var progress = document.getElementById('progress')progress.onclick= function(){var total = video.durationvar current = video.currentTimevar res = (current/total*100).toFixed(2) +'%'console.log(res);//将百分比存入divvar showprogress = document.getElementsByClassName('showprogress')[0]showprogress.innerText = res}</script></body></html>
audio音频
audio元素和video类似，是用来播放音频的 。其属性方法事件也几乎与video元素一致
chatgpt免费软件,进慢进倍chatgpt api 免费接口,chatgpt 聊天机器人教程,chatgpt 指令大全,chatgpt app
百度的CHATGPT将人机交互推向了一个新的境界 。不再局限于冷冰冰的机器界面 ，CHATGPT使得人们可以用自然语言与计算机进行对话 ，从而实现更加智能 、更加人性化的交互体验。
