HTML5学习笔记（二）
定義文章塊
article 用于定義表示文檔中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容塊。它可以有自己的 <header> 元素，還可以嵌套使用。
<!DOCTYPE html> <html> <head><meta charset="UTF-8"> </head> <body> <article><h1>使用插件</h1><object><param name="allowFullScreen" value="true"><embed src="#" width="600" height="395"></embed></object> </article> </body> </html>article 是一段獨(dú)立的內(nèi)容，因此一般都包含了 header 和 footer 元素。
定義內(nèi)容塊
section 用于對(duì)頁(yè)面中的內(nèi)容進(jìn)行分區(qū)，一個(gè) section 一般由內(nèi)容和標(biāo)題組成。
section 需要一個(gè)包含<hn> 的標(biāo)題元素，但不是 header 哦~~
注意：
定義導(dǎo)航塊
nav 元素適用于以下幾種場(chǎng)合：
定義側(cè)邊欄
aside 元素可以用于定義頁(yè)面中的側(cè)邊欄。
<!DOCTYPE html> <html><meta charset="utf-8"> </html> <body><header><h1>HTML5</h1></header><article><h1>HTML5 歷史</h1><p>balabala</p><aside><h1>名詞解釋</h1><dl><dt>WHATWG</dt><dd>balabala</dd></dl><dl><dt>W3C</dt><dd>balabala</dd></dl></aside></article> </body>其中 dl，dt，dd 分別表示定義 列表、列表中的項(xiàng)目、解釋列表中的項(xiàng)目。
定義主要區(qū)域
main 元素主要用于定義頁(yè)面中的主要區(qū)域。主要區(qū)域?yàn)槊恳粋€(gè)網(wǎng)頁(yè)所特有的內(nèi)容，不能包含整個(gè)網(wǎng)站的導(dǎo)航條、搜索欄等。
特別注意：
定義標(biāo)題欄
header 用于防止整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，同時(shí)也可以包含其他內(nèi)容。類似于 hgroup、table、form、nav等元素只要應(yīng)該放在頭部區(qū)域，就可以放在 header 中。
<!DOCTYPE html> <html> <head><meta charset="utf-8"> </head> <body><header><hgroup><h1>我的博客</h1><a href="#">[URL]</a><a href="#">[訂閱]</a><a href="#">[手機(jī)訂閱]</a></hgroup><nav><ul><li>首頁(yè)</li><li><a href="#">目錄</a></li><li><a href="#">社區(qū)</a></li><li><a href="#">微博我</a></li></ul></nav></header> </body> </html>定義標(biāo)題組
hgroup 將標(biāo)題或者子標(biāo)題堿性分組，通常與 h1 ~ h6 結(jié)合使用。如果文章只有一個(gè)標(biāo)題，就不需要使用 hgroup 來進(jìn)行分組。
<!DOCTYPE html> <html> <head><meta charset="utf-8"> </head> <body><article><header><hgroup><h1>主標(biāo)題</h1><h2>副標(biāo)題</h2><h3>標(biāo)題說明</h3></hgroup><p><time datetime="2017-6-20">發(fā)布時(shí)間：2017 年 6 月 20 日</time></p></header><p>新聞?wù)?span id="ze8trgl8bvbq" class="token tag"></p></article> </body> </html>定義腳注欄
footer 元素用于為內(nèi)容塊添加腳注，它可以作為父級(jí)內(nèi)容的腳注，也可以作為整個(gè)網(wǎng)頁(yè)的腳注。
<!DOCTYPE html> <html> <head><meta charset="utf-8"> </head> <body><article><header><hgroup><h1>主標(biāo)題</h1><h2>副標(biāo)題</h2><h3>標(biāo)題說明</h3></hgroup></header><p>Hello</p><footer>Aricle 的腳注哦~~</footer></article><p>新聞?wù)?span id="ze8trgl8bvbq" class="token tag"></p><footer><ul>關(guān)于</ul><ul>導(dǎo)航</ul><ul>聯(lián)系</ul></footer> </body> </html>定義聯(lián)系信息
address 元素用于定義聯(lián)系信息、文檔作者、聯(lián)系方式、email、電話號(hào)碼等等。
<!DOCTYPE html> <html> <header><meta charset="utf-8"> </header> <body><footer><section><address><a title="作者：MDN" href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5">HTML5 - Web開發(fā)指南</a></address><p>發(fā)布于：<time datetime="2017-6-1">2017 年 6 月 1 日</time></p></section></footer> </body> </html>定義時(shí)間段
time 元素配合上其中的 datetime 屬性，用于對(duì)機(jī)器的日期和時(shí)間進(jìn)行編碼。
注意：
定義發(fā)布日期？
若文章中存在兩個(gè)日期，因此可以使用 pubdate 來表示哪個(gè)才是發(fā)布日期，多用在網(wǎng)站的公告等里面。
<!DOCTYPE html> <html> <head><meta charset="utf-8"> </head> <body><article><header><h1>科技公司都變成了數(shù)據(jù)公司</h1><p>發(fā)布日期：<time datetime="2021-9-18" pubdate>2021-9-18</time></p><p>關(guān)于<time datetime="2021-9-19">9 月 19 日</time>更正通知</p></header><p>balabala</p><footer><p>https://www.huxiu.com/article/176524.html</p></footer></article> </body> </html>總結(jié)
以上是生活随笔為你收集整理的HTML5学习笔记（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java实现日期让随动变_java工具类
- 下一篇： python基础（12）之匿名函数lam