DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 利用HTML5做網頁
利用HTML5做網頁
編輯:HTML5詳解     

利用Html5做網頁

首先,我們要聲明並創建文檔類型,我們不再HTML 4或XHTML 1.0 那樣 PUBLIC "-//W3C//DTD XHtml 1.0 Transitional.....聲明,我們可以這樣寫:
 

  1. <!DOCTYPE Html> 


看看吧,簡單而明顯,不區分大小寫。它可以更容易向後兼容。至少可以節省你一些打字的時間。
我們現在已經為HTML 5文檔定義了類型。到目前為止一切順利。現在,這們看看Html5的新標簽。在我們浏覽新標簽之前,先看看我們平常是怎麼寫的:
 

  1. <Html> 
  2.     <head> 
  3.     ...其他...  
  4.     </head> 
  5.     <body> 
  6.         <div id="header"> 
  7.             <h1>CSS3-Html5之家</h1> 
  8.         </div> 
  9.         <div id="nav"> 
  10.             <ul> 
  11.                 <li>首頁</li> 
  12.                 <li>關於</li> 
  13.                 <li>聯系</li> 
  14.             </ul> 
  15.         </div> 
  16.         <div id=content> 
  17.             <h1>標題</h1> 
  18.             <p>...</p> 
  19.         </div> 
  20.         <div id="footer"> 
  21.             <p>版權信息</p> 
  22.         </div> 
  23.     </body> 
  24. </Html> 

 在上面的例子中使用<div>.這是現在很普遍的做法。其目的是雙重的,第一,提供了唯一的身份ID,可以具體的應用於網頁章節。第二,標識作為一種原始的,偽語義結構。每個網站上的ID名字可能都不相同,這時我們就很難明白那些ID是什麼意思了。

<header>標簽:
<header>標簽就相當於我們平常用<div id="header">定義的一樣。如果你的網站上還是<div id="header">這樣定義,那我們現在可以用<header>替換它了。

<nav>標簽:
<nav>是導航標簽,就像我們平常用:
<div id="menu"> 
    <ul>
    <li>index</li>
    <li>news</li> 
 ...
    </ul>
</div>
現在用<nav>:
 

  1. <nav> 
  2. <ul> 
  3. <li><a href="index.Html">Home</a></li> 
  4. <li><a href="/about/">About</a></li> 
  5. <li><a href="/blog/">Blog</a></li> 
  6. </ul> 
  7. </nav> 

<section>標簽:
<section>標簽裡面可以是一組內容或者專題分組,通常有一個起始標記和結束標記。當然了,該標簽也可以嵌套。

<article>標簽:
<article>標簽裡面可以是一節內容。

<aside>

<footer>標簽:

<footer>標簽,不說大家也能明白這個是干什麼用的了吧。。也可以有多個,通常都是在網站最底部.

讓我們來看看最後的代碼:
 

  1. <!DOCTYPE Html> 
  2. <Html> 
  3.     <head> 
  4.     ...stuff...  
  5.     </head> 
  6.     <body> 
  7.         <header> 
  8.             <h1>My Site</h1> 
  9.         </header> 
  10.         <nav> 
  11.             <ul> 
  12.                 <li>Home</li> 
  13.                 <li>About</li> 
  14.                 <li>Contact</li> 
  15.             </ul> 
  16.         </nav> 
  17.         <section> 
  18.             <h1>My Article</h1> 
  19.             <article> 
  20.                 <p>...</p> 
  21.             </article> 
  22.         </section> 
  23.         <footer> 
  24.             <p>...</p> 
  25.         </footer> 
  26.     </body> 
  27. </Html> 

通過代碼,更簡潔更容易理解,對不對?

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved