HTML 5基礎(chǔ)之初試鋒芒

作者：Elaine.Ye 2011-07-18 14:54:55

HTML 5是一種設(shè)計(jì)來組織web內(nèi)容的語言，其目的是通過創(chuàng)建一種標(biāo)準(zhǔn)的和直觀的UI標(biāo)記語言來把web設(shè)計(jì)和開發(fā)變得容易起來。HTML5可謂是“信息到網(wǎng)站設(shè)計(jì)的映射方法”，因?yàn)樗w現(xiàn)了信息映射的本質(zhì)，劃分信息，并給信息加上標(biāo)簽，使其變得容易使用和理解。

HTML5反映了在網(wǎng)絡(luò)上和在云端實(shí)施業(yè)務(wù)的方式的巨大變化。本篇文章是一個(gè)由四個(gè)部分構(gòu)成的系列的第一部分，該文章系列旨在尋找并突出說明HTML5中的變化。其開始先介紹新的標(biāo)簽和頁(yè)面的組織，然后提供一些網(wǎng)頁(yè)設(shè)計(jì)方面的高層面信息，比如說表單的創(chuàng)建、API的使用及其價(jià)值所在，以及Canvas提供的一些頗具創(chuàng)意的可能做法等。

HTML 5是一種設(shè)計(jì)來組織web內(nèi)容的語言，其目的是通過創(chuàng)建一種標(biāo)準(zhǔn)的和直觀的UI標(biāo)記語言來把web設(shè)計(jì)和開發(fā)變得容易起來。HTML5提供了各種切割和劃分頁(yè)面的手段，其允許你創(chuàng)建的切割組件不僅能用來邏輯地組織站點(diǎn)，而且能夠賦予網(wǎng)站聚合的能力。 HTML5可謂是“信息到網(wǎng)站設(shè)計(jì)的映射方法”，因?yàn)樗w現(xiàn)了信息映射的本質(zhì)，劃分信息，并給信息加上標(biāo)簽，使其變得容易使用和理解。這是HTML5富于表現(xiàn)力的語義和實(shí)用性美學(xué)的基礎(chǔ)，HTML5賦予設(shè)計(jì)者和開發(fā)者各種層面的能力來向外發(fā)布各式各樣的內(nèi)容，從簡(jiǎn)單的文本內(nèi)容到豐富的、交互式的多媒體無不包括在內(nèi)。

HTML5提供了高效的數(shù)據(jù)管理、繪制、視頻和音頻工具，其促進(jìn)了web上的和便攜式設(shè)備的跨瀏覽器應(yīng)用的開發(fā)。HTML5是驅(qū)動(dòng)移動(dòng)云計(jì)算服務(wù)方面的發(fā)展的技術(shù)之一，因?yàn)槠湓试S更大的靈活性，支持開發(fā)非常精彩的交互式網(wǎng)站。其還引入了新的標(biāo)簽（tag）和增強(qiáng)性的功能，其中包括了一個(gè)優(yōu)雅的結(jié)構(gòu)、表單的控制、API、多媒體、數(shù)據(jù)庫(kù)支持和顯著提升的處理速度等。

HTML5中的新標(biāo)簽都是能高度關(guān)聯(lián)喚起的，標(biāo)簽封裝了它們的作用和用法。HTML的過去版本更多的是使用非描述性的標(biāo)簽，然而，HTML5擁有高度描述性的、直觀的標(biāo)簽，其提供了豐富的能夠立刻讓人識(shí)別出內(nèi)容的內(nèi)容標(biāo)簽。例如，被頻繁使用的<div>標(biāo)簽已經(jīng)有了兩個(gè)增補(bǔ)進(jìn)來的<section>和<article>標(biāo)簽。 <video>、<audio>、<canvas>和<figure> 標(biāo)簽的增加也提供了對(duì)特定類型內(nèi)容的更加精確的描述。

HTML5提供了：

1. 確切描述了其旨在要包含的內(nèi)容的標(biāo)簽

2. 增強(qiáng)的網(wǎng)絡(luò)通信

