很多低版本的浏览器是不识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. [001]socket通信--server和client实现迭代的简单例子

    server端: #include<stdio.h> #include<stdlib.h> #include<string.h> #include<unist ...

  2. Java Web services: WS-Security with Metro--referenc

    As you know from "Introducing Metro," the reference implementations of the JAXB 2.x data-b ...

  3. Session Store

    Session Store Configuration Session Usage Flash Data Session Drivers Configuration Since HTTP driven ...

  4. maven系列之二maven项目的创建和maven项目的结构

    maven系列之一简单介绍了maven的基本信息,安装和配置,大家对maven有一个大概的了解,但是在maven项目开发中远远不够,为了进一步了解maven,现在我们介绍maven项目的创建和mave ...

  5. 浅谈iOS中的视图优化

    引言: 让我们来思考几个问题,你开发过的产品,它还有可以优化的地方吗?能增加它的帧率吗?能减少多余的CPU计算吗?是不是存在多余的GPU渲染?业务这点工作量对于越来越强大的设备面前显得微不足道,但作为 ...

  6. Google前工程经理王忻：如何准备软件工程师的面试

    http://t.jobdu.com/thread-368-1-1.html 导读:原文作者王忻,Google前工程经理,2003年月加入Google,是Google Lively背后的主导力量,是G ...

  7. 深入理解Binder(二)，Binder是什么？

    上篇文章深入理解Binder(一),从AIDL谈起我们介绍了AIDL的基本使用,用AIDL两个App的通信是实现了,可是又有小伙伴疑惑了,为什么使用AIDL就能够实现两个App之间的通信?本文我们就来 ...

  8. TCP/IP协议原理与应用笔记12：单播、多播和广播地址（目的地址）

    根据数据接收者的接收范围,将目的地址分为单播.多播.广播. 这里目的地址的划分主要针对的是 物理地址 和 IP地址,没有涉及到端口地址,因为主要针对标识通信节点的地址(物理地址 和 IP地址)而言,和 ...

  9. Android学习之Activity初步

    Activity作为Android的第一步接触的概念,在学习中将初步的认识总结下来,以便后续的回顾与反思. 1.在用Android Studio生成第一个helloworld应用程序运行在手机上时,发 ...

  10. svn管理代码在cornerstone上无法添加.a 静态库文件

    有时候.a静态库不能上传到svn的服务器  导致别人拉代码运行不了 这是因为cornerstone设置里面默认不会提交.a文件, 在上图选项栏里是cornerstone默认忽略上传的文件名后缀,在这里 ...