html5入门教程（一）语义化标签和地理位置API

优势：新标签带来的是网页布局的改变及提升对搜索引擎的友好

---

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

百度地图接口文档：

1. http://developer.baidu.com/map/
2. web开发--Javascript API大众版
3. 点击右上角--“API控制台”-- 申请密钥（ak）
4. 复制保存‘访问应用（AK）’即‘密钥’
5. 选择地图类型
6. 复制代码

注意：
当你在你的服务提供商处，申请了https 协议证书以后，
你的网站就可以使用基于html5的地理定位了，否则IOS是不行的。
IOS9不支持,IOS10是支持的。