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>