3. 極大改善了的常用存儲(chǔ)

4. 運(yùn)行后臺(tái)進(jìn)程的Web Worker

5. 在本地應(yīng)用和服務(wù)器之間建立持續(xù)連接的WebSocket接口

6. 更好的存儲(chǔ)數(shù)據(jù)檢索方式

7. 加快了的頁(yè)面保存和加載速度

8. 對(duì)使用CSS3來管理GUI的支持，這意味著HTML5可以是面向內(nèi)容的

9. 改進(jìn)了的瀏覽器表單處理

10. 基于SQL的數(shù)據(jù)庫(kù)API，其允許客戶端的本地存儲(chǔ)

11. 畫布和視頻，可在無需安裝第三方插件的情況下添加圖形和視頻

12. Geolocation API規(guī)范，其通過使用智能手機(jī)定位功能來納入移動(dòng)云服務(wù)和應(yīng)用

13. 增強(qiáng)型的表單，其降低了下載JavaScript代碼的這種必要性，允許在移動(dòng)設(shè)備和云服務(wù)之間進(jìn)行更多高效的通信。

HTML5創(chuàng)建了一種更吸引用戶的體驗(yàn)：使用HTML5設(shè)計(jì)的頁(yè)面能夠提供類似于桌面應(yīng)用的體驗(yàn)。HTML5還通過把API功能和無處不在的瀏覽器結(jié)合起來的的方式提供了增強(qiáng)的多平臺(tái)開發(fā)。通過使用HTML5，開發(fā)者能夠提供一種順暢地跨越各個(gè)平臺(tái)的現(xiàn)代應(yīng)用體驗(yàn)。

當(dāng)你說HTML5這個(gè)詞的時(shí)候，你使用了一個(gè)簡(jiǎn)短的詞來表達(dá)一種持續(xù)的創(chuàng)新。新的標(biāo)記、新的一套方法，以及一個(gè)基于HTML5和它的兩個(gè)與之互為補(bǔ)充的同仁：CSS3和JavaScript之間的相互作用的通用開發(fā)框架，這是以客戶為中心的處理現(xiàn)象的應(yīng)用的核心。除了HTML5技術(shù)的技巧和方法的許多桌面部署之外，HTML5還可以在功能豐富的web移動(dòng)電話瀏覽器中實(shí)施——移動(dòng)電話瀏覽器是一個(gè)正在增長(zhǎng)的市場(chǎng)，Apple iPhone、Google Android和運(yùn)行Palm webOS的手機(jī)的普及以至于無處不在就可以證明這一點(diǎn)。

HTML5的強(qiáng)大功能中很重要的一面是信息的映射——或說是內(nèi)容塊化（content blocking）。如果你愿意的話——這種做法會(huì)產(chǎn)生一種容易理解得多的處理過程。你可以看到，通過日益增加對(duì)web處理這一領(lǐng)域的控制，這一工具在設(shè)計(jì)和開發(fā)方面已經(jīng)變得多么的高效。
HTML5預(yù)示著這樣一些情況的出現(xiàn)，即其在文本層面上有著更高效的語義處理，以及在表單構(gòu)造和用法上有著更強(qiáng)大的控制。所有的這些特性和HTML5創(chuàng)新的其他許多細(xì)微之處是這一越來越占統(tǒng)治地位的范式的基礎(chǔ)。許多機(jī)構(gòu)實(shí)體，商業(yè)的和其他的——甚至許多根本不把信息的處理和通信作為他們的主要機(jī)構(gòu)活動(dòng)的組織——都不同程度地被這一不斷增長(zhǎng)的現(xiàn)象的發(fā)展所侵襲。

HTML5并不是一盞神燈，不會(huì)有精靈出現(xiàn)。然而，它的技術(shù)和方法資產(chǎn)使得其成為了一件次好的東西，僅次于擦亮一盞神燈這件事情。

規(guī)劃頁(yè)面

