HTML 5新增標簽

HTML 5 中新增的標簽有:

article ---文章

作用:定義獨立的內(nèi)容漱病,內(nèi)容一般來說是一篇帖子买雾、文章、博客杨帽、短文凝果。。睦尽。
** 使用場景:**論壇帖子器净、博客文章、新聞故事当凡、貼吧回復山害。。沿量。

article 標簽 定義的內(nèi)容必須是有意義的浪慌,而且該內(nèi)容需要獨立于文檔的其他部分

內(nèi)部可以包含 header(標題)、footer朴则、(頁腳)section权纤、article(內(nèi)嵌 論壇的回復)

section----文檔中的節(jié)、區(qū)段

用于對界面進行分區(qū),元素通常也可以有標題和內(nèi)容來組成

使用場景 : 劃分章節(jié)汹想、區(qū)分頭部(頁眉)外邓、區(qū)分尾部(頁腳)

內(nèi)部推薦包含一個標題,當然里面也可以包含article 或者 嵌套 section

注意:article和section 非常容易搞混古掏,他們兩個都可以包含很多的子元素损话,而且發(fā)現(xiàn)他們之間可以相互嵌套,但是槽唾,他們兩個元素側(cè)重點不同 ----
article側(cè)重表達一篇獨立的丧枪、完整的文章
section側(cè)重對界面內(nèi)容的分塊

header---為 article 元素定義文檔的“頭部信息”

該元素內(nèi)部可以包含 h1~h6 ,
hgroup庞萍,或者還可以包含p,span

hgroup : 用于對網(wǎng)頁或區(qū)段(section)的標題(如 h1~h6)進行組合,如果同時又多個標題拧烦,推薦使用hgroup 標簽來承裝

使用場景 : 文章的介紹 導航連接器的容器

設(shè)置主副標題
<header>
<h1 ><a name="toc-5"></a>潛行者m</h1> <p>關(guān)注前端開發(fā)熱愛簡約設(shè)計。</p></header>

nav----定義頁面上的導航條

一般包括 “主導航條” 钝计、 側(cè)邊欄“邊欄道行” 恋博、 底部“底部導航”

推薦將這些導航鏈接分別放在對應的 nav 標簽中去管理

aside ---當前頁或當前文章的附屬信息

使用場景:文章的側(cè)邊欄

推薦將aside 標簽去通過 CSS 渲染成側(cè)邊欄

footer ----為 article 元素定義文檔的“頁腳”信息

一般包含文章的版權(quán)信息,作者的授權(quán)提醒等

使用場景:文檔的創(chuàng)建者姓名葵蒂、文檔的版權(quán)信息交播、
使用條款的鏈接、聯(lián)系信息

figure----表示一塊獨立“圖片區(qū)域”

內(nèi)部可以包含一個 或者 多個 image

還可以包含一個 figcaption 標簽 用于定義該圖片區(qū)域的標題

figcaption 定義“圖片區(qū)域”的標題

audio ----多媒體標簽

<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音頻</title>
</head>
<body>

<audio src="1.mp3" controls="controls" autoplay="autoplay" muted="muted"></audio>
<audio controls="controls">

<source src="bgm.mp3" type="audio/mp3">
<source src="bgm.ogg" type="audio/ogg">
<source src="bgm.amr" type="audio/amr">
</audio>
</body>
</html>
</pre>

視頻

<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>視頻</title>
</head>
<body>

<video src="test.mp4" autoplay="autoplay" control="controls" width=""></video>
</body>
</html>
</pre>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末践付,一起剝皮案震驚了整個濱河市秦士,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌永高,老刑警劉巖隧土,帶你破解...
    沈念sama閱讀 211,561評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異命爬,居然都是意外死亡曹傀,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評論 3 385
  • 文/潘曉璐 我一進店門饲宛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來皆愉,“玉大人,你說我怎么就攤上這事艇抠∧宦” “怎么了?”我有些...
    開封第一講書人閱讀 157,162評論 0 348
  • 文/不壞的土叔 我叫張陵家淤,是天一觀的道長异剥。 經(jīng)常有香客問我,道長絮重,這世上最難降的妖魔是什么冤寿? 我笑而不...
    開封第一講書人閱讀 56,470評論 1 283
  • 正文 為了忘掉前任歹苦,我火速辦了婚禮,結(jié)果婚禮上督怜,老公的妹妹穿的比我還像新娘殴瘦。我一直安慰自己,他們只是感情好亮蛔,可當我...
    茶點故事閱讀 65,550評論 6 385
  • 文/花漫 我一把揭開白布痴施。 她就那樣靜靜地躺著擎厢,像睡著了一般究流。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上动遭,一...
    開封第一講書人閱讀 49,806評論 1 290
  • 那天芬探,我揣著相機與錄音,去河邊找鬼厘惦。 笑死偷仿,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的宵蕉。 我是一名探鬼主播酝静,決...
    沈念sama閱讀 38,951評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼羡玛!你這毒婦竟也來了别智?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,712評論 0 266
  • 序言:老撾萬榮一對情侶失蹤稼稿,失蹤者是張志新(化名)和其女友劉穎薄榛,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體让歼,經(jīng)...
    沈念sama閱讀 44,166評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡敞恋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,510評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了谋右。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片硬猫。...
    茶點故事閱讀 38,643評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖改执,靈堂內(nèi)的尸體忽然破棺而出啸蜜,到底是詐尸還是另有隱情,我是刑警寧澤天梧,帶...
    沈念sama閱讀 34,306評論 4 330
  • 正文 年R本政府宣布盔性,位于F島的核電站,受9級特大地震影響呢岗,放射性物質(zhì)發(fā)生泄漏冕香。R本人自食惡果不足惜蛹尝,卻給世界環(huán)境...
    茶點故事閱讀 39,930評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望悉尾。 院中可真熱鬧突那,春花似錦、人聲如沸构眯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽惫霸。三九已至猫缭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間壹店,已是汗流浹背猜丹。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留硅卢,地道東北人射窒。 一個月前我還...
    沈念sama閱讀 46,351評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像将塑,于是被迫代替她去往敵國和親脉顿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,509評論 2 348

推薦閱讀更多精彩內(nèi)容