浅谈HTML5新标签的浏览器兼容问题

HTML5 现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。

①　新特性：

1)绘画<canvas>。

有关canvas的介绍请见：http://blog.csdn.net/zhouziyu2011/article/details/65682406和http://blog.csdn.net/zhouziyu2011/article/details/66474969

2)用于媒介回放的<video>和<audio>。

有关video和audio的介绍请见：http://blog.csdn.net/zhouziyu2011/article/details/69084961

3)Web Storage的本地存储<localStorage>和会话存储<sessionStorage>。

有关localStorage和sessionStorage的介绍请见：http://blog.csdn.net/zhouziyu2011/article/details/58591829

4)语意化更好的内容元素，比如<article> <aside> <footer> <header> <nav> <section> <hgroup>。

5)表单控件<calendar> <date> <time> <email> <url> <search>。

6)新的技术<webworker> <websocket> <Geolocation>。

有关websocket的介绍请见：http://blog.csdn.net/zhouziyu2011/article/details/60871264

②　移除的元素：

1)纯表现的元素：<basefont> <big> <center> <font> <s> <strike> <tt> <u>。

2)对可用性产生负面影响的元素：<frame> <frameset> <noframes>。

③　处理HTML5新标签的浏览器兼容问题：

当在页面中使用HTML5新标签时，可能会得到三种不同的结果：

1)结果1：新标签被当作错误处理并被忽略，在DOM构建时会当作这个标签不存在。

2)结果2：新标签被当作错误处理，并在DOM构建时，这个新标签会被构造成行内元素。

3)结果3：新标签被识别为HTML5标签，然后用DOM节点对其进行替换。

不能识别HTML5新标签而不能使用，解决办法有两种：

1)方法1：实现标签被识别

通过document.createElement（tagName）方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式。

2)方法2：JavaScript解决方案

a)使用html5shim：

在<head>中调用以下代码：

<!--[if lt IE 9]><script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

当然也可以直接把这个文件下载到自己的网站上，但这个文件必须在head标签中调用。

b)使用kill IE6

在</body>之前调用以下代码：

<!--if lte IE 6]><script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->

④　区分HTML和HTML5：

1)DOCTYPE声明

2)新增的元素

浅谈HTML5新标签的浏览器兼容问题相关推荐

html5新特性移除哪些,html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？...
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
【Day05】Html5 有哪些新特性？如何处理 Html5 新标签的浏览器兼容问题？如何区分 Html 和 Html5？
Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5? 一.Html5 新特性 1. 拖拽释放(Drag and drop)API 2. 语义化更 ...
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5?
* HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画 canvas; 用于媒介回放的 video 和 audio 元素; 本地离线存储 localSt ...
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？...
新特性: 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频.视频API(a ...
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
*HTML5 现在已经不是SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. *绘画canvas 用于媒介回放的video 和audio 元素本地离线存储localStorage 长 ...
html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
(Q1) HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. (1)绘画 canvas; (2)用于媒介回放的 video 和 audio 元素; (3)本 ...
如何处理HTML5新标签的浏览器兼容问题?
方法一 : 1.使用静态资源的html5shiv包 <!--[if lt IE9]> <script src="http://cdn.static.runoob.com/l ...
html5中新增标签的兼容性如何设置,HTML5新标签的兼容性处理
普通浏览器普通不支持HTML5新标签的浏览器 -- 能正常解析,但会当初成 inline 元素对待在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只 ...
HTML5新标签对IE低版本浏览器的兼容处理
问题概述:IE8浏览器中还没有添加对HTML5新标签的支持,当在页面中使用HTML5新标签时,新标签不兼容 1)使用JavaScript新增元素的方法解决注意:使用javascript新增元素的方法 ...

浅谈HTML5新标签的浏览器兼容问题

浅谈HTML5新标签的浏览器兼容问题相关推荐

最新文章

热门文章