你將要?jiǎng)?chuàng)建一個(gè)簡(jiǎn)單的web頁(yè)面。在這一過程中，我會(huì)討論幾個(gè)HTML5中引入的新標(biāo)簽。為了創(chuàng)建一個(gè)高效的并且是有實(shí)效的web頁(yè)面，你必須要制定一個(gè)計(jì)劃，考慮一下想要打造的所有組件。你創(chuàng)建的網(wǎng)頁(yè)將會(huì)有如圖1所示的高層設(shè)計(jì)，頁(yè)面的設(shè)計(jì)包含了一個(gè)Header區(qū)、一個(gè)Navigation區(qū)、一個(gè)包含了三個(gè)Section區(qū)和一個(gè)Aside區(qū)的Article區(qū)，以及最后的一個(gè)Footer區(qū)。該頁(yè)面的設(shè)計(jì)目標(biāo)是在Google的Chrome瀏覽器中工作，其消除了一些視覺上的混亂，這些混亂帶來的是瀏覽器兼容問題的調(diào)整，同時(shí)也妨礙到了對(duì)基礎(chǔ)結(jié)構(gòu)的理解。我們的目標(biāo)是創(chuàng)建出一個(gè)清晰地描述了新的HTML5標(biāo)簽的用法的頁(yè)面，展示如何使用它們來創(chuàng)建格式良好的代碼和優(yōu)雅的頁(yè)面設(shè)計(jì)。

圖1. Acme United的網(wǎng)頁(yè)的規(guī)劃

在創(chuàng)建這一頁(yè)面的過程中，我會(huì)涉及CSS3，我需要用它來正確地渲染HTML5網(wǎng)頁(yè)。CSS3對(duì)于HTML5頁(yè)面的的風(fēng)格、導(dǎo)航和一般觀感來說是必不可少的，它的一些屬性組，你可以在WsSchool的CSS3參考站點(diǎn)（參見參考資料一節(jié)）上找到這些屬性，其中包括了一些很有用的元素，比如說background、font、marquee和animation等。

不過，在開始構(gòu)造頁(yè)面之前，你需要學(xué)習(xí)一些新的HTML5的標(biāo)簽。

Header區(qū)

Header區(qū)的例子包含了頁(yè)面標(biāo)題和副標(biāo)題，<header>標(biāo)簽被用來創(chuàng)建頁(yè)面的Header區(qū)的內(nèi)容。除了網(wǎng)頁(yè)本身之外，<header>標(biāo)簽還可以包含關(guān)于<section>和<article>的公開信息。這里創(chuàng)建的網(wǎng)頁(yè)有該頁(yè)面的一個(gè)Header區(qū)，這在高層設(shè)計(jì)中有給出，以及一個(gè)位于Article和Section區(qū)內(nèi)部的Header區(qū)。清單1提供了一個(gè)<header>標(biāo)簽標(biāo)記的例子。

清單1. <header>標(biāo)簽的例子

<header> 
<h1>標(biāo)題文字</h1> 
<p> 文本或是圖像可放在這里</p> 
<p> Logo通常也放在這個(gè)地方</p> 
</header>

<header>標(biāo)簽還可以包含一個(gè)<hgroup>標(biāo)簽，如清單2所示。<hgroup>標(biāo)簽把標(biāo)題分組放在一起，使用<h1>到<h6>這些標(biāo)題分級(jí)來在此處顯示主標(biāo)題和子標(biāo)題。

清單2. <hgroup>標(biāo)簽的例子

<header> 
<hgroup> 
<h1>主標(biāo)題</h1> 
<h2>子標(biāo)題 </h2> 
</hgroup> 
<p> 文本或是圖像可放在這里</p> 
</header>

Navigation區(qū)

你可以使用<nav>標(biāo)簽來創(chuàng)建頁(yè)面的Navigation區(qū)。<nav>元素定義了一個(gè)專門用于導(dǎo)航的區(qū)域，<nav>標(biāo)簽應(yīng)該用做主站點(diǎn)的導(dǎo)航，而不是用來放置被包含在頁(yè)面的其他區(qū)域中的鏈接。Navigation區(qū)可以包含諸如清單3所示的代碼。

清單3. <nav>標(biāo)簽的例子

