概述

HTML5 并不仅仅只是html标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将web作为应用开发平台的HTML语言。

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可以开发网页版游戏。

一、语义标签 新增标签以及语义标签(部分)

语义标签：

在段落标签

无/有序列表

  • /
  1. 、

~

一些列标题标签的基础上,HTML5增加了大量更有意义的语义标签，更有利于搜索引擎去检索或辅助设备来理解HTML页面内容。

导航

页眉

页脚

区块

文章

侧边栏

进度条

新增标签：

几个颠覆性的标签：、、

以上两点都只是简单举例，具体属性介绍与用法自己去熟悉H5的官方文档

二、html5的新特性(js部分)

案例：浏览器换肤

这需要在用户客户端存储一些数据，之前是使用cookie。

Html5 里面新增了两个对象，让我们去保存数据。

sessionStorage和localStorage

以后数据可以直接保存在这个里面。

这两个对象的区别：

localStorage里的数据是永久保存。(比如记录浏览器用户搜索历史)

sessionStorage里的数据是缓存在浏览器内存里的。

详细代码：

html部分：



换肤

粉色

黄色

蓝色

京东红



js部分：

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;
}

三、HTML5的定位以及调用百度地图的步骤

使用js 提供的api，让我们可以获取到用户的经纬度。然后调用第三方接口(百度地图/高德地图)，做一些基于lbs(Location base service)的服务，比如微信、外卖、陌陌等。

//首先获取经纬度，调用百度地图api
//查看H5文档里地理定位的api 在pc端模拟一个经纬度(获取卫星定位 pc没有硬件支持 )。
//用来获取用户的当前位置。
function showPosition(position){
//获取到经纬度
var p1 = position.coords.latitude;
var p2 = position.coords.longitude;
//开发时在这里去调用第三方接口
//在移动端这段代码绝对没问题，但pc端在这里只能模拟一个经纬度。
}
//这是一个回调函数(将一个函数作为参数传递的函数)
//成功获取用户位置时被调用
window.navigator.geolocation.getCurrentPosition(showPosition);
//获取经纬度，引入百度的js库(需先申请密钥)，调用百度地图。
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#panorama {
height: 500px;
width:5oopx;
overflow: hidden;
}
//页面要渲染街景(非实时)地图的位置
//假如已经获取到(鲁东大学北区逸夫实验楼)经纬度
var jd = "121.361273";
var wd = "37.526138";
var panorama = new BMap.Panorama('panorama');
//将要显示的区域坐标传入，根据经纬度坐标展示全景图
panorama.setPosition(new BMap.Point(jd,wd));