<header>头</header>

 <nav>导航栏</nav>

 <main>

     <article>左</article>

     <aside>右</aside>

 </main>

 <footer>底部</footer>

     <style>

         *{

             margin:;

             padding:;

         }

         header{

             width: 100%;

             height: 100px;

             background-color: red;

         }

         nav{

             width: 100%;

             height: 30px;

             background-color: green;

         }

         main{

             display: block;

             width: 100%;

             height: 500px;

             background-color: chocolate;

         }

         main > article{

             display: block;

             width: 80%;

             height: 100%;

             background-color: darkblue;

             float: left;

         }

         main > aside{

             display: block;

             width: 20%;

             height: 100%;

             background-color: firebrick;

             float: right;

         }

         footer{

             width: 100%;

             height: 80px;

             background-color: hotpink;

         }

     </style>

 <!--<script>

     /**

      * 解决IE8及以下版本兼容问题

      * 手动创建语义化标签

      * 默认创建的都是行级元素

      * 需要使用设置为块级元素：  display: block;

      */

     document.createElement("header");

 </script>-->

 <!--第二种方式 导入第三方插件-->

 <!--<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>-->

 <!--<script src="../js/html5shiv.min.js"></script>-->