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