大前端 （九） -- HTML5 标签 8 -- 新增标签
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， eg：
<!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>
定位：
<!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>
meta
至此，已经介绍完了HTML5中常用的标签。我们可以用这些标签写出自己需要的、美观的页面。当然，我们期望别人通过搜索引擎能够找到我们的网页，从而提高访问量。这个该怎么办？这就是接下来要介绍的meta标签。
meta标签位于head标签中，是一种元数据(meta data)。它该标签不会显示在页面上，但是机器却可以识别。它主要用于定义页面的说明，关键字，最后修改日期和其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面)、搜索引擎和其它网络服务。
在此介绍几个meta中常用的属性。
http-equiv和content
content-type 表示HTML内容的编码格式，浏览器将根据这个参数来解析文字信息。例如：
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
或
<meta charset="utf-8">
expires
expires用于设定网页的到期时间。缓存是一种常见的性能优化手段。浏览器支持在本地缓存用户访问的网页，因此在缓存有效时间内重新访问这个网址，浏览器将从本地加载这个页面显示，该策略不仅用户响应快而且还不占用服务器的带宽。但是，如果缓存一直有效，那么用户将不能获得服务器更新后的内容。因此，缓存内容都会有超期时间，超过有效时间后，再次请求这个网址就会重新向服务器请求这个网页，这样就可以得到最新的内容。例如：
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
refresh
refresh 用于设置网页自动刷新的时间(单位为秒)和跳转到指定的网址。例如:
<meta http-equiv="refresh" content="3;URL=http://www.sohu.com"/>
Set-Cookie
Set-Cookie 用于当网页过期时自动删除本地 cookie。例如：
<meta http-equiv="Set-Cookie" content="User=lf; path=/; expires=Sunday, 10-Jan-16 80:00:00 GMT"/>
下一篇： 减肥小零食有哪些，减肥也可以吃的美美哒