概述
HTML5 并不仅仅只是html标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将web作为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可以开发网页版游戏。
一、语义标签 新增标签以及语义标签（部分）
- 语义标签：
在段落标签<p>无/有序列表<ul>/<ol>、<h1>~<h6>一些列标题标签的基础上,HTML5增加了大量更有意义的语义标签，更有利于搜索引擎去检索或辅助设备来理解HTML页面内容。
<nav> |
导航 |
|---|---|
<header> |
页眉 |
<footer> |
页脚 |
<section> |
区块 |
<article> |
文章 |
<aside> |
侧边栏 |
<progress> |
进度条 |
- 新增标签：
几个颠覆性的标签：<video>、<audio>、<canvs>
以上两点都只是简单举例，具体属性介绍与用法自己去熟悉H5的官方文档
二、html5的新特性（js部分）
案例：浏览器换肤
这需要在用户客户端存储一些数据，之前是使用cookie。
Html5 里面新增了两个对象，让我们去保存数据。
sessionStorage和localStorage
以后数据可以直接保存在这个里面。
这两个对象的区别：
localStorage里的数据是永久保存。（比如记录浏览器用户搜索历史）
sessionStorage里的数据是缓存在浏览器内存里的。
详细代码：
html部分：
<div style="float: right;margin-right:30px;">
<select id="changeId">
<option value="">换肤</option>
<option value="pink">粉色</option>
<option value="yellow">黄色</option>
<option value="blue">蓝色</option>
<option value="#E92322">京东红</option>
</select>
</div>
js部分：
<script>
document.querySelector("#changeId").onchange = function(){
var color = this.value;
document.body.style.backgroundColor = color;
//把数据保存到localStorage里面。
//以键值对的方式去保存
window.localStorage.setItem("bgcolor","color")
};
//页面一打开时，将localStorage里的数据拿出来，设置到document.body.style.backgroundColor上。
var color = window.localStorage.getItem("bdcolor");
if(color){
document.body.style.backgroundColor = color;
}
</script>
三、HTML5的定位以及调用百度地图的步骤
使用js 提供的api，让我们可以获取到用户的经纬度。然后调用第三方接口（百度地图/高德地图），做一些基于lbs（Location base service）的服务，比如微信、外卖、陌陌等。
//首先获取经纬度，调用百度地图api
//查看H5文档里地理定位的api 在pc端模拟一个经纬度（获取卫星定位 pc没有硬件支持 ）。
<script>
//用来获取用户的当前位置。
function showPosition(position){
//获取到经纬度
var p1 = position.coords.latitude;
var p2 = position.coords.longitude;
//开发时在这里去调用第三方接口
//在移动端这段代码绝对没问题，但pc端在这里只能模拟一个经纬度。
}
//这是一个回调函数（将一个函数作为参数传递的函数）
//成功获取用户位置时被调用
window.navigator.geolocation.getCurrentPosition(showPosition);
</script>
//获取经纬度，引入百度的js库（需先申请密钥），调用百度地图。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#panorama {
height: 500px;
width:5oopx;
overflow: hidden;
}
</style>
<body>
//页面要渲染街景（非实时）地图的位置
<div id = "panorama"></div>
</body>
<script>
//假如已经获取到（鲁东大学北区逸夫实验楼）经纬度
var jd = "121.361273";
var wd = "37.526138";
var panorama = new BMap.Panorama('panorama');
//将要显示的区域坐标传入，根据经纬度坐标展示全景图
panorama.setPosition(new BMap.Point(jd,wd));
</script>
网友评论