用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前端框架!

时间: 2024-10-06 12:11:56

用html5构建兼容iE6的网页的相关文章

兼容IE6\7\8浏览器的html5标签的几个方案

html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几个嘴巴,然后,苦学吧!因为前端的春天已经到来,而且不止一个春天.如果你不信,我只能说:爱信不信! 下面我们来看一个标准的html5标签结构:(我这里只是说标签,其它概不涉及) <!DOCTYPE HTML> <html> <head> <meta charset=&q

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

基于jquery多种切换效果的焦点图(兼容ie6)

随着html5和css3的诞生.各种非常酷.非常炫的网页焦点图在各个前端技术网上满天飞.基于html5和css3技术的焦点图有一个弊端就是要在ie9以上才支持.这让需兼容ie6到ie8的页面又爱又恨.下面为大家介绍一款完全基于juery的焦点图,而且这款插件完美支持ie6,多种百叶窗切换,效果还是相当赏目的.无图无真相,还是先上图 点击这里在线预览 点击这里下载源码 使用教程 这款插件代码很简洁,使用也非常简单.看截图 ok.今天就和大家分享到这里.周末好快,作为一名码农真是苦逼,明天还要早起,

2015.3.14(知乎首页仿写及纯CSS兼容IE6实现响应式下拉菜单)

昨晚写了一个知乎的首页练习,只完成了上半部分的练习.下半部分做了一个纯CSS的响应式下拉菜单(可以兼容IE6). 可以看出那个知乎两个大字下面的那行字是截图截下来的,有一点色差……代码如下: js的部分只用到了获取可视区域的宽度这一点. function setIndex() { var commonWidth = $(window).outerWidith; var commonWidth = $(window).outerHeight; $(".backTitle").css(&q

使用HTML5构建下一代的Web Form

HTML语言作为如今编程最为广泛的语言,具有易用.快捷.多浏览平台兼容等特点,但是随着时代的进步,HTML的标准却停滞不前,这一次还在不断开发中的[color=#444444 !important]HTML5标准的更新可以说给这门标记语言带来了新的生命力.本文将着重讨论HTML5中的Web Forms 2.0, 即表单的部分.表单是网页中常见的控件(集).小到网站注册登录,大到一个企业的数据管理系统,都基本上有表单的身影.表单之所以如此重要,主要是因为它担负大量的用户和网页后台数据更新交互的任务

【JavaScript】兼容IE6可调可控的图片滑块

图片滑块其实也与图片轮播一样,无需这么多奇奇怪怪的代码就能够实现,只是布局有点复杂,而且这东西在Bootstrap里面也没有,在网页中,这个组件也越来越少见的,毕竟这个小小的组件太浪费网络资源了,实现的逻辑还比较复杂,如果不要被特别要求,能不做最好不好. 有时候,如果一个如同<[CSS]黑色幽默,兼容IE6的纯原生态的门户网站>(点击打开链接)的简单网页就能够交货,就不要卖弄你的前端技巧了. 虽然这个组件的效率很低,但是还是讲解一下实现的原理,也是完美兼容IE6,同时包你能够随心所欲地放置这个

jQuery&amp;CSS 顶部和底部固定浮动工具栏 兼容IE6

现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方.这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到. 其实这样的布局方式很早就有,只是没有那么个契机推广开吧.做起来也不复杂,只要设置一个小小的属性“position:fixed”便能完成,最关键的无不呼在于要兼容IE6而已. 首先我们来看HTML代码,是不是超简单?这里提供的只是一个简单的框架,实际应用的时候,只要把想要的元素添加东西就在这区域内加就行. HTML

【JavaScript】原生态兼容IE6的图片轮播

<[Bootstrap]图片轮播组件Carousel>(点击打开链接)虽然做得很不错,但是由于只兼容到IE8,所以没有用的.其实原生态兼容IE6的图片轮播并没有想象中的那么难,网上的很多兼容IE6的图片轮播其实代码写得很糟糕的.首先复用性很差,根本就不知道怎么修改,然后加入了很多如同百叶窗这些可有可无的特效,把原本简短的代码弄得很差,最后,这些东西还直接用JavaScript创建组件来显示自己的Javascript学得有多么地强大,然后又不好好教别人怎么做,直接用一个JS写完整个网页个人觉得相

PNG兼容IE6解决方法

虽然说现在早就不用ie6浏览器了,可以还是有一小部分还在使用 ,刚好公司也有要求~~~ <p>E6不兼容png图片,确实让网页的图片质量大大下降,为了兼容万恶的IE6,总结了下面几种方法: 1,通过CSS滤镜使背景图的PNG对IE6进行兼容. 2,给img定义样式,页面上所有透明png即自动透明了. 3,通过JS,插入一段代码,实现img标签png兼容IE6的问题. 4,可以把png图片,转换为gif图片.(最简单常用的方法) </p> <br/> 第一种方法:<