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. Oracle 11g实时SQL监控 v$sql_monitor

    Oracle 11g实时SQL监控: 前面提到,在Oracle Database 11g中,v$session视图增加了一些新的字段,这其中包括SQL_EXEC_START和SQL_EXEC_ID, ...

  2. classmethod 和 staticmethod

    我一般很少用到. Talk is cheap, show you the code. #!/usr/bin/env python # -*- coding: utf-8 -*- ########### ...

  3. 摒弃FORM表单上传图片，异步批量上传照片

    之前作图像处理一直在用form表单做图片数据传输, 个人感觉low到爆炸而且用户体验极差,现在介绍一个一部批量上传图片的小技巧,忘帮助他人的同时也警醒自己在代码的编写时不要只顾着方便,也要考虑代码的健 ...

  4. Luogu P4169 [Violet]天使玩偶/SJY摆棋子

    传送门 二维平面修改+查询,cdq分治可以解决. 求关于某个点曼哈顿距离(x,y坐标)最近的点——dis(A,B) = |Ax-Bx|+|Ay-By| 但是如何去掉绝对值呢? 查看题解发现假设所有的点 ...

  5. jsp相关基础知识

    一.JSP简介 JSP全称是Java Server Page,它和Servlet一样,也是sun公司推出的一套开发动态web资源的技术,称为JSP/Servlet规范.其本质也是一个Servlet. ...

  6. windows 命令行操作 Mysql 数据库

    1 前言 有接手一个新项目,项目中到了 Mysql 数据库 ,这里总结下 windows 命令行操作 Mysql 数据库. 2 Cmd操作数据库 2.1 连接Mysql服务器,命令如下:(root用户 ...

  7. Mac 小记 — iTerm2、Zsh、Homebrew

    前言 写完 "Ubuntu 自动化配置" 这篇文章后,每次连服务器心情指数都上升好几个百分点,于是想着应该将 macOs 的开发环境也梳理梳理,应该会对开发效率有所增益. 1. i ...

  8. GitHub上README.md编写教程（基本语法）

    一.标题写法: 第一种方法: 1.在文本下面加上 等于号 = ,那么上方的文本就变成了大标题.等于号的个数无限制,但一定要大于0个哦.. 2.在文本下面加上 下划线 - ,那么上方的文本就变成了中标题 ...

  9. centos7下安装python3.6

    一.wget 官网下载到本地 进入家目录: cd ~ wget https://www.python.org/ftp/python/3.6.3/Python-3.6.3.tgz下载到本地 解压移动到/ ...

  10. java中的代码块是什么意思，怎么用

    代码块是一种常见的代码形式.他用大括号“{}”将多行代码封装在一起,形成一个独立的代码区,这就构成了代码块.代码块的格式如下:   方法/步骤     普通代码块:是最常见的代码块,在方法里用一对“{ ...