`
huoquan
  • 浏览: 26236 次
  • 性别: 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
分享到:
评论

相关推荐

    构建后的PDF.js_20171011

    pdf.js框架的魅⼒所在,为其为HTML5实现的,⽆需任何本地⽀持,⽽且对浏览器的兼容性也是⽐较好, 要求只有⼀个:浏览器⽀持HTML5就好了!(不过对于低版本的IE,就只能节哀了!) PDF.js是githut上的一个开源项目,...

    HTML5 Canvas 2D API 规范 1.0

    我们甚至可以在 IE 中使用 &lt;canvas&gt; 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。 参见: 目前&lt;canvas&gt; 已经成为 HTML 5 中一个正式的标签。

    HTML5与CSS3基础教程(第8版)高清文字

    12.6 兼容旧版IE 257 第13章 使用Web字体 259 13.1 什么是Web字体 259 13.2 在哪里能找到Web字体 261 13.3 下载第一个Web字体 263 13.4 理解@font-face规则 265 13.5 使用Web字体设置文本样式 ...

    cocos2d-html5:用于 Web 浏览器的 Cocos2d。 使用 JavaScript 构建

    Cocos2d-html5 是一个用 JavaScript 编写的跨平台 2D 游戏引擎,基于并在 MIT 许可。 它集成了与“Cocos2d JS 绑定引擎”相同的高级 API,并与 Cocos2d-X 兼容。 它目前支持画布和 WebGL 渲染器。Cocos2d-html5 已经...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    (2)针对跨域数据交互问题,指出并分析了跨域缓存交互问题出现的原因,通过在HTML5存储技术的基础上,重写LocalStorage,用移动端本地的Sqlite进行数据维护,实现跨域数据交互。 (3)针对页面自适应问题,本文结合...

    bbcClone:BBC 网站克隆,仅使用 html 和 css 构建了 BBC 主页

    HTML5 Boilerplate 是一个专业的前端模板... 跨浏览器兼容(Chrome、Opera、Safari、Firefox 3.6+、IE6+)。 设计时考虑到了渐进增强。 包括用于 CSS 规范化和常见错误修复的 。 通过 CDN 的最新 ,具有本地后备功能

    EasyWebApp.js:基于HTML 5,CSS 3,ECMAScript 5,AMD规范和jQuery API的声明式MVVM Web引擎

    声明式MVVM引擎-EasyWebApp v4基于AMD规范加载器,jQuery v3.2 +构建,兼容IE 9 +,ECMAScript 5 +,HTML 5+【原生态模板】 EWA模板语法完全沿用各种Web前端原生技术的标准语义- UI结构:HTML 5+标准标签, data-*...

    welsonjs:WelsonJS-使用基于WSHHTA(wsh.js),GTKGladeXMLJavaScript,HTML和CSS构建Windows桌面应用程序

    ES6(ECMAScript 6,可选),ES5(ECMAScript 5),JSON兼容性 polyfill(6.22.0) HTML5,CSS3兼容性 默认CSS框架github:jslegers / cascadeframework 包含的库 jQuery的 jQuery UI github:kamranahmedse / ...

    基于原生js淡入淡出函数封装(兼容IE)

    在开发的过程中,我们要做淡入淡出效果的话,我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用,而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。 构建框架,...

    html2canvas:使用JavaScript的屏幕截图

    该脚本仍处于试验性状态,因此不建议在生产环境中使用该脚本,也不建议您开始使用它构建应用程序,因为仍会进行重大更改。 浏览器兼容性 该库在以下浏览器(使用Promise polyfill)上应该可以正常工作: Firefox ...

    Hilo:由阿里巴巴集团开发的跨端HTML5游戏开发解决方案

    使用Flash Shim支持IE(是的,它支持IE); 支持的物理扩展: Chipmunk 支持的骨架动画扩展: DragonBones编译和构建由gulp建造: 运行npm install安装所有依赖项。 运行gulp来构建源代码。 运行gulp extensions来...

    vue组件:使用vue.js构建的独立组件

    因为Vue.js向下兼容IE9,所以我们的目标是使大多数或所有这些组件也向下兼容IE9。用法要在本地运行服务器,请克隆此仓库并运行npm installnpm start要实时编译更改,请运行gulp watch 。 资产是从/dist目录提供的,...

    yunApp:html5照片上传

    HTML5 Boilerplate 是一个专业的前端模板,... 跨浏览器兼容(Chrome、Opera、Safari、Firefox 3.6+、IE6+)。 设计时考虑到了渐进增强。 包括用于 CSS 规范化和常见错误修复的 。 通过 CDN 的最新 ,具有本地后备功能

    锐智企业建站系统 v2011.02.05

    2、全面兼容IE6、IE7、IE8、火狐主流浏览器。 3、系统前台由语言包控制,您可以轻松将中文网站修改为英文、日文、韩文、俄文、德文、阿拉伯文等任一语言。系统编码采用utf-8国际编码,适用于任何国际语种。 4、...

    geotracer:跟踪地理数据的html5工具

    跨浏览器兼容(Chrome,Opera,Safari,Firefox 3.6及更高版本,IE6及更高版本)。 设计时要考虑到逐步增强。 包括用于CSS规范化和常见的错误修复。 通过CDN的最新 ,具有本地备用。 最新的构

    Web设计中如何使用XML数据

    XML数据源对象DSO是一个微软ActiveX控件,构建在微软IE4以后的版本上。这个对象允许你把一个外部的XML文件或者嵌入HTML文件中的内容提取到HTML页面中。你可以在一个Web页面中使用XML - DSO从一个外部XML文件中选取...

    sexy-table:漂亮HTML5表格不是表格

    性感表 漂亮HTML5表格不是表格:) 这个项目是我将要参与的一个即将到来的商业项目中使用的一个概念。... 但是,我需要IE8 +兼容性,并且认为Web组件对于我的商业项目来说太新了。 请参阅: : &lt; div class

    PixelCanvas:我构建的简单Web应用程序可以为旧的RGB矩阵项目生成低dpi的位图

    HTML5 Boilerplate是一... 跨浏览器兼容(Chrome,Opera,Safari,Firefox 3.6及更高版本,IE6及更高版本)。 设计时要考虑到逐步增强。 包括用于CSS规范化和常见的错误修复。 通过CDN的最新 ,具有本地备用。 最新的构

    html5-is117-001

    HTML5 Boilerplate 是一个... 跨浏览器兼容(Chrome、Firefox、IE8+、Opera、Safari)。 设计时考虑到了渐进增强。 包括用于 CSS 规范化和常见错误修复的 。 通过 CDN 的最新 ,具有本地后备功能。 用于特征检测

Global site tag (gtag.js) - Google Analytics