很多低版本的浏览器是不识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. Codeforces Round #322 (Div. 2) D. Three Logos 暴力

    D. Three Logos Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/581/problem ...

  2. 关于android的Activity的四种启动模式

    最近做项目遇到一个问题,当触摸屏幕的时候通过intent启动activity,发现会启动多次,而后查阅资料,发现,原来是activity的模式设置问题. Activity的启动模式可以通过Androi ...

  3. Mysql 培训

     1. Mysql 培训 1.1. 培训目的 本文档是针对MySQL 数据库方面的基础培训,为了使项目组成员能够达到使用MySQL 数据库的目的. 1.2. 培训对象 开发者 1.3. 经常使用词及符 ...

  4. Android在MediaMuxer和MediaCodec用例 - audio+video

    在Android多媒体类,MediaMuxer和MediaCodec这是一个相对年轻,他们是JB 4.1和JB 4.3据介绍. 前者被用来产生一个混合的音频和视频的多媒体文件.的缺点是,现在可以只支持 ...

  5. 学习笔记之JAVA多线程

    Java程序设计实用教程 by 朱战立 & 沈伟 孙鑫Java无难事 Java 多线程与并发编程专题(http://www.ibm.com/developerworks/cn/java/j-c ...

  6. 文件I/O（不带缓冲）之I/O的效率

    程序清单3-3中的程序使用read和write函数复制文件.关于该程序应注意下列各点: 它从标准输入读,写至标准输出,这就假定在执行本程序之前,这些标准输入.输出已由shell安排好.确实,所有常用的 ...

  7. VS2012 编译GDAL

    先安装VS 2012, 然后下载GDAL最新版本代码,解压. 用管理员权限打开Developer Command Prompt for VS2012终端,进入代码目录. 然后运行命令: nmake / ...

  8. 数据结构与算法分析(2)——表、栈和队列

      抽象数据类型     抽象数据类型(ADT)是一系列操作的集合.诸如表.集合.图和他们的操作一起可以看做是抽象数据类型 表 List 表的实现有两种:数组和链表.数组实现的表在插入和删除操作上的花 ...

  9. 几本关于PHP安全的书

    几本关于PHP安全的书: Essential PHP Security php architect‘s Guide to PHP Security Pro PHP Security Securing ...

  10. Hibernate学习笔记--------3.缓存

    一.一级缓存 一级缓存又称为“Session缓存”或者“会话级缓存”,通过Session从数据库查询实体时,会把实体在内存中存储起来,下一次查询同一实体时不再再次执行sql语句查询数据库,而是从内存中 ...