欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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>