优势：新标签带来的是网页布局的改变及提升对搜索引擎的友好
<header>-----定义页眉
<nav>---------定义导航
<article>------定义文章
<section>-----定义文档中的节（section、区段）
<aside>-------定义文章的侧边栏
<footer>------定义页脚
<hgroup>---- 定义网页标题元素（h1-h6）的组合
<figure>------定义媒介内容的分组，以及它们的标题
<figcaption>-定义 figure 元素的标题
新增的其他元素
<time>--------定义日期/时间(语义化标签)
<mark>-------定义有记号的文本
例如一段文字中 有两个红色的字 或者 关键词 用这个包裹起来
<progress>---定义任务的进度
<datalist>-----定义输入域的选项列表
<audio>------定义声音内容
<video>------定义视频
<source>-----定义媒介源
<canvas>-----定义图形
input的新类型
email: 提交表单时检测值是否是一个电子邮件格式
url: 提交表单时检测值是否是一个url格式
date: 年-月-日格式的控件
time: 时:分格式的控件
datetime: 年-月-日 时:分 格式的控件（UTC时间）
datetime-local: 年-月-日 时:分 格式的控件（本地时间）
month: 年-月格式的控件
week: 年-周数格式的控件
number: 数字输入框 属性 min、max、step
range: 选择区域 属性 min、max、step
tel: 电话输入框
search: 用于搜索
color: 调用系统选色器
浏览器兼容
opera对新属性的支持性最好，ie10以下不支持，其他主流浏览器部分支持
input的新属性
placeholder: 占位符，输入框提示信息
required: 该input为必填项
autofocus: 在页面加载时，域自动地获得焦点
pattern: 正则验证 如: pattern="[0-9]{7,12}"
min/max: input能输入的最小/最大字节的长度
step: 针对number和range类型，每次递增step的值
list: 指定一个datalist，作为下拉提示单
<input type="text" list="data1"/>
<datalist id="data1">
<option value="111"></option>
<option value="2"></option>
<option value="33"></option>
</datalist>
调用本地硬件
调用本地摄像头
<input type="file" accept="image/*" capture="camera">
调用本地相册
<input type="file" capture="photo">
拨打电话
<a href="tel:110" mce_href="tel:110">报警请使劲戳</a>
发送短信
<a href="sms:18623427777">发短信</a>
Geolocation API 用于获得用户的地理位置
支持性检测 navigator.geolocation
支持度：IE6 7 8版本不支持
getCurrentPosition() 方法 - 返回数据
PS：单次定位请求
语法：getCurrentPosition( 1成功fn，2失败fn，{3数据收集} )
1、请求成功函数(必须的参数)
经度 : coords.longitude 纬度 : coords.latitude
准确度 : coords.accuracy 海拔 : coords.altitude
海拔准确度 : coords.altitudeAccuracy
行进方向 : coords.heading 地面速度 : coords.speed
时间戳 : new Date(pos.timestamp)
2、请求失败函数：失败编号 code
0 : 不包括其他错误编号中的错误
1 : 用户拒绝浏览器获取位置信息
2 : 尝试获取用户信息，但失败了
3 : 设置了timeout值，获取位置超时了
3数据收集 : (json的形式)
enableHighAcuracy : 更精确的查找，默认false
timeout : 超时时间（毫秒），默认infinity(无限)
maximumAge : 指定缓存时间（毫秒），默认0
frequency：位置更新频率
watchPosition() 方法 - 返回数据
watchPosition( 1成功fn，2失败fn，{3数据收集} )
PS：多次定位请求-----像setInterval
移动设备有用，位置改变才会触发
配置参数：frequency 更新的频率
关闭更新请求 : clearWatch() 方法----像clearInterval
例子:
<script type="text/javascript">
var box=document.getElementById("box");
window.onload=function(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(pos){
//成功函数
var l=pos.coords.longitude; //经度
var i=pos.coords.latitude; //纬度
box.innerHTML="当前位置经度为："+l+";当前位置纬度为："+i;
},function(err){
//失败函数
alert(err.code);
//err.code 失败的编码
},{
enableHighAcuracy:true,
timeout:5000,
maximumAge:2000
})
}else{
alert("设备不支持地理定位！")
}
}
</script>
百度地图接口文档：
- http://developer.baidu.com/map/
- web开发--Javascript API大众版
- 点击右上角--“API控制台”-- 申请密钥（ak）
- 复制保存‘访问应用（AK）’即‘密钥’
- 选择地图类型
- 复制代码
注意：
当你在你的服务提供商处，申请了https 协议证书以后，
你的网站就可以使用基于html5的地理定位了，否则IOS是不行的。
IOS9不支持,IOS10是支持的。
网友评论