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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100549527

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义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>

这玩意陌生不?一点都不陌生!我们在Android里面也经常利用高德地图,百度地图实现定位功能;在HTML5中依然可以!

展开阅读全文

没有更多推荐了,返回首页