1.h5的部分标签浏览器兼容性问题

解决方案：

<head>

<!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

</head>

html5shiv.main.js中的具体代码如下：

(function(k,m){
var g="3.7.0";
var d=k.html5||{};
var h=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
var c=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
var q;
var i="_html5shiv";
var a=0;
var o={};
var e;
(function(){
try{
var t=m.createElement("a");
t.innerHTML="<xyz></xyz>";
q=("hidden" in t);
e=t.childNodes.length==1||(function(){
(m.createElement)("a");
var v=m.createDocumentFragment();
return(typeof v.cloneNode=="undefined"||typeof v.createDocumentFragment=="undefined"||typeof v.createElement=="undefined")
}())
}catch(u){
q=true;
e=true
}
}());
function f(t,v){
var w=t.createElement("p"),u=t.getElementsByTagName("head")[0]||t.documentElement;
w.innerHTML="x<style>"+v+"</style>";
return u.insertBefore(w.lastChild,u.firstChild)
}
function l(){
var t=j.elements;
return typeof t=="string"?t.split(" "):t
}
function p(t){
var u=o[t[i]];
if(!u){u={};
a++;
t[i]=a;
o[a]=u
}
return u
}
function n(w,t,v){
if(!t){
t=m
}
if(e){
return t.createElement(w)
}
if(!v){
v=p(t)
}
var u;
if(v.cache[w]){
u=v.cache[w].cloneNode()
}else{
if(c.test(w)){
u=(v.cache[w]=v.createElem(w)).cloneNode()
}else{
u=v.createElem(w)
}
}
return u.canHaveChildren&&!h.test(w)?v.frag.appendChild(u):u
}
function r(v,x){
if(!v){
v=m
}
if(e){
return v.createDocumentFragment()
}
x=x||p(v);
var y=x.frag.cloneNode(),w=0,u=l(),t=u.length;
for(;w<t;w++){
y.createElement(u[w])
}
return y
}
function s(t,u){
if(!u.cache){
u.cache={};
u.createElem=t.createElement;
u.createFrag=t.createDocumentFragment;
u.frag=u.createFrag()
}
t.createElement=function(v){
if(!j.shivMethods){
return u.createElem(v)
}
return n(v,t,u)
};
t.createDocumentFragment=Function("h,f","return function(){
var n=f.cloneNode(),c=n.createElement;
h.shivMethods&&("+l().join().replace(/[\w\-]+/g,function(v){
u.createElem(v);
u.frag.createElement(v);
return'c("'+v+'")'
})+");
return n
}")(j,u.frag)
}
function b(t){
if(!t){
t=m
}
var u=p(t);
if(j.shivCSS&&!q&&!u.hasCSS){
u.hasCSS=!!f(t,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{
display:block
}
mark{
background:#FF0;color:#000
}
template{
display:none
}")
}
if(!e){
s(t,u)
}
return t
}
var j={
elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:g,shivCSS:(d.shivCSS!==false),supportsUnknownElements:e,shivMethods:(d.shivMethods!==false),type:"default",shivDocument:b,createElement:n,createDocumentFragment:r
};
k.html5=j;
b(m)
}(this,document)
);

2.h5中新的标签

新的语意和结构标签：

3.H5地理位置相关

<!doctype html>
<head><title></title></head>
<body>
<p id="position_text"></p>
<div id="position_map" style="width:100%; height:500px;">
</div>
</body>
</html>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script type="text/javascript">
if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(function(p){
		var longitude = p.coords.longitude;
		var latitude = p.coords.latitude;
		showMap(latitude, longitude);
	}, function(e){
		var msg = e.message;
		alert(msg);
	}, {

	});
}else{
	alert("no");
}

var showMap = function(latitude, longitude){
	var map = new BMap.Map("position_map");
	var point = new BMap.Point(longitude, latitude);
	map.centerAndZoom(point, 20);
	window.map = map;
}
</script>

　　

H5的使用的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  4. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  5. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  6. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  7. H5程序员如何利用cordova开发跨平台应用

    什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...

  8. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  9. 【腾讯Bugly干货分享】H5 视频直播那些事

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...

  10. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

随机推荐

  1. JSoup抓取本地页面

    File in = new File("C:/Users/li/Desktop/2.html"); Document doc01 = Jsoup.parse(in, "U ...

  2. Python -处理PDF

    处理pdf文档 第一. 从文本中提取文本 第二. 创建PDF 两种方法 #使用PdfFileWriter import PyPDF2 pdfFiles = [] for filename in os. ...

  3. 进程同步控制(锁,信号量,事件), 进程通讯(队列和管道,生产者消费者模型) 数据共享(进程池和mutiprocess.Pool模块)

    参考博客 https://www.cnblogs.com/xiao987334176/p/9025072.html#autoid-1-1-0 进程同步(multiprocess.Lock.Semaph ...

  4. Google机器学习课程基于TensorFlow ： https://developers.google.cn/machine-learning/crash-course

    Google机器学习课程基于TensorFlow  : https://developers.google.cn/machine-learning/crash-course         https ...

  5. JVM-自动内存管理机制

    关于GC: 垃圾收集通常被称为"GC",经过半个世纪的发展,内存动态分配与内存回收技术已经相当成熟.那我们为何还要了解GC和内存分配呢? 当我们需要排除各种内存溢出.内存泄露问题时 ...

  6. Python股票分析系列——数据整理和绘制.p2

    该系列视频已经搬运至bilibili: 点击查看 欢迎来到Python for Finance教程系列的第2部分. 在本教程中,我们将利用我们的股票数据进一步分解一些基本的数据操作和可视化. 我们将要 ...

  7. python--递归（附利用栈和队列模拟递归）

    博客地址:http://www.cnblogs.com/yudanqu/ 一.递归 递归调用:一个函数,调用的自身,称为递归调用 递归函数:一个可以调用自身的函数称为递归函数 凡是循环能干的事,递归都 ...

  8. 从 0 到 1 实现 React 系列 —— 3.生命周期和 diff 算法

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  9. Python全栈开发之路 【第十七篇】：jQuery的位置属性、事件及案例

    位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  10. 【转】linux if 判断

    UNIX Shell 里面比较字符写法: -eq   等于-ne    不等于-gt    大于-lt    小于-le    小于等于-ge   大于等于-z 空串=    两个字符相等!=    ...