`
huoquan
  • 浏览: 27300 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类

用html5构建兼容iE6的网页

阅读更多

几个月前我就打算开始学习html5,但是当时有一个非常扯淡的想法:“反正现在很多浏览器不兼容html5,学了实际用途也不会很大!”而且还有一些其他的事情比较牵扯精力(找理由…)!现在我终于意识到那时的那个想法有多么二了,赶紧亡羊补牢。

创建兼容ie6的html5页面

html5依然以.html或者.htm作为后缀。  精心开发5年的UI前端框架! 
号称几乎没人去记过的DOCTYPE声明变成<!DOCTYPE html>,这是能激活IE标准模式的最短字符。
指定字符集编码也同样简洁<meta charset = “UTF-8″>

html5新增了众多的元素,语义清晰。例如:
1.header 头部
2.nav 导航
3.article 文章
4.section 区块
5.aside 非主体文字,附属信息
6.footer 尾部
等等

这些元素里大概也只有section元素比较难懂一点。这个元素一般用于对网站及应用上内容进行分块,通常由标题和内容组成
,所以如果是布局需要添加块状元素的话依然是推荐使用div。

大多数元素都是可以复用的,例如:

<header>
   <nav></nav>
</header>
<section>
   <header></header>
   <article></article>
</section>


看完这些就可以创建基于html5的网页了。
这里有个小例子:精心开发5年的UI前端框架!

<!DOCTYPE html>
<html>
   <head>
       <meta charset=”utf-8″>
       <title>html5示例页面</title>
   </head>
   <body>
       <header>这是页首</header>
       <section>这是一个区块
              <header>这是区块的TITTLE</header>
               <article> 这是文字 </article>
              <footer>这是section里的尾部</footer>
       </section>
       <footer>这是页尾</footer>
   </body>
</html>


创建好以后自然需要各个浏览器都检测一下,发现使用ie8以下打开这个网页会发现一些小问题,因为比较早期的浏览器版本里面是没有这些html5元素的,解决问题的方法很简单,只需要在头部使用javascript来创建这些语义化元素就可以了。

<script>
document.createElement(“header”);
document.createElement(“footer”);
document.createElement(“article”);
document.createElement(“section”);
</script>


接下来还需要把这些元素的样式格式化一下,因为它们都是块状元素所以在style开始的部分加入

header, footer, article, section, header {
   display:block;
}


再次检验一下,场面HOLD住了!就连IE6都没问题。呼应开头,兼容性问题不能成为不学html5的理由!

注意!!!(2012年3月31日最新更新)

经过在具体项目中对HTML5的使用后发现,使用AJAX载入的内容如果含有HTML5元素将无法在IE中被创建。

所以如果项目中需要运用AJAX技术并对兼容性要求较高,暂不建议使用HTML5元素!精心开发5年的UI前端框架!

0
0
分享到:
评论

相关推荐

    html2image网页转图片并下载,兼容ie

    - 兼容IE通常需要使用特定的库或技术,如Microsoft的Edge rendering engine(ChakraCore)或Polyfills来模拟现代浏览器的功能。 4. **实现步骤**: - 安装HTML2image库:如Python的`html2image`库,或者...

    bootstrop兼容IE8的代码

    Bootstrap是一款广泛使用的前端框架,由Twitter开发,旨在提供一套简洁、直观、强大的工具,用于构建响应式布局和移动设备优先的Web项目。然而,Bootstrap原生版本并不支持Internet Explorer 8(IE8)及以下版本,...

    UI框架模板一(兼容IE8)

    "UI框架模板一(兼容IE8)"是一个专门针对老旧浏览器,尤其是Internet Explorer 8(IE8)进行优化的UI设计框架。Bootstrap是一个广受欢迎的开源UI框架,它简化了网页开发过程,同时提供了良好的跨浏览器兼容性。 ...

    兼容IE6、7、8的graphics画图的背景设置

    ### 兼容IE6、7、8的Graphics画图背景设置 #### 背景介绍 在Web开发中,为了确保网站能够在不同版本的浏览器上正常显示,开发者往往需要进行额外的工作来处理浏览器间的兼容性问题。特别是对于早期版本的Internet ...

    兼容ie6的左右滑动焦点图

    **兼容ie6**是关键点,意味着开发者使用了特定的技术和策略来克服IE6浏览器的局限性,如对CSS、JavaScript和DOM支持的不足。这通常涉及到使用jQuery这样的JavaScript库,因为它们提供了一致的API来处理跨浏览器的...

    IE9之前的版本兼容HTML5标签

    在IT行业中,HTML5是网页开发的标准之一,它极大地扩展了HTML语言的功能,引入了许多新的元素、API和特性,使得开发者能够构建更加丰富、交互性更强的网页应用。本文将详细探讨IE9之前的版本对HTML5标签的兼容情况,...

    在线浏览PDF文件、可兼容IE浏览器

    标题中的“在线浏览PDF文件、可兼容IE浏览器”意味着我们将探讨如何在网页环境中,特别是对Internet Explorer(IE)浏览器支持的情况下,实现PDF文件的在线预览。这在现代Web开发中是一个常见需求,因为PDF文档广泛...

    语义化标签兼容IE8以上文件

    在“语义化标签兼容IE8以上文件”中,我们主要关注的是如何在不支持HTML5新标签的老版本IE(尤其是IE8及以上)中实现这些标签的功能。 `myIE8up.js`这个JavaScript文件很可能是用于在旧版IE浏览器中模拟HTML5语义化...

    HTML+JS实现固定表头和锁定左列的Demo(兼容IE,火狐,谷歌等大众浏览器)

    开发者可能使用了像jQuery这样的库来简化跨浏览器的兼容性问题,或者使用了polyfill(一种模拟新特性的旧浏览器兼容方案)来提供在旧版浏览器上的支持。 在实际的项目中,这样的实现可能会涉及以下关键点: 1. **...

    兼容IE6的jQuery分页插件.zip

    总的来说,"兼容IE6的jQuery分页插件"为开发者提供了一种便捷的方式,来为旧版IE浏览器构建高效且美观的分页功能。尽管现代浏览器已经普遍替代了IE6,但在某些场景下,如维护旧项目或服务旧用户时,这类插件仍然有着...

    ie11ScrollTo_html5_DEMO_

    在IT行业中,HTML5是一种广泛使用的标记语言,用于构建和维护网页内容。它引入了许多新的特性和API,显著提升了Web应用程序的功能和用户体验。"ie11ScrollTo_html5_DEMO_"这个项目似乎专注于解决在Internet Explorer...

    兼容ie6/ie7/ie8/ff 省市县的js

    标题“兼容ie6/ie7/ie8/ff 省市县的js”指的是一个JavaScript插件或库,其主要目的是解决浏览器兼容性问题,特别是针对较老版本的Internet Explorer(IE6、IE7、IE8)以及Firefox(FF)。这个选择器功能允许用户在...

    基于jquery带搜索功能的下拉框,兼容IE5/6/7/8/9/10

    同时,对于IE5和IE6,由于其对CSS和DOM支持的局限,可能需要更复杂的技巧来确保样式和交互的正常工作。 在实现过程中,开发者可能需要使用jQuery的`.each()`方法遍历选项,`.filter()`方法进行过滤,以及`.show()`...

    jquery平滑返回顶部效果(兼容IE6)

    对于兼容IE6,jQuery 1.12.4已经包含了对这个古老浏览器的支持。然而,由于IE6的性能限制和对CSS、JavaScript的兼容性问题,可能需要特别注意一些CSS样式和JavaScript代码的编写,避免使用IE6不支持的特性。例如,...

    bootstarp 3.0兼容ie7

    6. **PNG透明度支持**: IE7对PNG透明度的支持有限,可能需要使用AlphaImageLoader滤镜或其他方法来修复。 7. **DOCTYPE声明**: 使用正确的DOCTYPE声明,如`&lt;!DOCTYPE html&gt;`,可以确保IE7进入标准模式,避免怪异...

    网页冬季背景+飘雪效果插件(兼容IE6)

    总之,“网页冬季背景+飘雪效果插件(兼容IE6)”是一个集成了HTML、CSS和JavaScript技术的解决方案,旨在为网页增添冬季气氛,同时照顾到那些仍在使用较旧浏览器的用户。通过理解和应用这些技术,开发者可以创造出...

    网页冬季背景+飘雪效果插件(兼容IE6

    总的来说,这个“网页冬季背景+飘雪效果插件(兼容IE6)”是一个旨在为用户提供怀旧和沉浸式浏览体验的工具,它体现了开发者对老旧浏览器兼容性的关注,以及在技术限制下创造互动效果的巧思。对于希望为网站增添冬季...

    介绍一款PC站web UI框架,兼容IE6.zip

    4. "兼容IE6.txt" - 这很可能是框架的核心指南,详细介绍了如何使用和配置框架以确保在IE6中正常运行,可能包括了特定的CSS技巧、JavaScript代码段或者工作原理的解释。 5. "artDialog-master.zip" - 这可能是一个...

    H5 IE9及以下版本兼容h5新标签

    在IT行业中,HTML5(H5)是一种标准的标记语言,用于构建和呈现网页内容。随着技术的发展,HTML5引入了许多新的元素、API和功能,极大地提升了网页的交互性和表现力。然而,这些新特性在旧版浏览器,尤其是IE9及以下...

    基于bootstrap兼容ie7+后台模板

    "基于Bootstrap兼容IE7+"的后台模板,意味着该模板不仅具备Bootstrap的一般特性,还专门针对较老版本的Internet Explorer浏览器,特别是IE7及以上版本进行了优化,以确保在这些旧版浏览器中的正常显示和功能运行。...

Global site tag (gtag.js) - Google Analytics