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. GDB 命令回顾

    0) 为使用 GDB, 编译时需要加入调试信息 -g 选项,例如, $ gcc -g test.c -o test 1) 使用 GDB 开始调试 $ gdb test 也可以, $ gdb $ fil ...

  2. 工具篇-Json处理

    1. @JsonProperty和@SerializedName注解 使用场景 将一个json格式的字符串转换成某个java对象,或者将一个java对象转换成json格式的字符串时,如果json字符串 ...

  3. Java多线程（二）——常用的实现多线程的两种方式

    一.继承Thread类创建线程类 Java使用Thread类代表线程,所有的线程对象都必须是Thread类或其子类的实例.每个线程的作用是完成一定的任务,实际上就是执行一段程序流即一段顺序执行的代码. ...

  4. IDEA 编译 Jmeter 4.0 ( 二次开发_1 )

    IDEA 编译 Jmeter 下载 http://jmeter.apache.org/download_jmeter.cgi 下载源码后解压『Jmeter』,我这边下载的是最新的『apache-jme ...

  5. vi十六进制编辑

    指定行:n 光标行之前或之后的n个字符nl 之后 2l 光标位置两个字符后nh 之前 2h 光标位置两个字符前 光标行之上或之下的n个字符nk 之上 1k 光标位置1个字符之上nj 之下 1j 光标位 ...

  6. Tencent Cloud Developers Conference（2018.12.15）

    时间:2018.12.15地点:北京朝阳悠唐皇冠假日酒店

  7. C#_IO操作_查询指定文件夹下的每个子文件夹占空间的大小

    1.前言 磁盘内存用掉太多,想查那些文件夹占的内存比较大,再找出没有用的文件去删除. 2.代码 static void Main(string[] args) { while (true) { //指 ...

  8. VS2017设置主题和代码字体

    从Visual Studio Marketplace下载主题插件 VS2017带有一个软件超市(Visual Studio Marketplace),可以和Eclipse一样从软件超市中下载各种插件, ...

  9. Linux、Windows如何进行性能监控与调优

    1.Linux命令行工具 推荐:CentOS 7 1.1 top命令 top命令的输出如下: top命令的输出可以分为两部分:前半部分是系统统计信息,后半部分是进程信息.在统计信息中, 第1行是任务队 ...

  10. 【Java并发.6】结构化并发应用程序

    6.1 在线程中执行任务 应用程序提供商希望程序支持尽可能多的用户,从而降低每个用户的服务成本,而用户则希望获得尽可能快的响应.大多数服务器应用程序都提供了一种自然的任务边界选择方式:以独立的客户请求 ...