HTML5新增标签和新增API
2018-01-08 本文已影响18人
王小贱_ww
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>
