【網(wǎng)站建設(shè)學(xué)習(xí)網(wǎng)】
【案例說明】這個案例講述的是使用<article>標(biāo)簽定義文章的方法。在<header>標(biāo)簽中嵌入了文章的標(biāo)題部分,標(biāo)題“美亞手機(jī)”被嵌入到<hl>標(biāo)簽中,文章的發(fā)布日期被嵌入到<p>標(biāo)簽中;在標(biāo)題部分下面的<p>標(biāo)簽中,嵌入了文章的正文;在結(jié)尾處的<footer>標(biāo)簽中嵌入了文章的著作權(quán),作為腳注。整個案例的內(nèi)容相對比較獨(dú)立、完整,因此,對這部分內(nèi)容使用了<article>標(biāo)簽。
<article>標(biāo)簽是可以嵌套使用的,內(nèi)層的內(nèi)容在原則上需要與外層的內(nèi)容相關(guān)聯(lián)。例如,在一篇文章中,針對該文章的評論就可以使用嵌套<article>標(biāo)簽的方法實(shí)現(xiàn),用來呈現(xiàn)評論的<article>標(biāo)簽被包含在表示整體內(nèi)容的<article>標(biāo)簽里面。
【案例5-2】使用嵌套的<article>標(biāo)簽定義博客文章及評論。
【案例展示】本例文件5-2.html在瀏覽器中的顯示效果如圖5-3所示。
【學(xué)習(xí)目標(biāo)】掌握嵌套定義<article>標(biāo)簽的方法。
【知識要點(diǎn)】掌握<article>標(biāo)簽和<section》I;iT簽的區(qū)別。
代碼如下:
<! doctype html>
<html>
<head>
<meta charset="gb2312">
<title>嵌套定義article標(biāo)簽示例</title>
</head>
<body>
<article>
<header>
<hl>美亞手機(jī)</hl>
<p>發(fā)布日期:2011/05/Ol</p>
</header>
圖5-3 頁面的顯示效果