欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用語義化標(biāo)簽去寫你的HTML 兼容IE6,7,8

  發(fā)布時(shí)間：2016-04-14 17:09:54   作者：佚名   我要評(píng)論
下面小編就為大家?guī)硪黄褂谜Z義化標(biāo)簽去寫你的HTML 兼容IE6,7,8。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧

HTML5增加了更多語義化的標(biāo)簽，如header，footer，nav……讓我們?cè)陧撁婢帉懙臅r(shí)候，不需要再用下面這種方法去布局了：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="header">這是頭部</div>  
  2. <div class="content">這是中間內(nèi)容區(qū)</div>  
  3. <div class="footer">這是底部</div>    

而可以用這樣的方式去布局：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <header>這是頭部</header>  
  2. <content>這是中間內(nèi)容區(qū)</content>  
  3. <footer>這是底部</footer>    

但是IE不向前支持，所以我們想讓它支持IE6,7,8需要在js和css里增加一點(diǎn)小代碼，如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. document.createElement("header");   
  2. document.createElement("content");   
  3. document.createElement("footer");    

css：

header,content,footer{display:block}

以上的意思就是自定義一個(gè)標(biāo)簽為header并將其設(shè)為塊狀顯示，下面附上完整代碼吧：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>用語義化標(biāo)簽去寫你的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>這是中間內(nèi)容區(qū)</content>  
  23. <footer>這是底部</footer>  
  24. </body>  
  25. </html>  

接著說些無關(guān)的吧，為什么要語義化去寫html呢？

首先，代碼易于閱讀，當(dāng)別人看你代碼的時(shí)候，一眼就能明白；其次，有利于SEO，搜索引擎的爬蟲很大程度上會(huì)忽略用于表現(xiàn)的標(biāo)記，而只注重語義標(biāo)記。

所以，趕快開始用語義化標(biāo)簽去寫你的HTML吧，何況這也不難，對(duì)吧？

附1：

以上這篇使用語義化標(biāo)簽去寫你的HTML 兼容IE6,7,8就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

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

相關(guān)文章

  • HTML5語義化元素你真的用對(duì)了嗎

    這篇文章主要介紹了HTML5語義化元素的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2019-08-22

  • HTML5新特性之語義化標(biāo)簽

    HTML5 只有一個(gè)簡單的文檔類型：<!DOCTYPE html>，表示瀏覽器會(huì)按照標(biāo)準(zhǔn)模式解析。今天小編給大家?guī)砹薍TML5新特性之語義化標(biāo)簽，感興趣的朋友一起看看吧
    2017-10-31

  • HTML5中語義化 b 和 i 標(biāo)簽

    b 和 i 標(biāo)簽在現(xiàn)在的 Web 標(biāo)準(zhǔn)潛規(guī)則中是不推薦使用，甚至是反對(duì)使用的，因?yàn)檎J(rèn)為他們只是“表現(xiàn)”粗體和斜體，而沒有任何“語義”。更多的用 strong
    2008-10-17

  • HTML5 語義化結(jié)構(gòu)化規(guī)范化

    HTML結(jié)構(gòu)更加清晰、規(guī)范，學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。 HTML5添加了一些新元素，用來標(biāo)識(shí)常用的結(jié)構(gòu)，是html更具語義化，可是我們無法直接使用，即使可能用到還要等他個(gè)十年
    2008-10-17

  • HTML標(biāo)簽語義化（含H5）

    本篇文章小編為大家介紹HTML標(biāo)簽語義化（含H5） ，有需要的朋友可以參考一下
    2013-04-08

  • 詳解HTML5常用的語義化標(biāo)簽

    這篇文章主要介紹了詳解HTML5常用的語義化標(biāo)簽的相關(guān)資料,需要的朋友可以參考下
    2019-09-27

  • 淺談HTML的語義化和一些簡單優(yōu)化

    下面小編就為大家?guī)硪黄獪\談HTML的語義化和一些簡單優(yōu)化。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-10-12

  • 淺談?wù)Z義化的HTML結(jié)構(gòu)到底有什么好處

    下面小編就為大家?guī)硪黄獪\談?wù)Z義化的HTML結(jié)構(gòu)到底有什么好處。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-08-05

  • HTML標(biāo)簽語義化的介紹

    html標(biāo)簽語義：即html標(biāo)簽的含義
    2012-11-17

  • XHTML標(biāo)簽語義化介紹

    前兩天參加了公司組織的一個(gè)WD培訓(xùn)，有一節(jié)課講了標(biāo)簽語義化，聽了之后感覺特別有用，更正了我以前對(duì) HTML 和 CSS 的錯(cuò)誤看法。
    2011-01-25

最新評(píng)論