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. day04 if判断、while条件循环、for迭代器循环部分使用举例

    一:if判断 1.成绩>=90,那么:优秀         如果成绩>=80且<90,那么:良好         如果成绩>=70且<80,那么:普通         其 ...

  2. appium+python自动化56-微信小程序自动化（摩拜为例）

    前言 最近微信的小程序越来越多了,随之带来的问题是:小程序如何做自动化测试? 本篇以摩拜小程序为例,介绍如何定位小程序里面的元素 运行环境: android 7.0 appium v1.7.1 web ...

  3. selenium中遇到div弹框，一起引申到其他弹框

    1.div弹框和DOM普通元素一样处理 2.出现一下就自动消失的弹框,也是在DOM中有描述的,可以使用xpath,用其内容定位 3.(转,其他弹框处理,包括alert和不同windows) https ...

  4. 获得数值型数组的所有元素之和(分别使用增强for循环和普通for循环)

    package com.Summer_0419.cn; /** * @author Summer * 获得数值型数组的所有元素之和 */public class Test_Method13 { pub ...

  5. UITextFieldDelegate 说明

    - (BOOL)textFieldShouldBeginEditing:(UITextField *)textField  // 返回YES,允许进行编辑 - (void)textFieldDidBe ...

  6. Java多线程学习(一)---并发与多线程

    Java并发与多线程 摘要: 1. 并发与并行的区别,何为并发编程,并发编程的优势在哪 2. 多线程.多任务.多进程机制概述 3. 多线程.多任务.多进程机制与编程思想的关系 一.并发 1.1 并发与 ...

  7. C# WPF仿360安全卫士11

    首先上效果图: 这是我的第一篇随笔,最近因为写一个播放器,开始学习WPF相关技术,随着不断入坑,播放器倒是做出来了,掉坑里了... 本着闲着也是闲着的精神,拿360开刀了: 主界面主要使用DMSkin ...

  8. Python3 与 C# 基础语法对比（就当Python和C#基础的普及吧）

      文章汇总:https://www.cnblogs.com/dotnetcrazy/p/9160514.html 多图旧排版:https://www.cnblogs.com/dunitian/p/9 ...

  9. .Net Core2.0下使用Dapper遇到的问题

    今天成功把.Net Framework下使用Dapper进行封装的ORM成功迁移到.Net Core 2.0上,在迁移的过程中也遇到一些很有意思的问题,值得和大家分享一下.下面我会还原迁移的每一个过程 ...

  10. ASP.NET MVC5+EF6+EasyUI 后台管理系统（92）-打印EasyUI 的datagrid表格

    前言 应用系统有时候需要打印Datagrid的表格内容,我们本节就来学习打印datagrid内容 打印主要使用:web打印(我们之前有讲过web打印插件jqprint) + 将datagrid重新编制 ...