<nav> 
<ul> 
<li>< a href="#" kesrc="#">Home</a></li> 
<li>< a href="#" kesrc="#">About Us<a></li> 
<li>< a href="#" kesrc="#">Our Products</a></li> 
<li>< a href="#" kesrc="#">Contact Us</a></li> 
</ul> 
</nav>

Article和Section區(qū)

你設(shè)計(jì)的頁(yè)面包含了一個(gè)Article區(qū)，該區(qū)域存放了頁(yè)面的實(shí)際內(nèi)容。你使用< article>標(biāo)簽來創(chuàng)建這一區(qū)域，該標(biāo)簽定義的內(nèi)容可獨(dú)立于頁(yè)面中的其他內(nèi)容使用。例如，如果想創(chuàng)建一個(gè)RSS源（RSS feed）的話，那么你可以使用< article>來唯一標(biāo)識(shí)該內(nèi)容。< article>標(biāo)簽標(biāo)識(shí)了可被刪除、可被放置在另一上下文中，并且是可被完全理解的內(nèi)容。

Acme United規(guī)劃中的Article區(qū)包含了三個(gè)Section區(qū)，可使用< setction>標(biāo)簽來創(chuàng)建這幾個(gè)區(qū)域。<section>包含了web內(nèi)容的相關(guān)組件區(qū)域，<section>標(biāo)簽——以及<article>標(biāo)簽——可以包含頁(yè)眉、頁(yè)腳，或是其他需要用來完成該部分內(nèi)容的組件。<section>標(biāo)簽用于分組的內(nèi)容，<section>標(biāo)簽和<article>標(biāo)簽通常以一個(gè)<header>為開始并以一個(gè)< footer>結(jié)束，標(biāo)簽的內(nèi)容則放在這兩者之間。

<section>標(biāo)簽也可以包含<article>標(biāo)簽，就像<article>標(biāo)簽可以包含<section>標(biāo)簽一樣。<section>標(biāo)簽應(yīng)該用來分組相類似的信息，而<article>標(biāo)簽則應(yīng)該是用來放置諸如一篇文章或是博客一類的信息，這些內(nèi)容可在不影響內(nèi)容含義的情況下被刪除或是被放置到新的上下文中。<article>標(biāo)簽，正如它的名稱所暗示的那樣，提供了一個(gè)完整的信息包。相比之下，<section>標(biāo)簽包含的是有關(guān)聯(lián)的信息，但這些信息自身不能被放置到不同的上下文中，因?yàn)檫@樣的話其所代表的含義就會(huì)丟失。

<article>和<section>標(biāo)簽的用法例子請(qǐng)參見清單4。

清單4. <article>標(biāo)簽和<section>標(biāo)簽的例子

< article> 
<section> 
Content  
</section> 
<section> 
Content  
</section> 
</article> 
<section> 
<article> 
Content  
</article> 
<article> 
Content  
</article> 
</section>

圖像元素

<section>和<article>標(biāo)簽這兩者，以及<header>和<footer>標(biāo)簽都可以包含<figure>標(biāo)簽，你使用該標(biāo)簽來加入圖像、圖表和照片。

<figure>標(biāo)簽可以包含<figcaption>，該標(biāo)簽相應(yīng)的包含了包含在<figure>標(biāo)簽中的圖形的標(biāo)題，其允許你輸入描述，把圖形和內(nèi)容更加緊密的關(guān)聯(lián)起來。清單5提供了一個(gè)<figure>和<figcaption>標(biāo)簽結(jié)構(gòu)的例子。

清單5. <figure>和<figcaption>標(biāo)簽的例子

<figure> 
<img src="/figure.jpg" kesrc="/figure.jpg" width="304" height="228" alt="Picture"> 
<figcaption>Caption for the figure</figcaption> 
</figure>

#p#

媒體元素

<section>和<article>標(biāo)簽還可以包含各種媒體元素，HTML5提供的標(biāo)簽立刻就傳達(dá)了其內(nèi)容的意思。媒體元素，比如說音樂和視頻，以前只能嵌入，但現(xiàn)在能夠被更精準(zhǔn)地標(biāo)識(shí)出來。

