• 
<ul id="mayc0"></ul>
    <ul id="mayc0"><center id="mayc0"></center></ul>
    

    <strike id="mayc0"><input id="mayc0"></input></strike>
    <ul id="mayc0"></ul>
  • 



    
 
    
   
    始創于2000年    股票代碼：831685
    
   
    咨詢熱線：0371-60135900
   
   
   
   
   
   
    
		   
   
   
   注冊有禮
   登錄			
  
   
    
 
    

    

    
 
    
   
   
    • 掛牌上市企業
    • 60秒人工響應
    • 99.99%連通率
    • 7*24h人工
    • 故障100倍補償
    
 
    

    






    

    
 
 





 
  


    

    



    


    



    
 
    您的位置： 網站首頁 > 幫助中心>文章內容 
    

    


    


    

    
   
     
  
     
 
  
    

  
  
   
    
    

    
  
  

                

  
  
     
    
    
    
      
      
    
      
    

  
    
    
    
      
    語義更明確簡潔的結構HTML5初學教程
    		
    
    
    
    
        發布時間:  2012/8/26 18:02:15
    
    
  
    
  
    
    
    
       
 
    HTML5是什么
    

       對于HTML5的革新，按我的理解，可以總結為語義明確的標簽體系、化繁為簡的富媒體支持、神奇的本地數據存儲技術、不需要插件的富動畫(canvas)、強大的API支持。總之，HTML5讓人機交互，人網交互變得更加舒適，貼合用戶。
    

       以往對富媒體應用與本存儲的支持乏力也不再是瀏覽器的切膚之痛。將Web從內容平臺推向標準化的應用平臺，并一統各在平臺陣營的標準，才是HTML5革命的初衷。 本文，我就拋磚引玉，闡述HTML5的革新之一：語義更明確簡潔的結構。 從”頭”說起一個標準的XHTML頭部代碼應該是這樣：
    

     
    

      
    
    1. 
    
      <div id=”header”>   
      
    
      2. 
    
    2. <div class=”hgroup”> 
      3. 
    
    3. <h1>網站標題</h1> 
      4. 
    
    4. <h1>網站副標題</h1> 
      5. 
    
    5. </div> 
      6. 
    
    6. <div id=”nav”> 
      7. 
    
    7. <ul> 
      8. 
    
    8. <li>HTML 5</li> 
      9. 
    
    9. <li>CSS</li> 
      10. 
    
    10. <li>JavaScript</li> 
      11. 
    
    11. </ul> 
      12. 
    
    12. </div> 
      13. 
    
    13. </div> 
      14. 
    
    14. <!–//header end–> 
      15. 
    
    15. <div id=”left”> 
      16. 
    
    16. <div class=”article”> 
      17. 
    
    17. <p>這是一篇講述HTML 5新結構標簽的文章。</p> 
      18. 
    
    18. </div> 
      19. 
    
    19. <div class=”article”> 
      20. 
    
    20. <p>這還是一篇講述HTML 5新結構標簽的文章。</p> 
      21. 
    
    21. </div> 
      22. 
    
    22. </div> 
      23. 
    
    23. <!–//left end–> 
      24. 
    
    24. <div id=”aside”> 
      25. 
    
    25. <h1>作者簡介</h1> 
      26. 
    
    26. <p>Mr.Think，專注Web前端技術的凡夫俗子。</p> 
      27. 
    
    27. </div> 
      28. 
    
    28. <!–//side end–> 
      29. 
    
    29. <div id=”footer”> 
      30. 
    
    30. 頁面的底部 
      31. 
    
    31. </div> 
      32. 
    
    32. <!–//footer end–> 
      33. 

    

    上面是一個簡單的博客頁面部分HTML，由頭部、文章展示區、右側欄、底部組成。編碼整潔，也符合XHTML的語義化，即便是在HTML 5中也可以很好的表現。但是對瀏覽器來說，這就是一段沒有區分開權重的代碼，而不是一個讓機器也能讀懂語義的標簽來定義相應的區塊。比如，標準瀏覽器(比如Firefox、Chrome甚至新版的IE9)都有一個快捷鍵可以帶引客戶直接跳轉到頁面的導航，但問題是所有的區塊都是用DIV定義，并且DIV的ID值是同開發者定的，所以，瀏覽器并不知道哪個應該是導航鏈接所在區塊。HTML 5新標簽的出現，正好彌補了這一缺憾。那么，上面的代碼，換成HTML 5就可以這樣寫：
    

     
    

      
    
    1. 
    
      <header>   
      
    
      2. 
    
    2. <hgroup> 
      3. 
    
    3. <h1>網站標題</h1> 
      4. 
    
    4. <h1>網站副標題</h1> 
      5. 
    
    5. </hgroup> 
      6. 
    
    6. <nav> 
      7. 
    
    7. <ul> 
      8. 
    
    8. <li>HTML 5</li> 
      9. 
    
    9. <li>CSS</li> 
      10. 
    
    10. <li>JavaScript</li> 
      11. 
    
    11. </ul> 
      12. 
    
    12. </nav> 
      13. 
    
    13. </header> 
      14. 
    
    14. <div id=”left”> 
      15. 
    
    15. <article> 
      16. 
    
    16. <p>這是一篇講述HTML 5新結構標簽的文章。</p> 
      17. 
    
    17. </article> 
      18. 
    
    18. <article> 
      19. 
    
    19. <p>這還是一篇講述HTML 5新結構標簽的文章。</p> 
      20. 
    
    20. </article> 
      21. 
    
    21. </div> 
      22. 
    
    22. <aside> 
      23. 
    
    23. <h1>作者簡介</h1> 
      24. 
    
    24. <p>Mr.Think，專注Web前端技術的凡夫俗子。</p> 
      25. 
    
    25. </aside> 
      26. 
    
    26. <footer> 
      27. 
    
    27. 網頁底部 
      28. 
    
    28. </footer> 
      29. 

    

    原來，HTML的頁面結構可以如此之美，不用注釋也能一目了然。對于瀏覽器，找到對應的區塊也不再會茫然無措。
    

    另外，HTML5雖然目前并不為所有瀏覽器所支持，但這個能省去100多字節(對于日PV百萬級以上的站點，能省下不少的流量哦)的頭部已可以完美的兼容了。如果你對IE瀏覽器解析模式有研究的話，你應該知道，頁面在沒有定義doctype的情況下會觸發怪異模式，而只要定義了瀏覽器就可以在標準模式下解析頁面，而不需要指定某個類型的DTD。
    

    新的語義化標簽體系
    

    語義化編碼是一個合格前端Developer必備的技能，但隨著網頁的日漸豐富化，僅僅用原有的xhtml標簽去語義化顯然已經力不從心。上帝說：”要有光!”便有了光。于是，HTML 5提供了一系列新的標簽及相應屬性，以反應現代網站典型語義。實踐出真理。還是寫一個例子吧：
    

    孰繁孰簡，就不用我說了。是的，HTML5的頭部可以如此簡單，可以輕易的記住!并且，可以忽略大小寫，引號以及最后一個尖括號前的反斜線。
    

    為什么可以如此松散?其實，如果把XHTML當成text/html發送，瀏覽器一樣可以很好的解析，瀏覽器并不在乎代碼的語法。所以，HTML 5是形而上的，它可能會破壞原有的一些標準，但仍可在瀏覽器中很好的表現。
    

    當然，為了團隊協助與后續維護的方便，我們還是應該統一一種你喜歡的風格的寫法，比如：
    

      
    
    1. <!doctype html> 
      2. 
    
    2. <html> 
      3. 
    
    3. <head>你能記住嗎?你會去死記硬背嗎?當然不會!我們只需要機械的復制粘貼即可。
      4. 
    
    4. 
    
        
        
      • <meta charset=”gb2312″ /> 
        • 
        
      • … 
        • 
        
      • </head> 
        • 
        
      • <body> 
        • 
        
      • … 
        • 
        
      • </body> 
        • 
        
      • </html>  
        • 
    
      
    
      5. 

    

     
    

    再看看一個標準的HTML5頭部是如何的：
    

     
    

      
    
    1. 
    
      <!doctype html> 
      
    
      2. 
    
    2. <meta charset=gb2312 /> 
      3. 

    

    語義更明確簡潔的結構.

    本文出自：億恩科技【www.vbseamall.com】
    
      
      
    

		服務器租用/服務器托管中國五強！虛擬主機域名注冊頂級提供商！15年品質保障！--億恩科技[ENKJ.COM]
    
          		
    
    

    


 

	

      
    
      
    
    
    
    
    
    
    
    
    
  
    
  

  
    
    
   

    
 

 



    
 
    
   
  • 您可能在找
    • 
   
 
    

    




    
	
    
    	
    
    	    
            	
  • 億恩北京公司：
    • 
                
  • 經營性ICP/ISP證：京B2-20150015
    • 
               
                
    	     
            	
  • 億恩鄭州公司：
    • 
                
  • 經營性ICP/ISP/IDC證：豫B1.B2-20060070
    • 
                
                
        	
            
            	
  • 億恩南昌公司：
    • 
                
  •  經營性ICP/ISP證：贛B2-20080012
    • 
             
                
            
            
            	
  • 服務器/云主機 24小時售后服務電話：0371-60135900
    • 
                
  •  虛擬主機/智能建站 24小時售后服務電話：0371-60135900
    • 
                

            
        
    
       
    
       專注服務器托管17年
       
    掃掃關注-微信公眾號
    
       
    0371-60135900
    
       
    
      
       
    
       
      
    
      
         
      
      
       
    
         
    
       Copyright© 1999-2019 ENKJ All Rights Reserved 億恩科技 版權所有　 地址：鄭州市高新區翠竹街1號總部企業基地億恩大廈　 法律顧問：河南亞太人律師事務所郝建鋒、杜慧月律師  
       
       京公網安備41019702002023號
         
    
       
    
   
   


    



    
    
    
        
             
            
             
       
        
        
            0
        
        
    
    
    
    
        
              
        
    
    
    
    
        
             
        
        
    
    
    
    
        
              
        
        
    
            
    
                
    
                     
                    
    0371-60135900
    7*24小時客服服務熱線