优势:新标签带来的是网页布局的改变及提升对搜索引擎的友好
<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是支持的。