美文网首页
HTML5新增标签和新增API

HTML5新增标签和新增API

作者: 王小贱_ww | 来源:发表于2018-01-08 14:35 被阅读18次
    010.PNG
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    
        笔记本剩余的电量<meter value="6" min="0" max="10"></meter>
        <br>
        <br>
        已经完成的进度<progress value="8"  max="10"></progress>
    
    <br>
    <br>
    <h3>audio标签</h3>
       <audio src="music.mp3" controls="true"></audio>
    
    <br>
    <br>
       <h3>video标签</h3>
      <video src="Welcome.mp4" controls="true"> 当您看到这行文字时,意味着您的设备不支持video标签 </video>
    
      
    
        
    </body>
    </html>
    
    • 新增的API,检测网络监听和获取定位信息
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML监听网络状态</title>
    </head>
    <body>
    
        <script type="text/javascript">
    window.addEventListener('online', function() {
            alert('网络连接已建立!');
        });
    
        window.addEventListener('offline', function() {
            alert('网络连接已断开!');
        });
    
    
       if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
       }
    
       function  successCallback(position){
         var longitude = position.coords.longitude;
            var latitude = position.coords.latitude;
            alert("经度=" + longitude + ",纬度=" + latitude);
    
       }
    
    function errorCallback(error) {
            alert("获取用户位置失败");
        }
    
        </script>
    
    
    
        
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:HTML5新增标签和新增API

          本文链接:https://www.haomeiwen.com/subject/evrbnxtx.html