讲给Android程序员看的前端教程(09)——HTML5标签(8)

来源：互联网发布：wav音频分割软件编辑：程序博客网时间：2024/06/10 22:38

自定义View系列教程00–推翻自己和过往，重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理

探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础
Android多分辨率适配框架（2）— 原理剖析
Android多分辨率适配框架（3）— 使用指南

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl
本文视频教程：http://www.stay4it.com/my/course/37

课程安排

HTML不是程序设计语言，而是一种标记语言，它用一些标记、标签来说明文本的显示效果。要制作网页和建立网站，就必须对HTML语言有所了解。客观地讲：HTML标签没有多少逻辑性而言，为了大家更好的理解和记忆，我们对这些标签进行分门别类的讲解，主要分为：

HTML常用标签
HTML文本标签
HTML语义标签
HTML结构标签
HTML列表标签
HTML表格标签
HTML表单标签
HTML新增标签和API

嗯哼，来吧，我们继续HTML5标签的学习。咋了？你竟然有点担心学不会！？别逗了，这部分和我们常写的Java比起来简单多了，它的逻辑性也弱得多。所以，大胸弟你大可放心，就像看电影那样：一手拿着爆米花，一手拿着可乐，也完全可以看懂本教程。

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

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格式)的播放。请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>HTML的多媒体标签</title></head><body>    <h3>利用audio标签播放音频</h3>    <audio src="word.mp3" controls="true">        当您看到这行文字时，意味着您的设备不支持audio标签    </audio>    <br>    <br>    <h3>利用video标签播放视频</h3>    <video src="movie.mp4" controls="true">        当您看到这行文字时，意味着您的设备不支持video标签    </video></body></html>

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

这里写图片描述

HTML5强大的API

在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中依然可以！

阅读全文

4 0