HTML 5 新增的元素_Web標(biāo)準(zhǔn)教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      



      在本人看來，HTML 5是一個妥協(xié)方案，雖不激進(jìn)，但更能推動技術(shù)的繼續(xù)進(jìn)步。沒有命名空間，元素也不要求閉合（當(dāng)然這并不是優(yōu)點(diǎn)），瀏覽器也可以寬大處理一些錯誤。一切沿襲上個世紀(jì)HTML 4的做法。對于HTML的渲染，瀏覽器一直停留在1999年的水平。為此，HTML 5是一個實(shí)用主義方案，這樣不僅可以繼續(xù)處理這么多年來散落在世界各個角落的HTML，也可以讓瀏覽器廠商更輕易添加新特性。這就叫degrade gracefully（優(yōu)雅降級）。讓我們來看看HTML 5增加的一些新元素。 
       
      


      結(jié)構(gòu)元素 
       
      


      這真是大快人心。目前，我們定義結(jié)構(gòu)只能通過一個“萬能”的div, 試圖通過設(shè)置它的特性id的值如header, footer, sidebar等來分別表達(dá)頭部，底部或者側(cè)欄等。有了它們，代碼編寫者不再需要為id的命名費(fèi)盡心思，對于手機(jī)、閱讀器等設(shè)備更有語義的好處。HTML 5增加了新的結(jié)構(gòu)元素來表達(dá)這些最常用的結(jié)構(gòu)： 
       
      


      section: 這可以表達(dá)書本的一部分或一章，或者一章內(nèi)的一節(jié) 
       
      


      header: 頁面主體上的頭部。并非head元素  
      


      footer: 頁面的底部（頁腳），可以是一封郵件簽名的所在  
      


      nav: 到其他頁面的鏈接集合  
      


      article: 諸如blog, 雜志，綱要等之中的一條獨(dú)立記錄。  
      


      舉個例子，一個blog的首頁，用HTML 5寫的話，可以是這樣（有省略）：  
      


      


      

    

        
      

            以下為引用的內(nèi)容：
      

            
      <<!DOCTYPE HTML>
      <HTML>
        <head>
          <title>realazy</title>
        </head>
        <body>
          <header>
          <h1>Realazy</h1>
          </header>
          <section>
          <article>
          <h2><a href="http://realazy.org/blog">標(biāo)題</a></h2>
          <p>內(nèi)容在此...（省略n字）</p>
          </article>
          <article>  
          <h2><a href="http://realazy.org/blog">標(biāo)題2</a></h2>
          <p>內(nèi)容2在此...（省略n字）</p>
          </article>
          ...
          </section>
          <footer>
          <nav>
          <ul>
            <li><a href="http://realazy/blog">導(dǎo)航1</a></li>
            <li><a href="http://realazy/blog">導(dǎo)航2</a></li>
            ...
          </ul>
          </nav>
          <p>© 2007 realazy</p>
          </footer>
        </body>
      </HTML>塊級block的語義元素
      HTML還增加以下三個塊級元素： 
       
      

            
      aside 
      figure/code> 
      dialog 
      aside可以用以表達(dá)注記、貼士、側(cè)欄、摘要、插入的引用等諸如作為補(bǔ)充主體的內(nèi)容。比如這樣表達(dá)blog的側(cè)欄：  
      

            
      <aside>
        <h3>最新文章</h3>
        <ul>
          <li><a href="http://realazy.org/blog/">文章標(biāo)題</a></li>
          ...
        </ul>
      </aside>figure元素表示一個有說明的塊級圖片。比如：  
      

            
      <figure>
        <legend>這是圖片的說明</legend>
        <img alt="圖片可替換文本" src="/path/to/img.png" />
      </figure>dialog元素用于表達(dá)人們之間的對話。在HTML 5中，dt用于表示說話者，而dd則用來表示說話者的內(nèi)容。如：  
      

            
      <dialog>
        <dt>佛</dt>
        <dd>色即是空</dd>
        <dt>悟空</dt>
        <dd>我現(xiàn)在需要點(diǎn)空……行內(nèi)（inline）的語義元素 
       
      

                  		

        
      

          


      

  
      


      m元素用來標(biāo)記一些不是那么需要著重強(qiáng)調(diào)的文本。現(xiàn)在尚有爭議，可能最終會改為mark.  
      


      time元素如其名，用來表達(dá)時(shí)間。它需要一個datetime的特性來標(biāo)明機(jī)器能夠熟悉的時(shí)間，如：  
      


      <time datetime="2008-08-08T20:08:08">2008年8月8日晚上8時(shí)8分8秒</tiem>meter元素表達(dá)特定范圍內(nèi)的數(shù)值�？捎糜谛剿�、百分比、分?jǐn)?shù)等。比如：  
      


      很遺憾地告訴你，我只有<meter>150cm</meter>它還有6個特性來表達(dá)各方面的含義，比如：  
      


      <p>您的分?jǐn)?shù)是：<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B </meter>.</p>  
      


      還有一個progress，也是義如其名，用以表達(dá)進(jìn)度：  
      


      目標(biāo)完成度：<progress value="40" max="100">40%</progress>嵌入多媒體  
      


      新增video和audio元素。顧名思義，分別是用來插入視頻和聲音的。至于格式，交由瀏覽器實(shí)現(xiàn)，HTML再也不需要非凡的代碼去播放特定的格式。就像img一樣，不管是png, jpg還是gif都可以顯示。值得注重的是，它們可以包含內(nèi)容。比如，可以把歌詞放到某段歌曲中去： 
       
      


      


      

    

        
      

            以下為引用的內(nèi)容：
      <audio src="誰人伴你睡.mp3">
        <p>淚枯干</p>
        <p>難忍怎么委屈自已</p>
        <p>曾經(jīng)有一刻悲與喜</p>
        ...
      </audio>      		

        
      

          


      

  
      


      交互性  
      


      HTML 5同時(shí)也叫Web Applications 1.0, 因此也進(jìn)一步發(fā)展交互能力。這些標(biāo)簽就是為提高頁面的交互體驗(yàn)而生：  
      


      


      

    

        
      

            以下為引用的內(nèi)容：
      details 
      datagrid 
      menu 
      command      		

        
      

          


      

  
      


      details  
      


      用來表示一段具體的內(nèi)容，但是內(nèi)容默認(rèn)可能不顯示，通過某種手段（如點(diǎn)擊）與legend交互才顯示出來。這跟現(xiàn)在各種通過JavaScript隱藏一段內(nèi)容，在點(diǎn)擊后才顯示出來的做法有些類似。比如：  
      


      一句話記錄生活中的點(diǎn)點(diǎn)滴滴，  
      


      


      

    

        
      

            以下為引用的內(nèi)容：
      <details>
        <legend>更多</legend>
        <p>交流與分享，拉近你和朋友，支持 MSN/GTalk/QQ、短信、手機(jī) WAP</p>
      </details>它可以有一個open的特性，用來顯示細(xì)節(jié)與否。      		

        
      

          


      

  
      


      datagrid用來控制數(shù)據(jù)，可以由用戶或者腳本來更新。  
      


      menuHTML 2就存在了，不過HTML 4把它廢棄了。HTML 5廢物利用，并在期內(nèi)加上command元素。  
      


      參考：New elements in HTML 5  
      


      

      



      


      來源：模板無憂//所屬分類：Web標(biāo)準(zhǔn)教程/更新時(shí)間：2007-09-07


      

      



      


      



      相關(guān)Web標(biāo)準(zhǔn)教程：