<audio>標(biāo)簽標(biāo)識(shí)了聲音內(nèi)容，比如說音樂或是任何的其他音頻流。<audio>標(biāo)簽有一些屬性用來控制音頻的內(nèi)容、何時(shí)以及如何播放等方面的情況，這些屬性分別是：src、preload、control、loop和autoplay。在清單6給出的例子中，只要頁(yè)面一加載音頻就開會(huì)播放，其會(huì)持續(xù)播放，所提供的控制可以讓用戶停止或是重新開始播放音頻。

清單6. <audio>標(biāo)簽的例子

<audio src="MyFirstMusic.ogg" kesrc="MyFirstMusic.ogg" controls autoplay loop> 
Your browser does not support the audio tag.  
</audio>

<video>標(biāo)簽允許你播放視頻片段或是流化視覺媒體。其擁有<audio>標(biāo)簽所有的屬性，另外再加上三個(gè)：poster、width和height。當(dāng)視頻正在加載或是視頻處于完全沒有加載的糟糕情況中時(shí)，poster屬性可讓你找出一張圖像來應(yīng)付著先。

清單7提供了一個(gè)<video>標(biāo)簽結(jié)構(gòu)的例子

清單7. 標(biāo)簽的例子

<video src="MyFirstMovie.ogg" kesrc="MyFirstMovie.ogg" controls="controls"> 
Your browser does not support the video tag  
</video>

<video>和<audio>標(biāo)簽可以包含<source>標(biāo)簽，該標(biāo)簽定義了<video>和<audio>標(biāo)簽的多媒體資源。使用這一元素，你可以指定替代的視頻或是音頻文件，然后瀏覽器就可以基于它的媒體類型或是所支持的編解碼器來從中進(jìn)行選擇。清單8中有兩種選擇，如果文件的WMA版本不能在所使用的瀏覽器中播放的話，就再嘗試MP3版本。否則的話就顯示信息，這樣用戶就知道為什么音頻不可用了。

清單8. <source>標(biāo)簽的例子

<audio> 
<source src="/music/good_enough.wma" kesrc="/music/good_enough.wma" type="audio/x-ms-wma"> 
<source src="/music/good_enough.mp3" kesrc="/music/good_enough.mp3" type="audio/mpeg"> 
<p>Your browser does not support the HTML 'audio' element.</p> 
</audio>

清單9. <embed>標(biāo)簽的例子

<embed src="MyFirstVideo.swf" kesrc="MyFirstVideo.swf" type="application/x-shockwave-flash" />

除了src和type屬性之外，<embed>標(biāo)簽還擁有height和width屬性。

Aside區(qū)

Acme United規(guī)劃中的Aside區(qū)可通過使用< aside>標(biāo)簽來創(chuàng)建。這一標(biāo)簽被看作是用來存放補(bǔ)充內(nèi)容的地方，這些內(nèi)容不是其所補(bǔ)充的一篇連續(xù)文章的組成部分。在雜志上，插入語（aside）通常被用來突出文章本身所制造的一個(gè)觀點(diǎn)。< aside>標(biāo)簽包含的內(nèi)容可被刪除，而這不會(huì)影響到包含了該內(nèi)容的文章、章節(jié)或是頁(yè)面所要傳達(dá)的信息。

清單10提供了<aside>標(biāo)簽用法的一個(gè)例子。

清單10. <aside>標(biāo)簽的例子

<p>My family and I visited Euro Disney last year.</p> 
<aside> 
<h4>Disney in France</h4> 
<p>Besides Euro Disney, there is a Disneyland in California.</p> 
</aside>

Footer區(qū)

<footer>元素包含了與頁(yè)面、文章或是部分內(nèi)容有關(guān)的信息，比如說文章的作者或是日期。作為頁(yè)面的頁(yè)腳，其有可能包含了版權(quán)或是其他重要的法律信息，如清單11所示。

清單11. <footer>標(biāo)簽的例子

<footer> 
<p>Copyright 2011 Acme United. All rights reserved.</p> 
</footer>

