html5新增的js api,Html5 js的api的介绍

概述

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