H5新标签&地理位置

H5新增标签

1. 新增的结构元素---语义化标签

• <header>----定义页眉
• <nav>-----定义导航
• <article>-----定义文章
• <section>-----定义文档中的节
• <aside>-----定义文章的侧边栏
• <footer>-----定义页脚
• <hgroup>-----定义网页标题元素(h1-h6)的组合
• <figure>-----定义媒介内容的分组，以及他们的标题
• <figcaption>----定义figure元素的标题

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

2. 新增的其它元素

• <time>-----定义日期/时间(语义化标签)

• <mark>-----定义有记号的文本。

• <progress>----定义任务的进度

• <datalist>----定义输入域的选项列表

• <embed>----定义外部交互内容或插件

• <audio>----定义声音内容

• <video>----定义视频

• <source>----定义图形

3. 新增的其它标签
   <bdi> <command> <wbr>
   <details> <dialog> <keygen> <meter> <output> <summary>
   <ruby> <rp> <rt> <track>

以上标签目前兼容性不太好，不常用

4. H5弃用的标签
   <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、 <s>、<isindex>、<noframes>、 <frameset> 、<strike>、<tt>、<u>和<xmp>。

input的新类型

1. input的新类型

• email：提交表单时检测值是否是一个电子邮箱格式。
• url：提交表单时检测值是否是一个url格式
• date：年-月-日格式的控件。
• time：时：分格式的控件。
• datetime：年-月-日 时：分 格式的控件(UTC时间)。
• datetime-local：年-月-日 时：分 格式的控件(本地时间)。
• month：年-月 格式的控件
• week：年-周 格式的控件。
• number：数字输入框。
• range：选择区域。
• tel：电话输入框。
• search：用于搜索，results属性加上放大镜图标
• color：调用系统选色器。

2. input的新属性

• placeholder：占位符，输入框提示信息。

• required：该input为必填项

• autofocus：在页面加载时，域自动地获得焦点。

• pattern：正则验证 如：pattern="[0-9]{7,12}"

• min/max：input能输入的最小/最大字节的长度

• step：针对number和range类型，每次递增step的值。

• list：指定一个datalist，作为下拉提示单。(list值为datalist标签的id)

    调用本地摄像头
    <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地理定位

Geolocation API用于获得用户的地理位置。
支持性检测 navigator.geolocation
getCurrentPosition(1.成功fn，2.失败fn，{3.数据收集})方法-返回数据

1. 请求成功函数(必须的参数)

• 经度：coords.longitude。
• 纬度：coords.latitude.
• 准确度：coords.accuracy
• 海拔：coords.altitude
• 海拔准确度：coords.altitudeAccuracy
• 行进方向：coords.hrading
• 地面速度：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