应用词义化标识去写你的HTML 适配IE6,7,8

HTML5提升了更多词义化的标识,如header,footer,nav……让大家在网页页面撰写的情况下,不必须再用下面这类方式去合理布局了:

XML/HTML Code拷贝內容到剪贴板
  1. <div class="header">这是头顶部</div>  
  2. <div class="content">这是正中间內容区</div>  
  3. <div class="footer">这是底部</div>    

而能够用这样的方法去合理布局:

XML/HTML Code拷贝內容到剪贴板
  1. <header>这是头顶部</header>  
  2. <content>这是正中间內容区</content>  
  3. <footer>这是底部</footer>    

可是IE不向前适用,因此大家想让它适用IE6,7,8必须在js和css里提升1点小编码,以下:

XML/HTML Code拷贝內容到剪贴板
  1. document.createElement("header");   
  2. document.createElement("content");   
  3. document.createElement("footer");    

css:

header,content,footer{display:block}

以上的意思便是自定1个标识为header并将其设为块状显示信息,下面附上详细编码吧:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf⑻">  
  5. <title>术语义化标识去写你的HTML,适配IE6,7,8</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. header,content,footer{display:block}   
  9. header{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}   
  10. content{width:600px;height:250px;line-height:250px;border:1px solid #000;margin:10px auto;text-align:center;font-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="text/javascript">  
  14. document.createElement("header");   
  15. document.createElement("content");   
  16. document.createElement("footer");   
  17. </script>  
  18. </head>  
  19.     
  20. <body>  
  21. <header>这是头顶部</header>  
  22. <content>这是正中间內容区</content>  
  23. <footer>这是底部</footer>  
  24. </body>  
  25. </html>  

接着说些不相干的吧,为何要词义化去写html呢?

最先,编码易于阅读文章,当他人看你编码的情况下,1眼就可以搞清楚;其次,有益于SEO,检索模块的爬虫很大水平上会忽视用于主要表现的标识,而只重视词义标识。

因此,赶紧刚开始术语义化标识去写你的HTML吧,更何况这也不难,对吧?

附1:

以上这篇应用词义化标识去写你的HTML 适配IE6,7,8便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/shouce/p/5385701.html