#p#

構(gòu)建頁(yè)面

現(xiàn)在你已經(jīng)了解了需要用來創(chuàng)建一個(gè)HTML5頁(yè)面的基本標(biāo)簽，讓我們開始構(gòu)建你的頁(yè)面。你會(huì)為Acme United構(gòu)建一個(gè)網(wǎng)頁(yè)，完成后的頁(yè)面如圖2所示，該頁(yè)面可以下載供你使用（參見下載一節(jié)）。

圖2. Acme United的網(wǎng)頁(yè)

那么，讓我們把頁(yè)面裝配起來吧。首先要處理的是這個(gè)<!doctype>，在HTML5中，<!doctype>被簡(jiǎn)化了：所有你需要記住就是html。這不僅是簡(jiǎn)化了這一標(biāo)簽的條目，而還把它變得更適應(yīng)未來的發(fā)展。需要注意的是，它不是被稱為html5，就只是html。不管來來去去的有多少個(gè)HTML版本，<!doctype>可以一直都是html。

<html>標(biāo)簽包含了所有除了<!doctype>標(biāo)簽之外的其他HTML元素，其他的每一個(gè)元素都必須嵌套在<html>和</html>標(biāo)簽之間，參見清單12。

清單12. < !doctype>標(biāo)簽的例子

<!doctype html> 
<html lang="en">

在指出了html和語言為英語之后，你就可以使用< head>元素，該元素可以包含腳本、瀏覽器支持信息、樣式表鏈接、meta信息和其他的初始化函數(shù)。你可以在head這一區(qū)域中使用這些標(biāo)簽：

1. <base>
2. <link>
3. <meta>
4. <script>
5. <style>
6. <title>

<title>標(biāo)簽存放文檔的實(shí)際標(biāo)題，這是一個(gè)必需的<head>區(qū)元素，它的內(nèi)容就是你在瀏覽該頁(yè)面時(shí)會(huì)在瀏覽器的頂端看到的標(biāo)題。清單13中的<link>標(biāo)簽標(biāo)識(shí)了會(huì)被用來渲染HTML5頁(yè)面的CSS3樣式表，樣式表的文件名為main-stylesheet.css。

清單13. <head>標(biāo)簽的例子

<head> 
<title>HTML5 Fundamentals Example</title> 
<link rel="stylesheet" href="main-stylesheet.css" kesrc="main-stylesheet.css" /> 
</head>

接下來你會(huì)用到<body>標(biāo)簽，后面跟著<header>和<hgroup>標(biāo)簽，這已經(jīng)在前面介紹過。本例中的<h1>區(qū)域包含了虛構(gòu)公司的名稱：Acme United，<h2>區(qū)域包含了讓你知曉副標(biāo)題是“A Simple HTML5 Example”的信息，清單14顯示了這一標(biāo)記。

清單14. <body>標(biāo)簽和<header>標(biāo)簽的例子

<body > 
<header> 
<hgroup> 
<h1>Acme United</h1> 
<h2>A Simple HTML5 Example</h2> 
</hgroup> 
</header>

到目前為止，被用來設(shè)置頁(yè)面的CSS3如清單15所示。首先，你建立頁(yè)面的字體，然后量身定做頁(yè)面的主體，明確主體的維度，然后設(shè)計(jì)header段結(jié)構(gòu)的第一級(jí)和第二級(jí)標(biāo)題標(biāo)簽，這些是你要給頁(yè)面使用的header。

清單15. CSS3例子1

* {  
font-family: Lucida Sans, Arial, Helvetica, sans-serif;  
}  
 
body {  
width: 800px;  
margin: 0em auto;  
}  
 
header h1 {  
font-size: 50px;  
margin: 0px;  
color: #006;  
}  
 
header h2 {  
font-size: 15px;  
margin: 0px;  
color: #99f;  
font-style: italic;  
}

清單16展示了<nav>標(biāo)簽，其目的是處理主站點(diǎn)的導(dǎo)航。

清單16. <nav>例子

