HTML5新增标签和新增API

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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,079评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,064评论 19 139
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 47,133评论 6 342
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,599评论 4 61
  • (多图预警,原谅我截图这么密集,因为要是可以的话,我宁愿一帧也不错过) 我们来说说星爷电影里有哪些细思极恐的地方 ...
    舒灿阅读 4,766评论 0 3

友情链接更多精彩内容