讲给后台程序员看的前端系列教程(09)——HTML5标签(8)

最新推荐文章于 2024-06-17 09:10:20 发布

谷哥的小弟

最新推荐文章于 2024-06-17 09:10:20 发布

阅读量604

点赞数 1

分类专栏：讲给后台程序员看的前端系列教程文章标签： HTML 标签

本文链接：https://blog.csdn.net/lfdfhl/article/details/100549527

版权

讲给后台程序员看的前端系列教程专栏收录该内容

63 篇文章 53 订阅

订阅专栏

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

之前，我们已经学习了HTML常用标签、HTML文本标签、HTML语义标签、HTML结构标签、HTML列表标签、HTML表格标签、HTML表单标签；今天我们来瞅瞅HTML5中新增的标签。

HTML5新增标签

meter标签

meter标签用于表示度量结果，请看如下示例：

笔记本剩余电量:<meter value="7" min="0" max="10"></meter>

运行后结果如下图所示：
在这里插入图片描述

progress标签

progress标签用于表示进度，请看如下示例：

本月已完成工作:<progress value="80" max="100"></progress>

运行后结果如下图所示：
在这里插入图片描述

audio标签和video标签

在HTML5之前若想在网页中播放音频和视频都需要借助第三方插件。现在，HTML5直接提供了audio标签和video标签实现音频(推荐采用ogg格式)，视频(推荐采用VP8格式)的播放。请看如下示例：

	<h3>利用audio标签播放音频</h3>
	<audio src="word.mp3" controls="true">
		当您看到这行文字时，意味着您的设备不支持audio标签
	</audio>

	<br>
	<br>

	<h3>利用video标签播放视频</h3>
	<video src="movie.mp4" controls="true">
		当您看到这行文字时，意味着您的设备不支持video标签
	</video>

运行后界面效果如下图所示：

在这里插入图片描述

在HTML5中融入了众多非常实用的功能，比如：控件的拖拽，绘图，多媒体，地理位置，网络状态，数据存储，全屏等等。这部分功能多涉及到JavaScript，但是呢？嘿嘿，我们还没有讲JavaScript呢！在此，我们先体验一把，待我们学完JavaScript再来深入学习这部分知识。

HTML5监听网络状态

<!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('网络连接已断开！');
    })

    </script>
</body>

</html>

这玩意儿咋们熟悉不？太熟悉了！咋们在Android里面是不是可以通过监听系统广播判断网络的状态？！

HTML5定位功能

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML5定位</title>
</head>
<body>
    <script>
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
    } else {
        alert("您的浏览器不支持地理定位");
    }

    // 获取地理位置成功的回调函数
    function successCallback(position) {
        var longitude = position.coords.longitude;
        var latitude = position.coords.latitude;
        alert("经度=" + longitude + "，纬度=" + latitude);
    }

    // 获取地理位置失败的回调函数
    function errorCallback(error) {
        alert("获取用户位置失败");
    }
    </script>
</body>
</html>