几个解决兼容IE6\7\8不支持html5标签的几个方法_模板无忧
几个解决兼容IE6\7\8不支持html5标签的几个方法_HTML5教程
推荐：本文讲一下在canvas中画出矩形和圆形的办法，他们属于基础图形。当然，基础图形本来不止他们，但在canvas中，只有画矩形与圆形不需要用其他方法模拟,感兴趣的朋友可以了解下
html5大行其道的时代已经到来。如果你还在等待浏览器兼容，说明你已经与web脱节几条街了。当然，这得益于移动客户端的蓬勃发展。如果还在纠结于，是否应该掌握html5和3技术时，请狠狠的抽自己几个嘴巴，然后，苦学吧！因为前端的春天已经到来，而且不止一个春天。如果你不信，我只能说：爱信不信！ 下面我们来看一个标准的html5标签结构：（我这里只是说标签，其它概不涉及） 复制 代码如下: &!DOCTYPE HTML& &html& &head& &meta charset="gb2312"& &title&html5&/title& &/head& &body& &header& &nav&&/nav& &/header& &article& &section& &h2&&/h2& &p&&/p& &/section& &/article& &footer&&/footer& &/body& &/html& html5标签的进步之处当然于它的语义化更直观。当然，这只是html5的进步的九牛之一毛，有人建议说：不要说html5的进步是革命性的，而是发展性的！我不反对此说法，但某方面的确是革命性的。这里不想跑题，我们只说标签。 当然，兴奋于如此美妙的语义化标签时，不仅仍要追问:IE支持吗？很不幸，答案是否定的。如果你已经被IE搞怕了，你只得继续忍受它无尽的折磨。(IE9和IE10已经兼容支持html5和css3.0) 不过你要庆幸，你生活的这个时代有很多天才。有人已经帮你把这个问题解决了！虽然，不能称上完美！ 下面我们来看几个解决兼容IE6\7\8不支持html5标签的几个方法： 1、javascript: document.createElenment(&......&) IE6\7\8不支持的部分原因是，它们不认为footer是一个有效的html标签。那么我们把它&制造&成一个标签不就行了吗？最直接的办法当然是，javascript 的方式创建：document.createElenment(&......&)! 复制代码 代码如下: (function(){ var element=['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption'], len=element. while(len--){ document.createElement(element[i]) } })(); 这只是简单创建几典型的html5标签，让它们在IE6\7\8可以成为标签。 有人已经写了一个完整的js文件，你只需要引入既可，像这样： &!--[if lt ie 9]& &script src=&/svn/trunk/html5.js&&&/script& &![endif]--& 也有写作 &!--[if lte IE 9]& &script src=&/svn/trunk/html5.js&&&/script& & ![endif]--&html5shiv和html5shim的区别只有&m&和&v&，没有其它区别！当然这不是我说的。原文是:...the only difference is that &one has an m and one has a v - that's it.& 这里要做一个特别的说明：就是IE特有的注释判断： lte：就是Less than or equal to的简写，也就是小于或等于的意思。 lt ：就是Less than的简写，也就是小于的意思。 gte：就是Greater than or equal to的简写，也就是大于或等于的意思。 gt ：就是Greater than的简写，也就是大于的意思。 ! ： 就是不等于的意思，跟javascript里的不等于判断符相同 因为IE9虽然支持html5标签，但支持的不是很完整，所以，也可以写&lte&,这取决于你的选择！ 当然，不要忘了指定新建标签的display属性，大多情况下我希望标签是block的： 复制代码 代码如下:header,footer,article,aside,section,nav,menu,hgroup,details,dialog,figure,figcaption{display:block}2、嵌套标签的方法 其实说白了就是在，语义化的html5标签内嵌套div等可用标签，然后只给div写样式，我是不赞成这样的写法的。这样做还不如，给标签一个有语义化的id或者class! 复制代码 代码如下: &!--[if lt IE 9]& &style& body & * .section { color: #ff0; } &/style& &![endif]--& &style& section .section { color: #f00; } &/style& &section&&div class="section"&内容测试...&/div&&/section& 但如果类似于这样的结构，用用也无防： 复制代码 代码如下: &nav & &ul class="test"& &li&&/li& &li&&/li& &li&&/li& &/ul& &/nav& 3、IE条件注释 复制代码 代码如下: &!--[if lt IE 9]&&div class="section"&&![endif]--& &!--[if IE 9]&&section class="section"&&![endif]--& &!--[if !IE]&&!--&&section class="section"&&!--&![endif]--& ...... &!--[if lt IE 9]&&/div&&![endif]--& &!--[if IE 9]&&/section&&![endif]--& &!--[if !IE]&&!--&&/section&&!--&![endif]--& 再看一遍IE特有的注释判断： lte：就是Less than or equal to的简写，也就是小于或等于的意思。 lt ：就是Less than的简写，也就是小于的意思。 gte：就是Greater than or equal to的简写，也就是大于或等于的意思。 gt ：就是Greater than的简写，也就是大于的意思。 ! ： 就是不等于的意思，跟javascript里的不等于判断符相同 相信大家都明白，这是怎么回事！这是一个更加蛋疼的办法！大量的html代码使原本想语义化的代码更加混乱不堪。而且要对样式的书写也不利。 4、使用ns定义文档的命我空间 xmlns即是XHTML namespace的缩写，也就是所谓的&命名空间&。与DOCTYPE声明一样，xmlns也属于一种声明。与HTML文档中仍然存在DOCTYPE声明不一样的是，在HTML文档是不存在xmlns的，我们平常所见到的xmlns都是出现在XHTML文档中的。 &html xmlns=&http://www.w3.org/1999/xhtml& lang=&en&& 这是xhtml原有的命名空间，到了html5以后被简化了，。 &html lang=&en&&来自Elco Klingen日志的方法一开始引起了广泛的关注。该技术包含了一个XML形式的命名空间，并使用了含有namespace前缀的元素，例如： 复制代码 代码如下: &!DOCTYPE HTML& &html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/"& &body& &html5:section& &!-- content --& &/html5:section& &/body& &/html& :html5这个前缀并不是一个标准的写法，你也可以用其它字符代替：hl5也是可以的。有了前缀之后，IE会识别新的元素，从而可以应用样式。在其他浏览器中一样有效，那么最后，你就成功地在各个浏览器中构建了一样的元素和一样的样式。 这个方法很明显有个缺陷：你必须在HTML文档中使用XML格式的命名空间，同样，你也需要在css中这么做: 复制代码 代码如下:html5\:section { display: }那么对js的兼容性如何呢？下面是个测试deml 复制代码 代码如下: &!DOCTYPE HTML& &html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/"& &head& &title&;html5&/title& &meta charset="gb2312"& &style& html5\:section { display: width:100 height:50 background:#f00; border: 1 color: #ff0; } &/style& &script& window.onload = function(){ alert(document.getElementById("test").innerHTML + "---id") alert(document.getElementsByTagName("section")[0].innerHTML + "---TagName") alert(document.getElementsByTagName("SECTION")[0].innerHTML + "---大写") } &/script& &/head& &body& &html5:section id="test"&内容&/html5:section& &/body& &/html& 测试结果，IE6\7\8均测试通过，但fixfox和chrome里只有id能获取到，所以这种方法同样不是一个可取的方法！
分享：可缩放矢量图形(Scalable Vector Graphics，简称SVG)是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法),SVG 功能集包括嵌套转换、剪切路径、alpha 蒙板和模板对象,感兴趣的朋友可以了解下，或许对你的html5 SVG 2D知识增长有所帮助
相关HTML5教程：
Div+Css教程搜索
HTML5教程推荐
猜你也喜欢看这些如何解决webview不支持html5中audio标签 - 推酷
如何解决webview不支持html5中audio标签
我们都知道html5有非常方便的audio标签可以嵌入音频文件，而Android的webview具有基本的浏览器内核，可以浏览基于html5的文档，但webview对html5的支持目前还是有很大差距的，很多html5支持的标签，在webview中并不支持。近期就遇到一个要在webview中嵌入mp3音频的需求，原本以为直接用html5的audio标签即可实现，没想到webview中只是显示了audio控件，但并不能播放。
网上查了很多资料，比较统一的结论是android2.2不支持audio标签，2.3以上可以支持，但实践发现2.3以上的支持也并不好，貌似和音频文件的解码格式也有关系。
目前遇到的一些不同的情况列举如下：
1、&audio src=”/01.mp3″ &对服务器端的音频文件支持。
2、&audio src=”01.mp3″ &最手机本地的音频文件不支持。
一种变通的方法：
1、&video src=”test.mp3″ poster=”test.jpg” onclick=”this.play();”&&/video&
使用video标签嵌入mp3文件，并添加onclick属性和背景图属性。
另一种比较保险的方法是制作swf文件，嵌入mp3音频，再使用jQuery Flash一类的插件实现html5文件中嵌入音频。
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致从不羡慕别人的优秀，因为相信自己也可以优秀。
闲下来时看看书，书本里的故事，总有你学到的人生。
---By:段亮
不可不知的html5标签
编辑时间：
在这篇文章中：我简单的跟大家说了下:什么是新一代超文本标记语言（html5）？以及html5和html的区别在哪些方面？以及html5相对于html的优势在哪里？那么今天就跟大家一起深入讲讲html5标签一、结构标签说到结构标签，我觉得这是相对于html来说，是一个非常好的改变，因为它对于网站的SEO优化有了很大的提升。为什么这么说呢？因为新定义的这些结构标签，搜索引擎蜘蛛能知道它是干什么的。因为我们所做的网站都是需要做SEO的，做排名的。通过排名获得流量，然后进一步进行转化，转化成你想要的money.那么新增加的结构标签有哪些呢？1.&article& 标记定义一篇文章2.&header& 标记定义一个页面或一个区域的头部3.&nav& 标记定义导航链接4.&section&标记定义一个区域5.&aside& 标记定义页面内容部分的侧边栏6.&hgroup&标记定义文件中一个区块的相关信息7.&figure& 标记定义一组媒体内容以及它们的标题8.&figcaption&标签定义 figure 元素的标题。9.&footer& 标记定义一个页面或一个区域的底部二、新增标签在新增的html标签中我认为最大的好处就是增加了多媒体交互标签。在html中一般我们插入什么音频、视频、flash都会用到&embed&标签，来定义外部的可交互的内容或插件，而在HTML5的多媒体标签的中，我们可以直接添加音频、视频等多媒体文件，而不需要使用外部插件来实现，这样极大地提升了用户体验。新增的多媒体交互标签有：1.&video& 标记定义一个视频2.&audio& 标记定义音频内容3.&source& 标记定义媒体资源4.&canvas& 标记定义图片三、重新定义标签在html5标签中，有一些标签相对于html标签来说，更改了它的语义。重新定义的标签如下：1.&b&代表内联文本，通常是粗体，没有传递表示重要的意思2.&i&代表内联文本，通常是斜体，没有传递表示重要的意思3.&dd&可以同details与figure一同使用，定义包含文本，dialog也可用4.&dt&可以同details与figure一同使用，汇总细节，dialog也可用5.&hr&表示主题结束，而不是水平线，虽然显示相同6.&menu&重新定义用户界面的菜单，配合commond或者menuitem使用7.&small&表示小字体，例如打印注释或者法律条款8.&strong&表示重要性而不是强调符号总结：通过对html5的标签来看，不管是从结构标签还是新增的一些标签，使网站更加符合SEO的优化，同时也提升了用户体验。本文由段亮个人博客原创出品，如需转载请注明出处。谢谢！！本文出处：
您要是觉得段亮这小子写的此文章还不错，对您有帮助的话，可以选择：
赞助段亮博客哟！扫一扫旁边的二维码!也可以帮点击下广告，就当赞助啦！谢谢啦！
上一篇： 下一篇：
把此文章分享给其它人..
或许你还喜欢以下文章
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
你也想建立一个独立博客？
你是否也想打造一个在互联网上的个人品牌，成为一个家喻户晓的人物呢？请点击了解
Design by:少年 湘ICP备号-2最近中遇到的问题如下：
利用html5中的 video 标签去播放视频，但是发现有的mp4格式的视频可以播放，有的mp4格式的视频不能播放。
首先 video 标签只支持MPEG4，Ogg，WebM 三种视频格式，支持情况如下：
但是，video标签对这三种视频格式是有具体要求的
Ogg = 带有 Theora 视频编码
+ Vorbis 音频编码
MPEG4 = 带有 H.264 视频编码 + AAC 音频编码
WebM = 带有 VP8 视频编码
+ Vorbis 音频编码
所以，就找到问题的原因了，不能被播放的mp4的视频，视频的编码格式不是 h264。
利用格式工厂对mp4视频，用h264视频编码格式重新编码，得到的视频就可以使用了。
不得不说，html5 的 video 标签
对视频的限制太大了，还有待于改善提高。
版权声明：本文为博主原创，未经博主允许不得转载。HTML5 &input& 标签
HTML5 &input& 标签
定义和用法
&input& 标签规定用户可输入数据的输入字段。
根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。
带有两个输入字段和一个提交按钮的简单的 HTML 表单：
&form action=&form_action.asp& method=&get&&
First name: &input type=&text& name=&fname& /&
Last name: &input type=&text& name=&lname& /&
&input type=&submit& value=&提交& /&
HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中，&align& 属性已被废弃，HTML5 不支持该属性。请使用 CSS 对 input 元素进行对齐操作。
HTML5 中的 &input& 标题拥有许多新的属性。
HTML5 中的 type 属性拥有许多新的值。
提示和注释
注释：input 元素是空的，它只包含属性。
提示：请使用 label 元素为表单控件定义标签（label）。
new : HTML5 中的新属性。
list_of_mime_types
规定可通过文件上传控件提交的文件类型。
（仅适用于 type=&file&）
规定图像输入控件的替代文本。
（仅适用于 type=&image&）
autocomplete
规定是否使用输入字段的自动完成功能。
规定输入字段在页面加载时是否获得焦点。
（不适用于 type=&hidden&）
规定当页面加载时是否预先选择该 input 元素。
（适用于 type=&checkbox& 或 type=&radio&）
规定当页面加载时是否禁用该 input 元素。
（不适用于 type=&hidden&）
规定输入字段所属的一个或多个表单。
formaction
覆盖表单的 action 属性。
（适用于 type=&submit& 和 type=&image&）
formenctype
覆盖表单的 enctype 属性。
（适用于 type=&submit& 和 type=&image&）
formmethod
覆盖表单的 method 属性。
（适用于 type=&submit& 和 type=&image&）
formnovalidate
formnovalidate
覆盖表单的 novalidate 属性。
如果使用该属性，则提交表单时不进行验证。
formtarget
覆盖表单的 target 属性。
（适用于 type=&submit& 和 type=&image&）
定义 input 字段的高度。（适用于 type=&image&）
datalist-id
引用包含输入字段的预定义选项的 datalist 。
规定输入字段的最大值。
请与 &min& 属性配合使用，来创建合法值的范围。
规定文本字段中允许的最大字符数。
规定输入字段的最小值。
请与 &max& 属性配合使用，来创建合法值的范围。
如果使用该属性，则允许一个以上的值。
field_name
规定 input 元素的名称。
name 属性用于在提交表单时搜集字段的值。
regexp_pattern
规定输入字段的值的模式或格式。
例如 pattern=&[0-9]& 表示输入值必须是 0 与 9 之间的数字。
placeholder
规定帮助用户填写输入字段的提示。
指示字段的值无法修改。
指示输入字段的值是必需的。
number_of_char
规定输入字段中的可见字符数。
规定图像的 URL。（适用于 type=&image&）
规定输入字的的合法数字间隔。
datetime-local
规定 input 元素的类型。
对于按钮：规定按钮上的文本
对于图像按钮：传递到脚本的字段的符号结果
对于复选框和单选按钮：定义 input 元素被点击时的结果。
对于隐藏、密码和文本字段：规定元素的默认值。
注释：不能与 type=&file& 一同使用。
注释：对于 type=&checkbox& 以及 type=&radio&，是必需的。
定义 input 字段的宽度。（适用于 type=&image&）