HTML5
- html5文檔聲明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
Html5中的標(biāo)簽
<section>
<section>元素用來(lái)定義文檔或應(yīng)用程序中的區(qū)域(或節(jié))。例如,可以用它組織你的個(gè) 人信息,一個(gè)<section>用于聯(lián)系信息,另一個(gè)用于新聞動(dòng)態(tài)如庭。需要重點(diǎn)理解的是用它的目的不是為了美化樣式旭寿。如果你只想將某個(gè)元素包裹起來(lái)以便設(shè)置樣式,那應(yīng)該和以 前一樣繼續(xù)使用<div>问畅。<nav>
<nav>元素用來(lái)定義文檔的主導(dǎo)航區(qū)域,其中的鏈接指向其他頁(yè)面或當(dāng)前頁(yè)面的某些區(qū) 域映砖。因?yàn)?lt;nav>用于主導(dǎo)航區(qū)域,所以嚴(yán)格來(lái)講它不是為頁(yè)腳或其他經(jīng)常會(huì)包含一組鏈 接的區(qū)塊而設(shè)計(jì)的(雖然將它用在這些區(qū)塊里包含鏈接也沒(méi)問(wèn)題)。<article>
<article>元素用來(lái)包裹獨(dú)立的內(nèi)容片段齿风。當(dāng)搭建一個(gè)頁(yè)面時(shí),想想你準(zhǔn)備放入<article>標(biāo)簽的內(nèi)容能否作為一個(gè)整塊而被復(fù)制粘貼到另外一個(gè)完全不同的網(wǎng)站且能保持完整的意義?另一種辦法是,想想包裹在<article>中的內(nèi)容能否在 RSS 訂閱源中獨(dú)立成為一篇文章?應(yīng)該使用<article>標(biāo)簽包裹的內(nèi)容,最明顯的例子 就是博客正文禾蚕。注意,如果出現(xiàn)嵌套的<article>元素,那內(nèi)層的<article>元素內(nèi)容 應(yīng)該和外層文章內(nèi)容直接有關(guān)您朽。<aside>
<aside>元素用來(lái)表示與頁(yè)面主內(nèi)容松散相關(guān)的內(nèi)容。在實(shí)踐中,我經(jīng)常將其用作側(cè)邊 欄(當(dāng)它包含合適的內(nèi)容時(shí))换淆。另外,引文哗总、廣告以及導(dǎo)航元素(如友情鏈接等)也可以 使用它。<hgroup>
如果頁(yè)面中有一組使用h1产舞、h2魂奥、h3等標(biāo)簽的標(biāo)題、標(biāo)語(yǔ)和副標(biāo)題,則可以考慮 使用<hgroup>將它們包裹起來(lái)易猫。這樣在 HTML5 的大綱結(jié)構(gòu)算法中就會(huì)隱藏次級(jí)標(biāo)題元 素,從而只讓<hgroup>中的第一個(gè)標(biāo)題元素進(jìn)入文檔大綱耻煤。html5中容許在每個(gè)<section>中擁有自己獨(dú)立的大綱結(jié)構(gòu)，也就是說(shuō)，每個(gè)section中都可以使用h1標(biāo)簽哈蝇。
<header>
<header>元素不計(jì)入大綱結(jié)構(gòu),所以不能用它來(lái)劃分內(nèi)容結(jié)構(gòu),而是應(yīng)該用它來(lái)包含對(duì)區(qū)域內(nèi)容的介紹說(shuō)明棺妓。實(shí)際使用中,<header>可用作網(wǎng)站頭部的“刊頭”區(qū)域,也 可用作對(duì)其他內(nèi)容如<article>元素的簡(jiǎn)要介紹。<footer>
footer元素不計(jì)入大綱結(jié)構(gòu)炮赦，不能用于劃分內(nèi)容結(jié)構(gòu)怜跑。
應(yīng)該用他來(lái)包括包含其所在區(qū)域的輔助信息。
例如可以用它包含一組指向其他頁(yè)面的超鏈接, 或者用它包含版權(quán)信息吠勘。和<header>一樣,它也可以視情況在同一個(gè)頁(yè)面上多次出現(xiàn)性芬。 例如博客網(wǎng)站的頁(yè)腳可以用它,同時(shí)博客正文<article>元素內(nèi)的文腳也可以用它。不 過(guò)規(guī)范指出,博文作者的聯(lián)系信息應(yīng)該使用<address>元素來(lái)包裹剧防。
<address>
<address>元素用于明確地標(biāo)注離其最近的<article>或<body>祖先元素的聯(lián)系信息植锉。 為避免產(chǎn)生混淆,請(qǐng)記住<address>中一般不放具體的郵政地址,除非相應(yīng)內(nèi)容確實(shí)需 要聯(lián)系地址。而郵政地址和其他可能會(huì)改變的聯(lián)系信息應(yīng)該使用‘p’標(biāo)簽來(lái)包裹峭拘。每個(gè)<article><section>元素中都可以有自己的<header><nav><footer>三種標(biāo)簽俊庇。
'b'標(biāo)簽
做為樣式鉤子。
因?yàn)楝F(xiàn)在 HTML5 標(biāo)準(zhǔn)對(duì)'b'標(biāo)簽的定義是:
一小段文本,純粹為了吸引人的注意,除此之外不傳達(dá)任何重要性,也不 暗示其他語(yǔ)態(tài)或語(yǔ)氣,如文檔摘要中的關(guān)鍵詞鸡挠、評(píng)論中的產(chǎn)品名稱辉饱、交互式文 本軟件中的可操作單詞,或者文章的導(dǎo)語(yǔ)。
- 'em'
強(qiáng)調(diào)文中的重點(diǎn)拣展。
除非你確實(shí)想強(qiáng)調(diào)標(biāo)簽中的內(nèi)容,否則的話可以考慮使用'b'標(biāo)簽或者可以的話使 用'i'標(biāo)簽彭沼。
'i'標(biāo)簽
一小段有不同語(yǔ)態(tài)或語(yǔ)氣的文字,或者是樣子上與普通文章有所差異以便標(biāo)明不同特點(diǎn)的文字。
簡(jiǎn)單地說(shuō),它不僅僅是用來(lái)給某些文字加斜體效果的瞎惫。嵌入媒體
<video src="myVideo.ogg"></video>
音頻使用<audio></audio>標(biāo)簽
視頻使用<video></video>標(biāo)簽
<video src="video/myVideo.mp4" width="640" height="480" controls autoplay>What, do you mean you don't understand HTML5?</video>
設(shè)置播放器寬度640高度480溜腐，顯示播放控制欄并自動(dòng)播放译株。
controls 顯示播放控制欄目瓜喇。
autoplay自動(dòng)播放。
- 針對(duì)不同瀏覽器支持不同視頻格式的解決方案歉糜。
<video width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mp4" type="video/mp4">
What, do you mean you don't understand HTML5?
</video>
如果瀏覽器支持 Ogg 格式,則使用第一個(gè)文件;否則它會(huì)繼續(xù)往下解析下一個(gè)<source>標(biāo)簽乘寒。
