html5新增标签兼容性

很多低版本的浏览器是不识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>