利用HTML5做網(wǎng)頁(yè)
首先，我們要聲明并創(chuàng)建文檔類型,我們不再HTML 4或XHTML 1.0 那樣 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional.....聲明，我們可以這樣寫:
- <!DOCTYPE html>
看看吧，簡(jiǎn)單而明顯，不區(qū)分大小寫。它可以更容易向后兼容。至少可以節(jié)省你一些打字的時(shí)間。
我們現(xiàn)在已經(jīng)為HTML 5文檔定義了類型。到目前為止一切順利。現(xiàn)在，這們看看HTML5的新標(biāo)簽。在我們?yōu)g覽新標(biāo)簽之前，先看看我們平常是怎么寫的：
- <html>
- <head>
- ...其他...
- </head>
- <body>
- <div id="header">
- <h1>CSS3-HTML5之家</h1>
- </div>
- <div id="nav">
- <ul>
- <li>首頁(yè)</li>
- <li>關(guān)于</li>
- <li>聯(lián)系</li>
- </ul>
- </div>
- <div id=content>
- <h1>標(biāo)題</h1>
- <p>...</p>
- </div>
- <div id="footer">
- <p>版權(quán)信息</p>
- </div>
- </body>
- </html>
在上面的例子中使用<div>.這是現(xiàn)在很普遍的做法。其目的是雙重的，第一，提供了唯一的身份ID,可以具體的應(yīng)用于網(wǎng)頁(yè)章節(jié)。第二，標(biāo)識(shí)作為一種原始的，偽語(yǔ)義結(jié)構(gòu)。每個(gè)網(wǎng)站上的ID名字可能都不相同，這時(shí)我們就很難明白那些ID是什么意思了。
<header>標(biāo)簽:
<header>標(biāo)簽就相當(dāng)于我們平常用<div id="header">定義的一樣。如果你的網(wǎng)站上還是<div id="header">這樣定義，那我們現(xiàn)在可以用<header>替換它了。
<nav>標(biāo)簽:
<nav>是導(dǎo)航標(biāo)簽，就像我們平常用:
<div id="menu">
<ul>
<li>index</li>
<li>news</li>
...
</ul>
</div>
現(xiàn)在用<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>標(biāo)簽：
<section>標(biāo)簽里面可以是一組內(nèi)容或者專題分組，通常有一個(gè)起始標(biāo)記和結(jié)束標(biāo)記。當(dāng)然了，該標(biāo)簽也可以嵌套。
<article>標(biāo)簽:
<article>標(biāo)簽里面可以是一節(jié)內(nèi)容。
<aside>
<footer>標(biāo)簽：
<footer>標(biāo)簽，不說(shuō)大家也能明白這個(gè)是干什么用的了吧。。也可以有多個(gè)，通常都是在網(wǎng)站最底部.
讓我們來(lái)看看最后的代碼：
- <!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>
通過代碼，更簡(jiǎn)潔更容易理解，對(duì)不對(duì)？