利用Html5做網頁
首先,我們要聲明並創建文檔類型,我們不再HTML 4或XHTML 1.0 那樣 PUBLIC "-//W3C//DTD XHtml 1.0 Transitional.....聲明,我們可以這樣寫:
- <!DOCTYPE Html>
看看吧,簡單而明顯,不區分大小寫。它可以更容易向後兼容。至少可以節省你一些打字的時間。
我們現在已經為HTML 5文檔定義了類型。到目前為止一切順利。現在,這們看看Html5的新標簽。在我們浏覽新標簽之前,先看看我們平常是怎麼寫的:
- <Html>
- <head>
- ...其他...
- </head>
- <body>
- <div id="header">
- <h1>CSS3-Html5之家</h1>
- </div>
- <div id="nav">
- <ul>
- <li>首頁</li>
- <li>關於</li>
- <li>聯系</li>
- </ul>
- </div>
- <div id=content>
- <h1>標題</h1>
- <p>...</p>
- </div>
- <div id="footer">
- <p>版權信息</p>
- </div>
- </body>
- </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>:
- <nav>
- <ul>
- <li><a href="index.Html">Home</a></li>
- <li><a href="/about/">About</a></li>
- <li><a href="/blog/">Blog</a></li>
- </ul>
- </nav>
<section>標簽:
<section>標簽裡面可以是一組內容或者專題分組,通常有一個起始標記和結束標記。當然了,該標簽也可以嵌套。
<article>標簽:
<article>標簽裡面可以是一節內容。
<aside>
<footer>標簽:
<footer>標簽,不說大家也能明白這個是干什麼用的了吧。。也可以有多個,通常都是在網站最底部.
讓我們來看看最後的代碼:
- <!DOCTYPE Html>
- <Html>
- <head>
- ...stuff...
- </head>
- <body>
- <header>
- <h1>My Site</h1>
- </header>
- <nav>
- <ul>
- <li>Home</li>
- <li>About</li>
- <li>Contact</li>
- </ul>
- </nav>
- <section>
- <h1>My Article</h1>
- <article>
- <p>...</p>
- </article>
- </section>
- <footer>
- <p>...</p>
- </footer>
- </body>
- </Html>
通過代碼,更簡潔更容易理解,對不對?