HTML5 新增内容
程序员文章站
2022-07-04 23:11:35
1. 新增标签 音频 视频 画板 下拉菜单 包含媒介资源的标题 标题组 表示标记文字 拖动条 度量条 进度条 2. 音频与视频 音频格式(audio元素支持三种音频格式) 视频格式(video元素支持三种视频格式) audio 与 video 都有的三个属性
1. 新增标签
- 音频
<audio> <source src=""/> </audio>
- 视频
<video> <source src=""/> </video>
- 画板
<canvas id="myCanvas"> 您的浏览器不支持canvas标签 </canvas> <script> //先拿到canvas标签 var cvs = document.getElementById("myCanvas"); //准备上下文环境 var cxt = cvs.getContext("2d"); //绘画矩形 cxt.fillStyle = "red"; cxt.fillRect(0,0,200,200); </script>
- 下拉菜单
<!--以前--> <select name="" id=""> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> </select> <!--新标签--> <input type="text" list="data"/> <datalist id="data"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> </datalist>
- 包含媒介资源的标题
<figure> <figcaption>媒介的标题</figcaption> <img src="" alt=""/> <p></p> </figure>
- 标题组
<hgroup> <h2></h2> <h3></h3> </hgroup>
- 表示标记文字
<p>我是一段文本<mark>标记</mark></p>
- 拖动条
<input type="range"/>
- 度量条
<meter min="0" max="100" value="30">30%</meter>
- 进度条
<progress min="0" max="100" value="30"></progress>
2. 音频与视频
- 音频格式(audio元素支持三种音频格式)
IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
Ogg Vorbis | √ | √ | √ | ||
MP3 | √ | √ | √ | ||
Wav | √ | √ | √ |
- 视频格式(video元素支持三种视频格式)
IE | Firefox | Opera | Chrome | Safari | |
Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
- audio 与 video 都有的三个属性
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮 |
height | pixels | 设置视频播放器的高度 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放 |
- <video>的方法、属性及事件
方法 | 属性 | 事件 |
play() | currentSrc | play |
pause() | currentTime | pause |
load() | videoWidth | progress |
canPlayType() | videoHeight | error |
duration | timeupdate | |
ended | ended | |
error | about | |
paused | empty | |
muted | emptied | |
seeking | waiting | |
volume | loadedmetadata | |
height | ||
width |
3. 本地存储
注:cookie大概4k,本地存储大概5M
- localStorage
- 储存的值是永久保存,若用户不手动删除将长久存在
//设置本地数据 localStorage.setItem("name","David"); localStorage.setItem("age",20); //删除一条数据 localStorage.removeItem("age"); //删除所有数据 localStorage.clear(); //获取本地数据 var result = localStorage.getItem("name"); console.log(result);
- sessionStorage
- 生命周期只存在浏览器打开时,关闭则失效
//设置本地数据 sessionStorage.setItem("name","David"); sessionStorage.setItem("age",20); //删除一条数据 sessionStorage.removeItem("age"); //删除所有数据 sessionStorage.clear(); //获取本地数据 var result = sessionStorage.getItem("name"); console.log(result);
4. 地理位置
<input type="button" id="btn"/> <div id="box"></div> <script> var btn = document.getElementById("btn"); var box = document.getElementById("box"); btn.onclick = function () { if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(success,error,options); }else{ document.write("您的浏览器版本太低"); } } function success(position){ var weidu = position.coords.latitude; var jingdu = position.coords.longitude; box.innerHTML = "经度:" + jingdu + "纬度:" +weidu; } function error(error){ switch (error.code){ case error.PERMISSION_DENIED: box.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: box.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: box.innerHTML = "请求超时." break; case error.UNKNOWN_ERR: box.innerHTML = "An unknown error occurred." break; } } </script>