站長(zhǎng)資訊網(wǎng)
html常用的結(jié)構(gòu)元素有：1、div，可定義文檔中的分區(qū)或節(jié)，用于為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景；2、section，表示文檔中的一個(gè)區(qū)域；3、article，表示文檔、頁面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，其意在成為可獨(dú)立分配的或可復(fù)用的結(jié)構(gòu)；4、aside，表示一個(gè)和其余頁面內(nèi)容幾乎無關(guān)的部分；5、header，表示頁面頭部或區(qū)塊頭部。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
結(jié)構(gòu)元素，又稱為區(qū)塊型元素，是用來定義區(qū)塊內(nèi)容范圍的元素。之前，區(qū)塊型元素只有<div>一個(gè)，HTML5新增了7個(gè)語義化結(jié)構(gòu)元素，包括<article>、<aside>、<nav>、<section>、<header>、<footer>、<main>
html常用的結(jié)構(gòu)元素
div元素
div元素是用來為HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。
<div> 可定義文檔中的分區(qū)或節(jié)（division/section）。
<div> 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。
如果用 id 或 class 來標(biāo)記 <div>，那么該標(biāo)簽的作用會(huì)變得更加有效。
注釋：<div> 是一個(gè)塊級(jí)元素，也就是說，瀏覽器通常會(huì)在 div 元素前后放置一個(gè)換行符。
提示：請(qǐng)使用 <div> 元素來組合塊級(jí)元素，這樣就可以使用樣式對(duì)它們進(jìn)行格式化。
section元素
Section元素(<section>)表示文檔中的一個(gè)區(qū)域(或節(jié))，是區(qū)塊級(jí)通用元素。比如，內(nèi)容中的一個(gè)專題組，一般來說會(huì)有包含一個(gè)標(biāo)題(heading)。一般通過是否包含一個(gè)標(biāo)題(<h1>-<h6> element)作為子節(jié)點(diǎn)，來辨識(shí)每一個(gè)<section>
[注意]如果元素內(nèi)容可以分為幾個(gè)部分的話，應(yīng)該使用<article>而不是<section>；再有，不要把<section>元素作為一個(gè)普通的容器來使用，這是本應(yīng)該是<div>的用法。 一般來說，一個(gè)<section>應(yīng)該出現(xiàn)在文檔大綱中
article元素
<article>元素表示文檔、頁面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，其意在成為可獨(dú)立分配的或可復(fù)用的結(jié)構(gòu)?？赡苁钦搲印㈦s志或新聞文章、博客、用戶提交的評(píng)論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目。當(dāng)<article>元素嵌套使用時(shí)，則該元素代表與外層元素有關(guān)的文章。例如，代表博客評(píng)論的<article>元素可嵌套在代表博客文章的<article>元素中
<article>元素的作者信息可通過<address>元素提供，但是不適用于嵌套的<article>元素；<article>元素的發(fā)布日期和時(shí)間可通過<time>元素的pubdate屬性表示
[注意]對(duì)于<article>和<section>來說，是必須要加上標(biāo)題的
aside元素
<aside>元素表示一個(gè)和其余頁面內(nèi)容幾乎無關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分并且可以被單獨(dú)的拆分出來而不會(huì)使整體受影響。一般用于表示不直接相關(guān)內(nèi)容的側(cè)邊欄，<aside>里面的內(nèi)容與它所關(guān)聯(lián)的內(nèi)容相互獨(dú)立，誰缺了誰都不影響各自文本含義的理解。如一篇文章的廣告、相關(guān)背景和引述內(nèi)容等
nav元素
HTML導(dǎo)航欄(<nav>)描繪一個(gè)含有多個(gè)超鏈接的區(qū)域，這個(gè)區(qū)域包含轉(zhuǎn)到其他頁面，或者頁面內(nèi)部其他部分的鏈接列表
并不是所有的鏈接都必須使用<nav>元素，它只用來將一些熱門的鏈接放入導(dǎo)航欄，例如<footer>元素就常用來在頁面底部包含一個(gè)不常用到，沒必要加入<nav>的鏈接列表
一個(gè)網(wǎng)頁也可能含有多個(gè)<nav>元素，例如一個(gè)是網(wǎng)站內(nèi)的導(dǎo)航列表，另一個(gè)是本頁面內(nèi)的導(dǎo)航列表
header元素
<header>元素表示頁面頭部或區(qū)塊頭部，用于將介紹內(nèi)容和區(qū)塊的輔助導(dǎo)航分組到一起，所以它有可能包含區(qū)塊的標(biāo)題元素以及其他的介紹內(nèi)容(目錄、logo等)
[注意]由于<header>和<footer>元素不是分節(jié)內(nèi)容，所以不會(huì)引入新的分節(jié)到大綱中
footer元素
<footer>元素表示最近一個(gè)章節(jié)內(nèi)容或者根節(jié)點(diǎn)(sectioning root)元素的頁腳。一個(gè)頁腳通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息
[注意]<footer>元素內(nèi)的作者信息應(yīng)包含在<address>元素中
案例說明：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>蘋果首頁</title> </head> <body> <nav> <ul> <li><a href="#">Apple</a></li> <li><a href="#">Mac</a></li> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">Music</a></li> <li><a href="#">技術(shù)支持</a></li> <li><a href="#">搜索</a></li> <li><a href="#">購物袋</a></li> </ul> </nav> <article> <section>展示1</section> <section>展示2</section> <section>展示3</section> <section>展示4</section> <nav> <ul> <li>按鈕1</li> <li>按鈕2</li> <li>按鈕3</li> <li>按鈕4</li> </ul> </nav> </article> <aside> <ul> <li><a href="#">Watch</a></li> <li><a href="#">Pencil</a></li> <li><a href="#">iPad</a></li> <li><a href="#">MacBook</a></li> </ul> </aside> <footer> <nav> <div>選購及了解</div> <div>商店</div> <div>應(yīng)用</div> <div>賬戶</div> <div>關(guān)于</div> </nav> <section> <div>其他雜項(xiàng)</div> </section> </footer> </body> </html>
說明：main
<main>不常用，最主要的原因是IE瀏覽器都不支持
main元素(<main>)呈現(xiàn)了文檔<body>或應(yīng)用的主體部分。主體部分由與文檔直接相關(guān)，或者擴(kuò)展于文檔的中心主題、應(yīng)用的主要功能部分的內(nèi)容組成。這部分內(nèi)容在文檔中應(yīng)當(dāng)是獨(dú)一無二的，不包含任何在一系列文檔中重復(fù)的內(nèi)容
<main>標(biāo)簽不能是以下元素的繼承，包括<article>、<aside>、<footer>、<header>、或<nav>。 在一個(gè)文檔中不能出現(xiàn)一個(gè)以上的 <main>標(biāo)簽
所以，一個(gè)正常的最外層布局應(yīng)該是下面這樣
<header></header> <main> <section></section> <section></section> <section></section> </main> <footer></footer>
但現(xiàn)在，一般地，布局如下
<header></header> <section></section> <section></section> <section></section> <footer></footer>
（學(xué)習(xí)視頻分享：web前端入門）
