使用語意化標籤去寫你的HTML 相容IE6,7,8_HTML/Xhtml_網頁製作

HTML5增加了更多語義化的標籤，如header，footer，nav…讓我們在頁面編寫的時候，不需要再用下面這種方法去佈局了：

XML/HTML Code複製內容到剪貼簿

1. div class="header">這是頭部div> Ŝ>
2. div class="content">這是中間內容區域div>div>div
3. > > > > > div class=

class

=

class

🎜>>這是底部

div
1. > >  🎜> 而可以用這樣的方式去佈局： XML/HTML Code複製內容到剪貼簿
2. header>這是頭部header>
  
3. content>這是中間內容區這是中間內容區

content

>

  

footer

>
1. 這是底部
footer
2. >
    

但IE不向前支持，所以我們想讓它支援IE6,7,8需要在js和css裡增加一點小程式碼，如下：

XML/HTML Code

複製內容到剪貼簿

document.createElement("header");    document.createElement("content");    document.createElement("footer");     css： header,content,footer{display:block} 以上的意思就是自訂一個標籤為header並將其設為塊狀顯示，下面附上完整代碼吧： XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3. head>  
4. meta charset=charset=>
5.    title>用語意化標籤去寫你的HTML，相容IE6,7,8title>
6.    style>
7.   
8. *{margin:0;padding:0;}   
9. header,content,footer{display:block}   
10. header{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto;text-align:center #000;margin:10px auto;text-align:center;font-size:24px; 🎜> content{width:600px;height:250px;line-height:250px;border:1px solid #000;margin:10px auto;text-align:centerfont-size:24px}; 🎜>
11. footer{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto)text-align:center;font-size:24px; 🎜>
12. style>  
13. script type=type=type=>  
14. document.createElement("header");   
15. document.createElement("content");   
16. document.createElement("footer");   
17. script>  
18. head>  
19.     
20. body>  
21. header>這是頭部這是頭部這是頭部
22. 這是頭部這是頭部這是頭部這是頭>header>  
23. content>這是中間內容區這是中間內容區content
24. >   footer
25. >這是底部 footer>  

body>   html>  

接著說些無關的吧，為什麼要語意化寫html呢？

首先，程式碼易於閱讀，當別人看你程式碼的時候，一眼就能明白；其次，有利於SEO，搜尋引擎的爬蟲很大程度上會忽略用於表現的標記，而只注重語義標記。

所以，趕快開始用語意化標籤去寫你的HTML吧，何況這也不難，對吧？

附1：

以上這篇使用語意化標籤去寫你的HTML 相容IE6,7,8就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文網址：http://www.cnblogs.com/shouce/p/5385701.html