很多低版本的浏览器是不识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. Lync安装随笔

    使用域管理员权限扩展架构 1.iis角色安装 2.net3.5,消息队列服务器.目录服务集成.桌面体验.AD DS和AD LDS工具(远程服务管理工具中),启用WindowsFirewall服务 3. ...

  2. Android 通用获取Ip的方法（判断手机是否联网的方法）!!!

    大家好,我们这一节讲一下,Android获取Ip的一些方法,在我们开发中,有判断手机是否联网,或者想获得当前手机的Ip地址,当然WIFI连接的和 我们3G卡的Ip地址当然是不一样的. 首先我尝试了如下 ...

  3. TOP30专访：捕鱼达人陈昊芝

    原文:http://www.csdn.net/article/2012-04-04/313919/1 编者按:3月31日,第四届CocoaChina游戏开发者大会暨Cocos2D-X技术研讨会在北京举 ...

  4. 【转】java静态代码块和构造方法执行顺序

    先看看下面几个类,然后判断它们的输出public class A { static{System.out.print(1);}public A(){System.out.print(2);}} pub ...

  5. ios通知-kvo

    // KVC: Key Value Coding, 常见作用:给模型属性赋值    // KVO: Key Value Observing, 常用作用:监听模型属性值的改变 // // ViewCon ...

  6. Android_AsyncTask_DownloadImg

    layout.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xml ...

  7. java validator的原理与使用

    http://developer.51cto.com/art/201104/253257_1.htm ava EE 6核心特征:Bean Validation特性概述(2) 2011-04-02 14 ...

  8. Android 自学之自动完成文本框 AutoCompleteTextView

    自动完成文本框(AutoCompleteTextView)从EditText派生而出,实际上他也是一个编辑框,但他比普通的编辑框多了一个功能:当用户输入一定字符后,自动完成文本框会显示一个下拉菜单,供 ...

  9. Hibernate学习笔记--------2.一多|多多的CRUD

    一.一多关系 例如用户(Tb_User)和订单(Tb_Order)之间,一个用户对应了多个订单,多个订单对应一个用户. 除了基本的配置外,需要在用户类(单方)中添加订单的集合同样需要get/set方法 ...

  10. gcc的使用

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/6065410. ...