站長(zhǎng)資訊網(wǎng)section
section 元素是對(duì)頁面文檔結(jié)構(gòu)進(jìn)行劃分的最基本也是最主要的結(jié)構(gòu)元素，主要用來對(duì)網(wǎng)站或應(yīng)用程序中的頁面上的內(nèi)容進(jìn)行層次結(jié)構(gòu)上的劃分。一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。
如果元素的內(nèi)容集中到一起顯示可以表達(dá)相應(yīng)的意思的話，可以定義成article元素，而沒必要使用section元素。
section元素不是一般的容器元素，所以如果一個(gè)元素需要定義相應(yīng)的style或script腳本的話，推薦使用p元素，section的使用是確保這個(gè)元素的內(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)該是獨(dú)立的、完整的、可以獨(dú)自被外部引用的，可以是一篇博客、一篇報(bào)刊中的文章、一篇論壇帖子、一段用戶評(píng)論、一個(gè)獨(dú)立的插件，或任何獨(dú)立于上下文中其他部分的內(nèi)容。
article是一個(gè)特殊的section標(biāo)簽，它比section具有更明確的語義，它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊。一般來說，article會(huì)有標(biāo)題部分。
當(dāng)article內(nèi)嵌article時(shí)，原則上來說，內(nèi)部的article的內(nèi)容是和外層的article內(nèi)容相關(guān)的。例如，一篇博客中，包含用戶提交的評(píng)論的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 元素是一個(gè)可以作為頁面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁面或當(dāng)前頁面的其他部分。一個(gè)頁面可以擁有多個(gè)nav元素，作為頁面整體不同部分的導(dǎo)航。在nav元素中，一般以u(píng)l列表的形式來具體放置該組鏈接元素。
下面是w3c給出的一個(gè)示例代碼：
<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外使用，作為頁面或站點(diǎn)全局的附屬信息部分；最典型的形式是側(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元素通常對(duì)h1~h6元素進(jìn)行分組，如將一個(gè)內(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)元素，通常用來放置整個(gè)頁面或頁面內(nèi)的一個(gè)article元素或section元素的標(biāo)題，也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片。
我們可以使用該標(biāo)簽來顯示整個(gè)網(wǎng)頁的標(biāo)題部分：
<header> <h1>The most important heading on this page</h1></header>
同一個(gè)頁面內(nèi)，每一個(gè)內(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 元素可以作為其上層父級(jí)內(nèi)容區(qū)塊或一個(gè)根區(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>
在同一個(gè)頁面中可以使用多個(gè)footer元素，即可以用作頁面整體頁腳，也可以作為一個(gè)內(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)建者的名字、站點(diǎn)鏈接、電子郵箱、真實(shí)地址、電話號(hào)碼等；address不只是用來呈現(xiàn)電子郵箱或真實(shí)地址這樣的“地址”概念，而應(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>
下面是另一個(gè)范例：
<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)簽有如下幾個(gè)常用屬性：
-
Autoplay: 用來設(shè)定視頻是否在頁面加載后自動(dòng)播放。
-
Src: 為視頻指定文件鏈接或下載路徑，當(dāng)瀏覽器不支持<video>標(biāo)簽或發(fā)生某種播放錯(cuò)誤時(shí)，可以提供給用戶進(jìn)行下載。
-
Autobuffer: 用來設(shè)定視頻是否自動(dòng)緩沖；如果設(shè)定，那么頁面加載之后，視頻會(huì)自動(dòng)下載緩沖，當(dāng)用戶點(diǎn)擊播放按鈕后，至少已經(jīng)有一部分視頻可以直接觀看而無需等待了。
-
Poster: 用來為視頻設(shè)置一個(gè)“相框默認(rèn)圖片”性質(zhì)的背景圖片；當(dāng)視頻無法正常加載播放時(shí)可以向用戶呈現(xiàn)。
-
Controls: 用來設(shè)置是否為視頻添加控制條，例如“播放”、“暫停”等；控制條的外觀可以自定義。
-
Loop: 用來設(shè)置視頻是否循環(huán)播放。
-
Width , Height: 用來控制視頻的寬度與高度。
audio
HTML5中的新元素標(biāo)簽<audio>是被大家等待已久的，它有原生支持音頻播放的功能，而不需要瀏覽器安裝額外的擴(kuò)展
<audio>元素標(biāo)簽的一些常用屬性：
-
src：音頻文件路徑。
-
autobuffer：設(shè)置是否在頁面加載時(shí)自動(dòng)緩沖音頻。
-
autoplay：設(shè)置音頻是否自動(dòng)播放。
-
loop：設(shè)置音頻是否要循環(huán)播放。
-
controls：設(shè)置是否顯示播放控制面板。
可以看到這些屬性和<video>元素標(biāo)簽的屬性很類似。下面我們來看一個(gè)代碼范例：
<audio src="elvis.ogg" controls autobuffer></audio>
根據(jù)定義規(guī)范，以下幾種API方法是可以使用的：
-
play()：播放音頻
-
pause()：暫停播放
-
canPlayType()：命令瀏覽器判斷當(dāng)前音頻文件是否可以被播放
-
buffered()：設(shè)定文件需要緩沖部分的開始與結(jié)束時(shí)間點(diǎn)。
另外，我們可以使用<source>元素標(biāo)簽來配合<audio>；<source>用來指定多個(gè)音頻文件，如果當(dāng)前瀏覽器不支持第一個(gè)文件，那么<audio>會(huì)自動(dòng)嘗試播放下面一個(gè)<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的時(shí)候可以提供選項(xiàng)讓用戶選擇，類似歷史記錄一樣。
<input list="browsers"><datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"></datalist>
