1 HTML5的变化
1.1 HTML5推出的理由
目前文本存在一定的问题,比如说兼容性,同样的内容,同样的页面在不同浏览器上显示不一样,那么开发者就会需要额外的工作来解决问题。
一些特殊的权限没有开放给开发人员,比如定位、拍照等,h5的推出就是为了解决这一系列的问题
(1)开放了一些特殊的权限给开发者,开发者通过这些权限可以获取用户的定位,拍照功能等
(2)解决不同浏览器的兼容性问题,可以理解为协议标准
(3)文档结构不清晰,我们在之前的开发中,页面的布局都是使用div+CSS,不利于搜索引擎抓取页面信息,如浏览器抓起新闻网页的时候,抓不到作者、新闻发布时间等
(4)Chrome,Firefox:支持html5很多年,而且有自动升级,支持最好。
(5)Safari,Opera:同样支持html5很多年,支持也很好。
(6)IE:IE10起比较好了,之前很差。
1.2语法的改变
(1)内容类型<>HTML文件后缀名html或htm,内容类型“text/”
(2)doctype
h5之前
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
h5
<!DOCTYPE html>
doctype声明在html文件中必不可少,位于第一行,随着版本更新,声明方式也在更改,但是html5的声明方式向下兼容(所有低版本)
(3)字符集
h5之前
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
h5
<head lang="en">
HTML5的默认编码:UTF-8,之前大部分为ISO-8839
(4)标签标记省略
可省略全部标签body、tbody、html
不允许写结束标记的标签img、input、br、hr、link、
允许写结束标记的标签p、li、dt、dd、tr、tb、td
(5)布尔类型
对于布尔类型的属性如:readonly、disabled不写值的时候,默认为true
(6)属性值
属性值是放在双(单)引号中的,h5如果不包含特殊值,单双引号可以去掉
1.3新增和废弃的元素新增和废弃的属性
新增的标签:section、article、nav、footer、header、figure、asidk、bgroup。。。
新增的其他标签:video、acdio、mark、time、meau、dtails、datalist。。。
input type新增:email、url、number、date pickers、range、tel。。。
废弃的标签:font、center、s、tt、u、big、basefont。。。
1.4全局属性
在HTML5中,定义了少量对所有元素都有效的属性
1、contenteditable
标签设置该属性为true之后,可以直接在页面上进行编辑,编辑之前宽高自动适应,false则无法编辑。如果只设定了contenteditable,则默认值是true
<p contenteditable="true">这群只有我还在欧洲</p> 可以被编辑
<p contenteditable="false">这群只有我不是狗托了</p> 不可以被编辑
<p contenteditable>这群只有我不是狗托了</p> 可以被编辑
注意:(1)属性可以被继承
(2)需要考虑“就近原则”
2、designMode用来指定整个页面是否可以编辑,为“on”是可以编辑
为“off”时则不能编辑
如果同时设置了designMode和contenteditable,最终是否可以编辑,采用“就近原则”
在ie8以下的浏览器无效
3、hidden
hidden属性可以实现对元素的隐藏,隐藏的元素不会被显示,不会站原有的位置
注意:默认值为hidden,所以只要属性名就可以了
hidden:看不见,不占位
visibility:hidden:看不见,占位置
display:none:看不见,不占位
4、spellcheck
是HTML5专门为input和textarea标签提供新属性,用于检查语法和拼写,出错下方会出现波浪线,true开启检查、false取消检查
5、tabindex
tabindex:“正整数”:按键盘tab可以选中,对象为各种输入框和标签,同时选择顺序和tabindex属性有关,值越大,越后面选中,建议不使用tabindex=0
12 HTML5地理定位
geolocationAPI(地理定位)允许分享我们的位置信息,在开发中使用JS获取位置坐标(经纬度)。
geolocation基于navigator的一个新属性,创建地理定位的方式
var geolocation = navigator.geolocation
getCurrentPosition是基于地理定位的一个方法,可以让我们获取到当前的位置
window.onload = getLocation;
function getLocation(){
var locationEle = document.getElementById("p1");
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var log = position.coords.longitude;//获取经度
var lat = position.coords.latitude;//获取纬度
locationEle.innerHTML = "经度" + log + "纬度" + lat;
});
}else{
locationEle.innerHTML = "该浏览器不支持地理定位"
}
}
注意:location是关键字,不能用作变量名
没有设置点击事件时,要设置页面加载函数
获取到的坐标与实际位置有偏差,原因是系统使用的是火星坐标
火星坐标是一种国家保密插件,也叫做加密插件或者加偏或者SM模组,其实就是对真实坐标系统进行人为的加偏处理,按照特殊的算法,将真实的坐标加密成虚假的坐标,而这个加偏并不是线性的加偏,所以各地的偏移情况都会有所不同。而加密后的坐标也常被人称为火星坐标系统。
通过正规地图公司(高德JSAPI、百度JSAPI)我们可以申请key值,通过网站提供的密钥进行解析,从而可以获取到真正的坐标值
注意:高德地图提供key值获取到的实际坐标,用百度地图反查会有偏移,反过来一样,所以开发时要注意只能用一种地图工具