section 元素
對網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊匈庭。如:章、節(jié)甜攀、頁眉较解、頁腳及文檔中的其他部分。section元素通常由內(nèi)容及其標(biāo)題組成赴邻,當(dāng)一個容器需要被直接定義樣式或通過腳本定義行為時印衔,推薦使用div而不是section。
<html>
<head>
<title>
section demo
</title>
<meta charset="UTF-8">
</head>
<body>
<article>
<section>水果</section>
<p>可以食用姥敛。蘋果奸焙、葡萄等都屬于水果。</p>
<section>蘋果</section>
<p>紅彤彤的彤敛,很香甜与帆。</p>
</article>
</body>
</html>
article元素
代表文檔、頁面或應(yīng)用程序中獨立的墨榄、完整的玄糟、可以獨自被外部引用的內(nèi)容。如:一篇博客袄秩,報刊中的文章阵翎,一篇論壇帖子,一段用戶評論之剧,獨立插件(可嵌套使用郭卫,也可做插件)。article強調(diào)文檔的獨立性背稼。
<html>
<head>
<title>
article demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--article嵌套是上下文相關(guān)的內(nèi)容贰军,但article單獨使用則強調(diào)其獨立性-->
<article>
<header>金剛</header>
<p>
電影講述1933年的美國,一名勇于冒險的企業(yè)家及電影制作者蟹肘,
率領(lǐng)攝制隊伍到荒島拍攝词疼,其中包括女主角安及編劇杰克俯树,
他們遇到恐龍及當(dāng)?shù)赝林囊u擊,安發(fā)出的尖叫聲換來金剛的回應(yīng)贰盗。
這只巨大無比的猩猩聘萨,連兇悍的恐龍也懼怕它幾分,偏偏它卻鐘情于安童太。
安其后將金剛由荒島帶回紐約米辐,但卻是它悲劇命運的開始。
</p>
<article>
<header>作者</header>
<p>評論</p>
<footer>時間</footer>
</article>
<footer>
<small>版權(quán)</small>
</footer>
</article>
<!--article作插件-->
<article>
<object>
<!--將src的屬性值嵌入到embed區(qū)域中-->
<embed src="#"></object>
<embed src="http://www.baidu.com">
</object>
</article>
</body>
</html>
aside元素
表示當(dāng)前頁面或文章的附屬信息部分书释,它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用翘贮、側(cè)邊欄、廣告爆惧、導(dǎo)航條狸页,以及其他類似的有區(qū)別于主要內(nèi)容的部分。
<html>
<head>
<title>
aside demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--aside在article內(nèi)扯再,作為article的附屬信息-->
<article>
<h3>語法</h3>
<p>
語法是語言學(xué)的一個分支芍耘,研究按確定用法來運用的"詞類"、
"詞"的屈折變化或表示相互關(guān)系的其他手段以及詞在句中的功能和關(guān)系熄阻。
包含詞的構(gòu)詞斋竞、構(gòu)形的規(guī)則和組詞成句的規(guī)則。
</p>
<aside>
<!--對article的標(biāo)題語法作名詞解釋-->
<h5>名詞解釋</h5>
<p>對名詞解釋展開詳細(xì)的描述秃殉。</p>
</aside>
</article>
<!--aside在article之外坝初,可作為一個彈出框廣告,側(cè)邊欄,導(dǎo)航條-->
<aside>
<nav>
<ul>
<li><a href="#">鏈接一</a></li>
<li><a href="#">鏈接二</a></li>
</ul>
</nav>
</aside>
</body>
</html>
nav元素
各頁的導(dǎo)航鏈接
<html>
<head>
<title>
nav demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--nav導(dǎo)航-->
<nav>
<ul>
<!--href的屬性值可修改钾军,#表示跳轉(zhuǎn)到當(dāng)前頁面-->
<li><a href="#">Home</a></li>
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
</body>
</html>
time元素與pubdate屬性
設(shè)置時間鳄袍。
<html>
<head>
<title>
time demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--datetime設(shè)置具體的日期時間-->
<time datetime="2018/10/10">2018/10/10</time><br/>
<!--pubdate指發(fā)布時間-->
<time datetime="2018/10/10" pubdate>發(fā)布時間:2018/10/10</time>
</body>
</html>