HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML5标签.自己最近在写响应式布局的例子的时候也使用了header等标签.还是希望可以兼容低版本的浏览器,再次和大家分享一下,如何让旧浏览器支持HTML5新增标签.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>让旧浏览器支持HTML5新增标签</title> 6 <style type="text/css"> 7 beimeng{color:#F00;} 8 </style> 9 <script type="text/javascript"> 10 </script> 11 </head> 12 <body> 13 <beimeng>Hello World!</beimeng> 14 <header>顶部内容</header> 15 <nav>导航内容</nav> 16 <article>文章内容</article> 17 <footer>底部内容</footer> 18 </body> 19 </html>
其实,让旧浏览器支持HTML5新增标签,听上去很难,操作起来很简单,只需要你懂DOM操作就可以了.
首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签.
1 <script type="text/javascript"> 2 document.createElement('beimeng'); 3 document.createElement('header'); 4 document.createElement('nav'); 5 document.createElement('article'); 6 document.createElement('footer'); 7 </script>
接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素,因此需要添加如下代码:
1 <style type="text/css"> 2 beimeng{color:#F00;} 3 article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,beimeng{display: block; } 4 </style>
对于代码位置,我们需要注意,要将script标签放到head中,而不是body后面,这是因为,浏览器从上到下进行代码的执行和解析,在已经渲染之后在执行JS就没有任何价值和意义.
全部代码如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>让旧浏览器支持HTML5新增标签</title> 6 <style type="text/css"> 7 beimeng{color:#F00;} 8 article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,beimeng{ 9 display: block; 10 } 11 </style> 12 <script type="text/javascript"> 13 document.createElement('beimeng'); 14 document.createElement('header'); 15 document.createElement('nav'); 16 document.createElement('article'); 17 document.createElement('footer'); 18 </script> 19 </head> 20 <body> 21 <beimeng>Hello World!</beimeng> 22 <header>顶部内容</header> 23 <nav>导航内容</nav> 24 <article>文章内容</article> 25 <footer>底部内容</footer> 26 </body> 27 </html>