很多低版本的浏览器是不识html5新增的标签的，所以为了解决浏览器兼容性问题，主要有两种方法：

  • js可以创建我们自定义的标签，例如，我们可以用js语句 document.createElement('leo')创建<leo>标签，然后再给它样式，但是创建的leo标签并不是一个块标签，所有可以利用display:block;使leo标签成为块标签，所以我们可以利用js语句分别将html5新增的标签（header,footer...）创建出来，然后分别设置他们的display:block;这样，就可以兼容低版本的浏览器。
  • 利用一个插件 html5shiv.js ，这也是跟第一种方法差不多，只不过第一种比较麻烦，现在将第一种方法写成js插件引入，比较方便。

新增的带有功能效果作用性的标签（datalist、datadetails）要想兼容，只能用原始的js来实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="js/html5shiv.js"></script>

<style>

    body{

        margin:0px;

        padding:0px;

    }

    header{

        /*display: block;*/

        height:100px;

        background: #9f3;

    }

    article{

        /*display: block;*/

        position: relative;

        padding:10px;

        background: #cf6;

        overflow: hidden;

        zoom:1;

    }

    aside{

        /*display: block;*/

        position: absolute;

        left: 10px;

        top:10px;

        width:200px;

        height: 300px;

        background: #f06;

    }

    section{

        /*display: block;*/

        margin-left: 210px;

        height: 300px;

        background: #f90;

    }

    footer{

        /*display: block;*/

        height: 100px;

        background: #c60;

    }

</style>

<script src="js/html5shiv.js"></script>

<script>

    /*兼容低版本浏览器：

    (1) 利用js创建这些标签，然后再将所有的标签都display:block;

    （2）利用插件html5shiv.js

    */

    // document.createElement('header');

    // document.createElement('article');

    // document.createElement('aside');

    // document.createElement('section');

    // document.createElement('footer');

</script>

</head>

<body>

<header>用在页面的头部或者板块的头部</header>

<article>

    <aside>侧边栏</aside>

    <section>内容区域</section>

</article>

<footer>页面底部</footer>

</body>

</html>

html5新增标签兼容性的更多相关文章

  1. 盒子模型，定位技术，负边距，html5 新增标签

    盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...

  2. html5新增标签/删除标签

    闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方 ...

  3. 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题

    https://www.cnblogs.com/yangjie-space/p/4816279.html html5shiv.js和respond.min.js 做页面常用的东西,写这里用的时候省点去 ...

  4. 让旧浏览器支持HTML5新增标签

    首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素.   ...

  5. html5 新增标签和特性

    文档类型设定 document HTML: XHTML: HTML5 字符设定 <meta http-equiv="charset" content="utf-8& ...

  6. HTML5新增标签及具体用法

    html5自从推广普及以来,迅速被各大浏览器支持.采用html5设计的网页逐渐成为网页设计的时尚.下面就温习下html5的新增标签. HTML 5 中的新特性包括了嵌入音频.视频和图形的功能,客户端数 ...

  7. HTML5新增标签的汇总与详解

    趁着一点闲暇时间,把HTML5的新增标签整理了一下,用了表格的形式展现,分别归纳了各标签的用法及属性分析.这样方便各位以后在运用HTML5标记遇到疑惑时,直接上来对照看下就明了了,希望对大家有帮助哦. ...

  8. 第二篇、HTML5新增标签

    <html> <head> <meta charset="UTF-8"> <title>html5新增的标签</title&g ...

  9. CSS3主要知识点复习总结+HTML5新增标签

    文件夹: 1.CSS 属性编写顺序 2.CSS3属性(内核前缀) 3.position相对/绝对定位 4.overflow:scroll等的差别 5.display属性应用 6.盒模型计算方法和Bug ...

随机推荐

  1. 将string转换成UTF8在进行请求

    在请求服务器时,如果参数中带有中文字符.就会报参数格式错误,需要将其转换成UTF8 @interface NSString (NSURLUtilities) /* Adds all percent e ...

  2. MVC4网站发布到windows server 2003服务器

    在windows server 2003上部署MVC4的网站,需要进行以下工作 用VS2013新建项目 在创建项目的时候选择的矿建为.NET Framework4,然后选择[ASP.NET MVC4 ...

  3. js Uncaught SyntaxError: Unexpected token错误

    今天遇到js报错Uncaught SyntaxError: Unexpected token 不知道是什么原因,并且js还会继续往下执行. 经过排查竟然是在保存行的上面有个if少一个大括号,真是坑爹啊 ...

  4. Codeforces Round #261 (Div. 2) D 树状数组应用

    看着题意:[1,i]中等于a[i]的个数要大于[,jn]中等于a[j]的个数 且i<j,求有多少对这种(i,j)  ,i<j可是 i前面的合法个数 要大于j后面的 看起来非常像逆序数的样子 ...

  5. Android市场官方的统计信息

    做Android应用和游戏,避免不了的要了解市面上的各种android设备的信息,以最大程度的兼容更多的设备. Android市场会定期发布统计信息,包括SDK版本,屏幕大小和分辨率,OpenGL E ...

  6. mysql的数据导入导出

    1.Navicat for Mysql XML导出导入格式支持二进制数据:虽然同步数据人眼看不出区别,但是java尝试读取数据时,报datetime字段取出的值为“0000-00-00 00:00:0 ...

  7. 昨天冲动的搬到外面住了，oh yeah

    昨天我纠结了一天,我是否应该搬到外面去住.我骑着我的自行车,在外面闲逛,我心里想的是,我现在没有钱,可以节约一些生活费,租房的日子,我以后始终都是需要面对的,在目前没有那么多钱的情况下,可以不出去外面 ...

  8. Entity Framework 配置

    Entity Framework的核心 – EDM(Entity Data Model) EDM概述 实体数据模型,简称EDM,由三个概念组成.概念模型由概念架构定义语言文件 (.csdl)来定义,映 ...

  9. asp.net中常用的几种身份验证方式

    转载:http://www.cnblogs.com/dinglang/archive/2012/06/03/2532664.html   前言 在B/S系统开发中,经常需要使用"身份验证&q ...

  10. SQLserver中常用的函数及实例

    聚合函数 as是可以起别名的,在select和from之间的是表示列名,可以不加单引号)(聚合函数中的count不仅能对数字进行操作还能对字符型进行操作,其余的只能对数字操作) 最小值 select  ...