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是支持的。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,245评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,749评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,960评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,575评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,668评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,670评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,664评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,422评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,864评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,178评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,340评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,015评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,646评论 3 323
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,265评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,494评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,261评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,206评论 2 352

推荐阅读更多精彩内容

  • 学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
    Amyyy_阅读 2,065评论 0 16
  • H5新增标签 新增的结构元素---语义化标签 ----定义页眉 -----定义导航 -----定义文章 -----...
    闫子扬阅读 387评论 0 1
  • HTML5介绍 H5并不是新语言,而是HTML的第五次重大修改(版本),移动端支持优于PC端 所有主流浏览器都支持...
    印象rcj阅读 562评论 0 0
  • 第一章 HTML5 (2014年10月29日发布)新特性: 10个 (1)新的语义标签 (2)增强型表单 (3)视...
    fastwe阅读 951评论 0 1
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0 0