<nav> 
<ul> 
<li>< a href="#" kesrc="#">Home</a></li> 
<li>< a href="#" kesrc="#">About Us</a></li> 
<li>< a href="#" kesrc="#">Contact Us</a></li> 
</ul> 
</nav>

HTML5還有一個(gè)<menu>標(biāo)簽——一個(gè)給一些設(shè)計(jì)者和開發(fā)者帶來混亂的標(biāo)簽。這一混亂源于導(dǎo)航條通常被稱為“導(dǎo)航菜單”。<menu>標(biāo)簽在HTML的4.01版本中被棄用，但在HTML5中又死里復(fù)生，目的是用來增強(qiáng)交互性。它不應(yīng)該用來做主導(dǎo)航。唯一應(yīng)該用來做主導(dǎo)航的標(biāo)簽是<nav>標(biāo)簽，你遲一些就會(huì)在本例中用到<menu>標(biāo)簽。

導(dǎo)航的格式化問題由CSS3來處理。清單17中給出的每個(gè)<nav>標(biāo)簽的定義都代表了<nav>標(biāo)簽內(nèi)的<ul>和<li>元素的一個(gè)特定狀態(tài)。

清單17. CSS3例子2

nav ul {  
list-style: none;  
padding: 0px;  
display: block;  
clear: right;  
background-color: #99f;  
padding-left: 4px;  
height: 24px;  
}  
nav ul li {  
display: inline;  
padding: 0px 20px 5px 10px;  
height: 24px;  
border-right: 1px solid #ccc;  
}  
 
nav ul li a {  
color: #006;  
text-decoration: none;  
font-size: 13px;  
font-weight: bold;  
}  
 
nav ul li a:hover {  
color: #fff;  
}

接下來是Article區(qū)，這一區(qū)域由<article>標(biāo)簽來定義，其中包括了其自己的<header>信息。包含在<article>中的<section>也包含了一個(gè)自己的的<header>標(biāo)簽，參見清單18。

清單18. <article>和<section>的例子

<article> 
<header> 
<h1> 
< a href="#" kesrc="#" title="Link to this post" rel="bookmark">Article Heading</a> 
</h1> 
</header> 
<p> Primum non nocere ad vitam Paramus . . . </p> 
<section> 
<header> 
<h1>This is the first section heading</h1> 
</header> 
<p>Scientia potentia est qua nocent docentp . . .</p> 
</section>

清單19展示了渲染這一格式的CSS3標(biāo)記，可以注意到，段落、header和section區(qū)的定義都定義在包含了它們的<article>標(biāo)簽上。這里定義的<h1>標(biāo)簽和頁(yè)面級(jí)別定義的<h1>標(biāo)簽有著不同的格式。

清單19. CSS3例子3

article > header h1 {  
font-size: 40px;  
float: left;  
margin-left: 14px;  
}  
 
article > header h1 a {  
color: #000090;  
text-decoration: none;  
}  
 
article > section header h1 {  
font-size: 20px;  
margin-left: 25px;  
}  
 
article p {  
clear: both;  
margin-top: 0px;  
margin-left: 50px;  
}

<article>中包含的第二個(gè)<section>標(biāo)簽包含了與第一個(gè)<section>相同的基本信息，但這一次你要用到一個(gè)<aside>、一個(gè)<figure>、一個(gè)<menu>和一個(gè)<mark>標(biāo)簽，參見清單20。

這里使用<aside>標(biāo)簽來表示的信息并非是圍繞著它的那些連續(xù)內(nèi)容的組成部分。<figure>標(biāo)簽包含了一個(gè)Stonehenge的圖片。< section>標(biāo)簽還包含了一個(gè)<menu>標(biāo)簽，該標(biāo)簽被用來創(chuàng)建使用了四個(gè)繆斯女神的名字來命名的按鈕。當(dāng)某個(gè)按鈕被點(diǎn)擊時(shí)，其提供相應(yīng)繆斯女神的的信息。< mark>標(biāo)簽被用在<p>標(biāo)簽中，以此來突出顯示veni、vidi和vici等詞。

清單20. <article>和<section>的例子

