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. Python：Day40 html

    URL包括三个部分:协议.域名.路径 htyper text markup language (html)  即超文本标记语言 前端一共包括三个内容:html.css.js html做为基础,让CSS ...

  2. wxWidgets与其它GUI工具库比较

    WxWidgets Compared To Other Toolkits   Some general notes: wxWidgets not only works for C++, but als ...

  3. P1337 [JSOI2004]平衡点 / 吊打XXX

    题目描述 如图:有n个重物,每个重物系在一条足够长的绳子上.每条绳子自上而下穿过桌面上的洞,然后系在一起.图中X处就是公共的绳结.假设绳子是完全弹性的(不会造成能量损失),桌子足够高(因而重物不会垂到 ...

  4. django 接受 ajax 传来的数组对象

    django 接受 ajax 传来的数组对象 发送:ajax 通过 POST 方式传来一个数组 接收:django 接受方式 array = request.POST.getlist(‘key[]’) ...

  5. disruptor 高性能之道

    disruptor是一个高性能的线程间异步通信的框架,即在同一个JVM进程中的多线程间消息传递.应用disruptor知名项目有如下的一些:Storm, Camel, Log4j2,还有目前的美团点评 ...

  6. 企业IT架构转型之道，阿里巴巴中台战略思想与架构实战

    前言: 晚上11点多闲来无事,打开QQ技术群,发现有关 '中心化与引擎化' 的话题,本着学习的心态向大佬咨询,大佬推荐一本书,我大概看了有四分之一的样子,对于我这种对架构迷茫的人来说,如鱼得水,于是特 ...

  7. flask使用基础

    1.安装 pip install Flask 基本依赖库: jinja2:实现对模板的处理 werkzeug:本质是socket服务器,用于接收http请求,并对请求进行预处理,然后触发Flaks框架 ...

  8. Codeforces Round #486 (Div. 3)-C. Equal Sums

    C. Equal Sums time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  9. WebPack牛刀小试

    现在页面的功能和需求越来越复杂,繁复杂乱的JavaScript代码和一大堆的依赖包都需要包含在前端页面中.如果还用手动处理就有点像在现代战场上使用小米加步枪的味道了. 为了减小开发的复杂度,前端社区涌 ...

  10. javaweb之Cookie学习

    Cookie简介 HTTP是无状态协议,服务器不能记录浏览器的访问状态,也就是说服务器不能区分中两次请求是否由一个客户端发出.这样的设计严重阻碍的Web程序的设计.如:在我们进行网购时,买了一条裤子, ...