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