<section> 
<header> 
<h1>Second section with mark, aside, menu & figure</h1> 
</header> 
<p class="next-to-aside"> . . . <mark>veni, vidi, vici</mark>. Mater . . .</p> 
<aside> 
<p>This is an aside that has multiple lines. . . .</p> 
</aside> 
<menu label="File"> 
< button type="button" onClick="JavaScript:alert('Clio . . .')">Clio</button> 
<button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia</button> 
<button type="button" onClick="JavaScript:alert  
('Urania . . .')">Urania</button> 
<button type="button" onClick="JavaScript:alert  
('Calliope . . .')">Calliope</button> 
</menu>   
<figure><img src="stonehenge.jpg" kesrc="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/> 
<figcaption>Figure 1. Stonehenge</figcaption> 
</figure> 
</section>

這一部分的CSS3包括了一個(gè)新的< p>標(biāo)簽的定義，該標(biāo)簽有著比為頁(yè)面所設(shè)的寬度更小的寬度。這種改動(dòng)允許aside浮在右邊而又不會(huì)遮蓋到文字。清單21顯示了這一標(biāo)記。

清單21. CSS3例子4

article p.next-to-aside {  
width: 500px;  
}  
 
article > section figure {  
margin-left: 180px;  
margin-bottom: 30px;  
}  
 
article > section > menu {   
margin-left: 120px;  
}   
 
aside p {   
position:relative;  
left:0px;  
top: -100px;  
z-index: 1;  
width: 200px;   
float: right;  
font-style: italic;   
color: #99f;  
}

視頻部分的元素

這是<article>的最后一個(gè)組件：視頻部分。例子視頻是ogg格式的，在頁(yè)面被載入后就自動(dòng)播放，不斷循環(huán)，并提供暫停和播放控制。在當(dāng)前的許多實(shí)際情況中，ogg視頻使用的是ogv（v表示視頻）擴(kuò)展名，如清單22所示。<audio>標(biāo)簽以同樣的方式工作。

清單22. <article>和<section>的例子

<section> 
<header> 
<h1>This is a video section</h1> 
</header> 
<p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" kesrc="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv"   
controls autoplay loop> 
<div class="no-html5-video"><p>This video will work in   
Mozilla Firefox or Google Chrome only. </p> 
</div> 
</video></p> 
</section> 
</article>

清單23提供了video部分的CSS3定義。

清單23. CSS3例子5

article > section video {  
height: 200px;  
margin-left: 180px;  
}  
 
article > section div.no-html5-video{  
height: 20px;  
text-align: center;  
color: #000090;  
font-size: 13px;  
font-style: italic;  
font-weight: bold ;  
background-color: #99f;  
}

頁(yè)面的頁(yè)腳和結(jié)束部分如清單24所示。

清單24. <footer>標(biāo)簽的例子

<footer> 
<p>Copyright: 2011 Acme United. All rights reserved.</p> 
</footer> 
</body> 
</html>

頁(yè)腳的CSS3如清單25所示。

清單25. CSS3例子5

footer p {  
text-align: center;  
font-size: 12px;  
color: #888;  
margin-top: 24px;  
}

結(jié)論

網(wǎng)頁(yè)的構(gòu)建完成結(jié)束了這一多部分組成的系列的第一部分。本篇文章的目的是介紹新的HTML5機(jī)制。HTML5不僅是HTML4的一個(gè)升級(jí)：它還是一種新的數(shù)字化通信方式。借助于CSS3和JavaScript的功能，HTML5接近于在一個(gè)偽包中為開發(fā)者提供了全部的一切。如果你愿意從已有的大量的HTML5信息中吸取你所需的內(nèi)容來，并把它們用到我們的常見做法中的話，那么你將會(huì)加入到這一個(gè)由稱職的的HTML5多媒體web設(shè)計(jì)者和開發(fā)者組成的正在不斷壯大的軍團(tuán)中。這一系列的下一篇文章將著眼于如何編寫和格式化HTML5的表單。

下載

原文：http://select.yeeyan.org/view/213582/204942

【編輯推薦】