HTML5新增属性介绍和地理位置
2017-08-22 18:28
190 查看
HTML5推出的缘由和目标：
目前web缓存在一些问题，比如兼容性问题，同样的页面，在不同的浏览器上显示的效果不一样，那么开噶人员需要做很多的工作去解决这一问题，需要花大把的时间在这上面，一些特殊的权限没有开发给开发人员，比如“定位权限，拉起照相机拍照权限、动画、绘画。。。，那么h5的推出就是了解这一序列的问题
H5解决了什么问题
（1）开发了一些特殊的权限给开发者：有了这些权限，开发可以很轻易的获取用户的定位信息，拍照功能等等
（2）解决不同的浏览器的兼容性问题：HTML5也可以理解是协议的标准，他让绝大部分浏览器生产商都遵守这一标准。
（3）文档结构不清晰：在之前的开发中，页面的布局都是使用div+css，不利于搜索引擎去抓取页面信息，比如说，浏览器抓取一片新闻网页的时候，根本抓不到作者，新闻发布时间等信息
Div和css图1
图1
H5
图2
H5的浏览器支持情况
Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。
Safari，Opera：同样支持html5很多年，支持也很好。
IE：IE10起比较好了，之前很差。（ie 9 都支持）
图2
语法的改变
（1）内容类型：（contentType）：HTML文件的后队名依旧是：HTML或htm，HTML文件的内容类型：“text/HTML”
（2）doctype声明
解析当前页面
HTML 4
<!DOCTYPE HTML
PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 5
<!DOCTYPE html>
Doctpe声明在HTML文件中必不可少的，位于HTML文档的第一行代码，随着HTML版本的更新，其声明方式也在更改。但是h5的doctype的声明方式向下兼容（兼容所有的低版本）
（3）字符集
H5之前
H5
HTML默认的字符集编码：（utm-8），之前大部分版本默认字符编码：ISO-8859-1
（4）标签标记省略
可以省略全部：body、tbody、head、colgroup 、HTML
不允许写结束标记的标签img、input、br、hr、base、link、meta。。。。
允许写结束标记的标签
P、li、dt、dd、tr、td、th
（5）布尔类型的属性
对于布尔类型的属性：比如：readonly、disabled、checked、selected当他们不写值得时候，
默认是true，同时对于值是任何东西都是无效的。说白了，只要写了这个属性，属性立马 生效
（6）属性值省略引号
在之前的学习中，属性值都放在双（单）引号里面，在h5中，如果属性值中不包括特殊字符，双引号和单引号都可以去掉
特殊字符：“<“，">"，“=”
<div >readonly=""可以去掉<input
type=text
readonly="readonly"/></div>
<div >改成单引号‘’<input
type='text'
readonly=""/></div>
<div >登录<input
type="text"value="登录"readonly/></div>
<div >登录<input
type="text"value=<登录>readonly/></div>
显示图5
图5显示图
新增和废弃的元素新增和废弃的属性
新增的结构（布局）标签：section、article、nav、footer、header、hgroup、aside、figure
新增的其他标签：video、audio、Mark、time、menu、canvas、SVG、details
Datalist、progress、progress、output、source。。
Input type的新增：email、URL、number、date pickers、range
废弃的标签：font、center、s、tt、u、big、basefont
全局属性
在HTML5中，定义了少量对所有元素都有效的属性。
1.Contenteditable：
<p contenteditable="true"
>我是
efd8
一个段落，但是我可以编辑</p>//可以被编辑的
<p contenteditable="false">我是一个段落，但是我可以编辑</p>//不可以被编辑的
<p
contenteditable>我是一个段落，没有设置contenteditable的值</p>//可以被编辑的
contenteditable=true属性之后，可以直接在页面上进行编辑。编辑之后，元素的宽高自动适应
contenteditable=true说明这个标签不能被编辑
注意：（1）如果只是设置了contenteditable，其默认的值得true
（2）contenteditable属性可以被继承，需要考虑“就近原则”
<div class="box"contenteditable="false">
<p contenteditable="true">我是一个段落，但是</p>//就近原则
<p >我是一个段落，但是</p>
<p >我是一个段落，我</p>
</div>
designMode：
来指定整个页面是否可以编辑，当designMode设置为“on”时候，相当于页面上所有的元素都设置contenteditable=true
</div>
<div>我是一个div</div>
</body>
<script>
document.designMode
= "on"
</script>
当designMode设置为“off”时候，相当于页面上所有的元素都设置contenteditable=false
注意：（1）如果同时设置了designMode和contenteditable属性，最终是否可以编辑，采用“就近原则”。
（2）该属性在ie8以下的浏览器无效。--》以兼容IE6、7、8为耻
Hidden属性可以实现对元素的隐藏，隐藏的元素不会被显示，同时不会占原有的位置。类似disply：none。
注意：hidden属性默认值是“hidden”，所以呢，设置该属性的时候，只需要些属性名就可以了
<style
>
div{
/*display:none;*/
/*visibility: hidden;*/
width:
100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div style="display:
none" >我想隐藏起来，让你找不到</div>
<div class="box">1</div>
<div style="visibility:hidden"
>我想隐藏起来，让你找不到</div>
<div class="box">2</div>
<div hidden>我想隐藏起来，让你找不到</div>
<div class="box">3</div>
</body>
显示图6
显示图6
hidden：看不见，不占位置
visibility: hidden;看不见占位置
display：none，看不见，不占位置
4. spellcheck
输入Apple试试看
<!--<inputtype="text"spellcheck="true"/>-->
<!--<input type="text"spellcheck="false"/>-->
<input
type="url"spellcheck="true"/>
<textarea
spellcheck="true"></textarea>
spellcheck属性是HTML5专门为input和textarea标签提供新属性。他的功能是对用户输入的内容进行拼写和语法检查 ，如果拼写出错了，文字下面有一个波浪线
Spellcheck=false 取消语法和拼写检测
Spellcheck=true 开启语法和拼写检测
5. tabindex
<style>
div{
background-color:gainsboro;
height:30px;
}
</style>
</head>
<body>
<div>
<label >名字</label><input
type="text"tabindex="1"/>
</div>
<div>
<label >省份</label><input
type="text"tabindex="4"/>
</div>
<div>
<label >性别</label><input
type="text"/>
</div>
<div>
<label >年龄</label><input
type="text"tabindex="3"/>
</div>
<div>
<label >电话</label><input
type="text"/>
<div>
<input type="button"value="提交"
</div>
<div>
<a href="http://www.anedu.com"tabindex="6">华点学院</a>
<a href="http://www.baidu.com">百度</a>
</div>
</div>
</body>
</html>
Tabindex=“正整数”；按键盘tab键可以选中（获取焦点）这里选择的标签可以是input输入框，input按钮，a标签等等，同时按tap键选择的顺序和设置的tabindex属性一致tabindex值越大，越后面选中。建议不使用tabindex = 0；
Tabindex=-1；按tap不选中
html5地理定位
1. HTML5 Geolocation Api（地理定位）允许对我们喜欢的网站分享我们的位置信息，
在开发中使用js获取我们当前位置坐标（经纬度）。
Geolocation 是基于navigator的一个新的属性，我们创建一个地理定位的方式
Var getlocation = navigator.geolocation创建一个地理位置
navigator.geolocation（）是基于地理地位的一个方法，他可以让我们获取我们当前的位置坐标
p id="p1">定位中</p>
</body>
<script>
window.onload= getLocation;
function getLocation(){
var locationEle =
document.getElementById("p1");
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){//getCurrentPosition获取当前的位置
var log
= position.coords.longitude;//获取经度、坐标
var lat
= position.coords.latitude;//获取维度
locationEle.innerHTML=
"经度"+log+"维度"+lat;
})
}else{
locationEle.innerHTML
= "该浏览器不支持地理定位";
}
}
</script>
注意：1. Location是个关键字，起变量名时不要用
2.当没有设置点击事件的时候，要页面加载就要调用函数。
出现的问题：获取到的坐标与实际位置的偏差，原因就是：系统调用的是火星坐标，
火星坐标：是一种国家保密插件，也叫做加密插件或者加偏或者SM模组，其实就是对真实坐标系统进行人为的加偏处理，按照特殊的算法，将真实的坐标加密成虚假的坐标，而这个加偏并不是线性的加偏，所以各地的偏移情况都会有所不同。而加密后的坐标也常被人称为火星坐标系统。
怎么解决获取的火星坐标的问题？
通过正规地图公司（如高德地图JSAPI、百度地图JSAPI）我们可以申请key值，百度ak值
通过这些网站提供秘钥进行解析，从而可以获得到真正的坐标值（无偏移）
注意：高德地图提供的key值获取到的实际坐标，用百度地图坐标反查会有偏移。反过来也是一样的，所以，我们以后再开发者的时候，使用哪个地图公司的key，就用哪个公司的地图。
目前web缓存在一些问题，比如兼容性问题，同样的页面，在不同的浏览器上显示的效果不一样，那么开噶人员需要做很多的工作去解决这一问题，需要花大把的时间在这上面，一些特殊的权限没有开发给开发人员，比如“定位权限，拉起照相机拍照权限、动画、绘画。。。，那么h5的推出就是了解这一序列的问题
H5解决了什么问题
（1）开发了一些特殊的权限给开发者：有了这些权限，开发可以很轻易的获取用户的定位信息，拍照功能等等
（2）解决不同的浏览器的兼容性问题：HTML5也可以理解是协议的标准，他让绝大部分浏览器生产商都遵守这一标准。
（3）文档结构不清晰：在之前的开发中，页面的布局都是使用div+css，不利于搜索引擎去抓取页面信息，比如说，浏览器抓取一片新闻网页的时候，根本抓不到作者，新闻发布时间等信息
Div和css图1
图1
H5
图2
H5的浏览器支持情况
Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。
Safari，Opera：同样支持html5很多年，支持也很好。
IE：IE10起比较好了，之前很差。（ie 9 都支持）
图2
语法的改变
（1）内容类型：（contentType）：HTML文件的后队名依旧是：HTML或htm，HTML文件的内容类型：“text/HTML”
（2）doctype声明
解析当前页面
HTML 4
<!DOCTYPE HTML
PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 5
<!DOCTYPE html>
Doctpe声明在HTML文件中必不可少的，位于HTML文档的第一行代码，随着HTML版本的更新，其声明方式也在更改。但是h5的doctype的声明方式向下兼容（兼容所有的低版本）
（3）字符集
H5之前
H5
<meta charset="UTF-8">
HTML默认的字符集编码：（utm-8），之前大部分版本默认字符编码：ISO-8859-1
（4）标签标记省略
可以省略全部：body、tbody、head、colgroup 、HTML
不允许写结束标记的标签img、input、br、hr、base、link、meta。。。。
允许写结束标记的标签
P、li、dt、dd、tr、td、th
（5）布尔类型的属性
对于布尔类型的属性：比如：readonly、disabled、checked、selected当他们不写值得时候，
默认是true，同时对于值是任何东西都是无效的。说白了，只要写了这个属性，属性立马 生效
（6）属性值省略引号
在之前的学习中，属性值都放在双（单）引号里面，在h5中，如果属性值中不包括特殊字符，双引号和单引号都可以去掉
特殊字符：“<“，">"，“=”
<div >readonly=""可以去掉<input
type=text
readonly="readonly"/></div>
<div >改成单引号‘’<input
type='text'
readonly=""/></div>
<div >登录<input
type="text"value="登录"readonly/></div>
<div >登录<input
type="text"value=<登录>readonly/></div>
显示图5
图5显示图
新增和废弃的元素新增和废弃的属性
新增的结构（布局）标签：section、article、nav、footer、header、hgroup、aside、figure
新增的其他标签：video、audio、Mark、time、menu、canvas、SVG、details
Datalist、progress、progress、output、source。。
Input type的新增：email、URL、number、date pickers、range
废弃的标签：font、center、s、tt、u、big、basefont
全局属性
在HTML5中，定义了少量对所有元素都有效的属性。
1.Contenteditable：
<p contenteditable="true"
>我是
efd8
一个段落，但是我可以编辑</p>//可以被编辑的
<p contenteditable="false">我是一个段落，但是我可以编辑</p>//不可以被编辑的
<p
contenteditable>我是一个段落，没有设置contenteditable的值</p>//可以被编辑的
contenteditable=true属性之后，可以直接在页面上进行编辑。编辑之后，元素的宽高自动适应
contenteditable=true说明这个标签不能被编辑
注意：（1）如果只是设置了contenteditable，其默认的值得true
（2）contenteditable属性可以被继承，需要考虑“就近原则”
<div class="box"contenteditable="false">
<p contenteditable="true">我是一个段落，但是</p>//就近原则
<p >我是一个段落，但是</p>
<p >我是一个段落，我</p>
</div>
designMode：
来指定整个页面是否可以编辑，当designMode设置为“on”时候，相当于页面上所有的元素都设置contenteditable=true
</div>
<div>我是一个div</div>
</body>
<script>
document.designMode
= "on"
</script>
当designMode设置为“off”时候，相当于页面上所有的元素都设置contenteditable=false
注意：（1）如果同时设置了designMode和contenteditable属性，最终是否可以编辑，采用“就近原则”。
（2）该属性在ie8以下的浏览器无效。--》以兼容IE6、7、8为耻
Hidden属性可以实现对元素的隐藏，隐藏的元素不会被显示，同时不会占原有的位置。类似disply：none。
注意：hidden属性默认值是“hidden”，所以呢，设置该属性的时候，只需要些属性名就可以了
<style
>
div{
/*display:none;*/
/*visibility: hidden;*/
width:
100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div style="display:
none" >我想隐藏起来，让你找不到</div>
<div class="box">1</div>
<div style="visibility:hidden"
>我想隐藏起来，让你找不到</div>
<div class="box">2</div>
<div hidden>我想隐藏起来，让你找不到</div>
<div class="box">3</div>
</body>
显示图6
显示图6
hidden：看不见，不占位置
visibility: hidden;看不见占位置
display：none，看不见，不占位置
4. spellcheck
输入Apple试试看
<!--<inputtype="text"spellcheck="true"/>-->
<!--<input type="text"spellcheck="false"/>-->
<input
type="url"spellcheck="true"/>
<textarea
spellcheck="true"></textarea>
spellcheck属性是HTML5专门为input和textarea标签提供新属性。他的功能是对用户输入的内容进行拼写和语法检查 ，如果拼写出错了，文字下面有一个波浪线
Spellcheck=false 取消语法和拼写检测
Spellcheck=true 开启语法和拼写检测
5. tabindex
<style>
div{
background-color:gainsboro;
height:30px;
}
</style>
</head>
<body>
<div>
<label >名字</label><input
type="text"tabindex="1"/>
</div>
<div>
<label >省份</label><input
type="text"tabindex="4"/>
</div>
<div>
<label >性别</label><input
type="text"/>
</div>
<div>
<label >年龄</label><input
type="text"tabindex="3"/>
</div>
<div>
<label >电话</label><input
type="text"/>
<div>
<input type="button"value="提交"
</div>
<div>
<a href="http://www.anedu.com"tabindex="6">华点学院</a>
<a href="http://www.baidu.com">百度</a>
</div>
</div>
</body>
</html>
Tabindex=“正整数”；按键盘tab键可以选中（获取焦点）这里选择的标签可以是input输入框，input按钮，a标签等等，同时按tap键选择的顺序和设置的tabindex属性一致tabindex值越大，越后面选中。建议不使用tabindex = 0；
Tabindex=-1；按tap不选中
html5地理定位
1. HTML5 Geolocation Api（地理定位）允许对我们喜欢的网站分享我们的位置信息，
在开发中使用js获取我们当前位置坐标（经纬度）。
Geolocation 是基于navigator的一个新的属性，我们创建一个地理定位的方式
Var getlocation = navigator.geolocation创建一个地理位置
navigator.geolocation（）是基于地理地位的一个方法，他可以让我们获取我们当前的位置坐标
p id="p1">定位中</p>
</body>
<script>
window.onload= getLocation;
function getLocation(){
var locationEle =
document.getElementById("p1");
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){//getCurrentPosition获取当前的位置
var log
= position.coords.longitude;//获取经度、坐标
var lat
= position.coords.latitude;//获取维度
locationEle.innerHTML=
"经度"+log+"维度"+lat;
})
}else{
locationEle.innerHTML
= "该浏览器不支持地理定位";
}
}
</script>
注意：1. Location是个关键字，起变量名时不要用
2.当没有设置点击事件的时候，要页面加载就要调用函数。
出现的问题：获取到的坐标与实际位置的偏差，原因就是：系统调用的是火星坐标，
火星坐标：是一种国家保密插件，也叫做加密插件或者加偏或者SM模组，其实就是对真实坐标系统进行人为的加偏处理，按照特殊的算法，将真实的坐标加密成虚假的坐标，而这个加偏并不是线性的加偏，所以各地的偏移情况都会有所不同。而加密后的坐标也常被人称为火星坐标系统。
怎么解决获取的火星坐标的问题？
通过正规地图公司（如高德地图JSAPI、百度地图JSAPI）我们可以申请key值，百度ak值
通过这些网站提供秘钥进行解析，从而可以获得到真正的坐标值（无偏移）
注意：高德地图提供的key值获取到的实际坐标，用百度地图坐标反查会有偏移。反过来也是一样的，所以，我们以后再开发者的时候，使用哪个地图公司的key，就用哪个公司的地图。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5——新增表单元素与属性（2）
- HTML5学习笔记简明版（6）：新增属性（1）
- HTML5获取地理位置信息
- HTML5 --地理位置
- html5新增标签和属性
- HTML5新增的属性和废除的属性
- html5表单新增的元素与属性
- 地理位置定位原理与介绍
- HTML5-地理位置接口
- 繁星H5之旅-HTML5表单新增元素与属性
- HTML5表单新增元素和属性(2)
- 基于HTML5的Geolocation获取地理位置，配合Google Map API反向地址解析（获取用户真实地址）
- html5表单新增3个属性
- HTML5 之Geolocation API (地理位置应用程序接口)
- CSS中position属性介绍(新增sticky)
- HTML5表单新增元素与属性 （续）
- html5获取地理位置信息4种方式详解
- Html5 Geolocation获取地理位置信息
- [HTML5 特效] HTML5 geolocation功能确定你当前所在的地理位置
- html5新增的属性和废除的属性简要概述