首頁>網頁設計教程>HTML教程

利用HTML5語義化的代碼設計網頁

作者：Eve Cole 更新時間：2025-03-27 06:00:02

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

  1.  <!DOCTYPEhtml>

看看吧，簡單而明顯，不區分大小寫。它可以更容易向後兼容。至少可以節省你一些打字的時間。

我們現在已經為HTML 5文檔定義了類型。到目前為止一切順利。現在，這們看看HTML5的新標籤。在我們瀏覽新標籤之前，先看看我們平常是怎麼寫的：

  1.  <html>
  2.  <head>
  3.  ...其他...
  4.  </head>
  5.  <body>
  6.  <divid=header>
  7.  <h1>CSS3-HTML5之家</h1>
  8.  </div>
  9.  <divid=nav>
  10.  <ul>
  11.  <li>首頁</li>
  12.  <li>關於</li>
  13.  <li>聯繫</li>
  14.  </ul>
  15.  </div>
  16.  <divid=content>
  17.  <h1>標題</h1>
  18.  <p>...</p>
  19.  </div>
  20.  <divid=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><ahref=index.html>Home</a></li>
  4.  <li><ahref=/about/>About</a></li>
  5.  <li><ahref=/blog/>Blog</a></li>
  6.  </ul>
  7.  </nav>

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

<article>標籤：<article>標籤裡面可以是一節內容。

<aside>

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

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

  1.  <!DOCTYPEhtml>
  2.  <html>
  3.  <head>
  4.  ...stuff...
  5.  </head>
  6.  <body>
  7.  <header>
  8.  <h1>MySite</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>MyArticle</h1>
  19.  <article>
  20.  <p>...</p>
  21.  </article>
  22.  </section>
  23.  <footer>
  24.  <p>...</p>
  25.  </footer>
  26.  </body>
  27.  </html>

通過代碼，更簡潔更容易理解，對不對？

相關文章