站長資訊網(wǎng)section
section 元素是對頁面文檔結(jié)構(gòu)進(jìn)行劃分的最基本也是最主要的結(jié)構(gòu)元素，主要用來對網(wǎng)站或應(yīng)用程序中的頁面上的內(nèi)容進(jìn)行層次結(jié)構(gòu)上的劃分。一個section元素通常由內(nèi)容及其標(biāo)題組成。
如果元素的內(nèi)容集中到一起顯示可以表達(dá)相應(yīng)的意思的話，可以定義成article元素，而沒必要使用section元素。
section元素不是一般的容器元素，所以如果一個元素需要定義相應(yīng)的style或script腳本的話，推薦使用p元素，section的使用是確保這個元素的內(nèi)容能夠明確地展示在文檔的大鋼里。
如：
<!DOCTYPE Html><html><head> <title>Graduation Ceremony Summer 2022</title></head><body> <h1>Graduation</h1> <section> <h1>Ceremony</h1> <p>Opening Procession</p> <p>Speech by Validactorian</p> <p>Speech by Class President</p> <p>Presentation of Diplomas</p> <p>Closing Speech by Headmaster</p> </section> <section> <h1>Graduates</h1> <ul> <li>Molly Carpenter</li> <li>Anastasia Luccio</li> <li>Ebenezar McCoy</li> <li>Karrin Murphy</li> <li>Thomas Raith</li> <li>Susan Rodriguez</li> </ul> </section></body></html>
article
article 元素代表文檔、頁面或應(yīng)用程序中的所有“正文”部分，它所描述的內(nèi)容應(yīng)該是獨立的、完整的、可以獨自被外部引用的，可以是一篇博客、一篇報刊中的文章、一篇論壇帖子、一段用戶評論、一個獨立的插件，或任何獨立于上下文中其他部分的內(nèi)容。
article是一個特殊的section標(biāo)簽，它比section具有更明確的語義，它代表一個獨立的、完整的相關(guān)內(nèi)容塊。一般來說，article會有標(biāo)題部分。
當(dāng)article內(nèi)嵌article時，原則上來說，內(nèi)部的article的內(nèi)容是和外層的article內(nèi)容相關(guān)的。例如，一篇博客中，包含用戶提交的評論的article應(yīng)該嵌套在包含博客文章article中。
<article> <h1>Safari 5 released</h1> <p>7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC.</p> <p>Apple announced the release of Safari 5 for Windows and Mac......</p></article>
nav
nav 元素是一個可以作為頁面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁面或當(dāng)前頁面的其他部分。一個頁面可以擁有多個nav元素，作為頁面整體不同部分的導(dǎo)航。在nav元素中，一般以ul列表的形式來具體放置該組鏈接元素。
下面是w3c給出的一個示例代碼：
<body> <h1>The Wiki Center Of Exampland</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/events">Current Events</a></li> ...more... </ul> </nav> <article> <header> <h1> Demos in Exampland</h1> <p>Written by A. N. Other.</p> </header> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> ...more... </ul> </nav> <p> <section id="public"> <h1>Public demonstrations</h1> <p> ...more...</p> </section> <section id="destroy"> <h1>Demolitions</h1> <p>...more...</p> </section> ...more... </p> <footer> <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p> </footer> </article> <footer> <p><small>? copyright 1998 Exampland Emperor</small></p> </footer></body>
aside
aside元素用來表示當(dāng)前頁面或文章的附屬信息部分，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條、以及其他有別于主要內(nèi)容的部分。
根據(jù)目前的規(guī)范，aside元素有兩種使用方法：
-
被包含在article中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是當(dāng)前文章有關(guān)的引用，詞匯列表等。
-
在article外使用，作為頁面或站點全局的附屬信息部分；最典型的形式是側(cè)邊欄，其中的內(nèi)容可以是友情鏈接、附屬導(dǎo)航或廣告單元等。
下面的代碼示例綜合了以上兩種方法：
<body> <header> <h1>My Blog</h1> </header> <article> <h1>My Blog Post</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <aside> <h1>Glossary</h1> <dl> <dt>Lorem</dt> <dd>ipsum dolor sit amet</dd> </dl> </aside> </article> <aside> <h2>Blogroll</h2> <ul> <li><a href="#">My Friend</a></li> <li><a href="#">My Other Friend</a></li> <li><a href="#">My Best Friend</a></li> </ul> </aside></body>
hgroup
hgroup 元素是將標(biāo)題及其子標(biāo)題進(jìn)行分組的元素。hgroup元素通常對h1~h6元素進(jìn)行分組，如將一個內(nèi)容區(qū)塊的標(biāo)題及其子標(biāo)題劃為一組：
<hgroup> <h1>Welcome to my WWF</h1> <h2>For a living planet</h2></hgroup><p>The rest of the content...</p>
header
header 元素是一種具有引導(dǎo)作用和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來放置整個頁面或頁面內(nèi)的一個article元素或section元素的標(biāo)題，也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片。
我們可以使用該標(biāo)簽來顯示整個網(wǎng)頁的標(biāo)題部分：
<header> <h1>The most important heading on this page</h1></header>
同一個頁面內(nèi)，每一個內(nèi)容區(qū)塊都可以有自己的header元素，例如：
<header> <h1>The most important heading on this page</h1></header><article> <header> <h1>Title of this article</h1> </header> <p>...Lorem Ipsum dolor set amet...</p></article>
footer
footer 元素可以作為其上層父級內(nèi)容區(qū)塊或一個根區(qū)塊的腳注。footer 元素通常包括其相關(guān)區(qū)塊的腳注信息，如作者、相關(guān)閱讀鏈接以及版權(quán)信息等。
過去(及目前)，我們通常使用類似下面這樣的代碼來寫頁面的頁腳：
<p id="footer"> <ul> <li>copyright</li> <li>sitemap</li> <li>contact</li> <li>to top</li> </ul><p>
在HTML5中，我們可以不使用p，而用更加語義化的footer來寫：
<footer> <ul> <li>copyright</li> <li>sitemap</li> <li>contact</li> <li>to top</li> </ul></footer>
在同一個頁面中可以使用多個footer元素，即可以用作頁面整體頁腳，也可以作為一個內(nèi)容區(qū)塊的結(jié)尾，例如，我們可以將footer直接寫在section或是article中：
<section> Section content appears here. <footer> Footer information for section. </footer></section><article> Article content appears here. <footer> Footer information for article. </footer></article>
address
address元素用來在文檔中呈現(xiàn)聯(lián)系信息，包括文檔創(chuàng)建者的名字、站點鏈接、電子郵箱、真實地址、電話號碼等；address不只是用來呈現(xiàn)電子郵箱或真實地址這樣的“地址”概念，而應(yīng)該包括與文檔創(chuàng)建人相關(guān)的各類聯(lián)系方式信息。
根據(jù)以上定義，我們可以使用下面的代碼來展示一些志愿者的名字及主頁鏈接：
The HTML5 Doctor is run by the following group of volunteers:<address> <a href="http://html5doctor.com/author/jacko">Jack Osborne</a>, <a href="http://html5doctor.com/author/richc">Rich Clark</a>, <a href="http://html5doctor.com/author/miker">Mike Robinson</a>, </address>
下面是另一個范例：
<footer> <p class="vcard"> by <address class="author"> <em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em> </address> on <time datetime="2009-11-04" class="published updated">November 4th, 2009</time> </p></footer>
video
通過<video>標(biāo)簽，我們可以拋棄最近不怎么討好的Flash，直接在頁面中播放視頻文件。視頻文件自然是最符合語義化的文件格式，但該元素標(biāo)簽同樣支持音頻與圖片。
過去(及目前)，我們通常要使用類似下面這樣繁冗丑陋的代碼來將視頻放置在頁面中，但這種方式要求瀏覽器安裝有Flash插件，并支持JavaScript：
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed></object>
HTML5的方式：
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer> <p> Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead. </p></video>
<video>標(biāo)簽有如下幾個常用屬性：
-
Autoplay: 用來設(shè)定視頻是否在頁面加載后自動播放。
-
Src: 為視頻指定文件鏈接或下載路徑，當(dāng)瀏覽器不支持<video>標(biāo)簽或發(fā)生某種播放錯誤時，可以提供給用戶進(jìn)行下載。
-
Autobuffer: 用來設(shè)定視頻是否自動緩沖；如果設(shè)定，那么頁面加載之后，視頻會自動下載緩沖，當(dāng)用戶點擊播放按鈕后，至少已經(jīng)有一部分視頻可以直接觀看而無需等待了。
-
Poster: 用來為視頻設(shè)置一個“相框默認(rèn)圖片”性質(zhì)的背景圖片；當(dāng)視頻無法正常加載播放時可以向用戶呈現(xiàn)。
-
Controls: 用來設(shè)置是否為視頻添加控制條，例如“播放”、“暫停”等；控制條的外觀可以自定義。
-
Loop: 用來設(shè)置視頻是否循環(huán)播放。
-
Width , Height: 用來控制視頻的寬度與高度。
audio
HTML5中的新元素標(biāo)簽<audio>是被大家等待已久的，它有原生支持音頻播放的功能，而不需要瀏覽器安裝額外的擴(kuò)展
<audio>元素標(biāo)簽的一些常用屬性：
-
src：音頻文件路徑。
-
autobuffer：設(shè)置是否在頁面加載時自動緩沖音頻。
-
autoplay：設(shè)置音頻是否自動播放。
-
loop：設(shè)置音頻是否要循環(huán)播放。
-
controls：設(shè)置是否顯示播放控制面板。
可以看到這些屬性和<video>元素標(biāo)簽的屬性很類似。下面我們來看一個代碼范例：
<audio src="elvis.ogg" controls autobuffer></audio>
根據(jù)定義規(guī)范，以下幾種API方法是可以使用的：
-
play()：播放音頻
-
pause()：暫停播放
-
canPlayType()：命令瀏覽器判斷當(dāng)前音頻文件是否可以被播放
-
buffered()：設(shè)定文件需要緩沖部分的開始與結(jié)束時間點。
另外，我們可以使用<source>元素標(biāo)簽來配合<audio>；<source>用來指定多個音頻文件，如果當(dāng)前瀏覽器不支持第一個文件，那么<audio>會自動嘗試播放下面一個<source>中指定的文件；我們還可以在它們后面加上目前常規(guī)的<embed>代碼來加載Flash播放器，作為后備方案；范例如下：
<audio controls autobuffer> <source src="elvis.ogg" /> <source src="elvis.mp3" /> <!-- now include flash fall back --></audio>
datalist
datalist 與 input 的新屬性list一起使用可以創(chuàng)建組合框，雙擊input的時候可以提供選項讓用戶選擇，類似歷史記錄一樣。
<input list="browsers"><datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"></datalist>
