html常用的結構元素是什麼

html常用的結構元素有：1、div，可定義檔案中的分割區或節，用於為HTML檔案內大塊（block-level）的內容提供結構和背景；2、section，表示檔案中的一個區域；3、article，表示檔案、頁面、應用或網站中的獨立結構，其意在成為可獨立分配的或可複用的結構；4、aside，表示一個和其餘頁面內容幾乎無關的部分；5、header，表示頁面頭部或區塊頭部。

前端（vue）入門到精通課程：進入學習

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

結構元素，又稱為區塊型元素，是用來定義區塊內容範圍的元素。之前，區塊型元素只有<div>一個，HTML5新增了7個語意化結構元素，包括<article>、<aside>、<nav>、<section>、<header>、<footer>、<main>

html常用的結構元素

div元素

div元素是用來為HTML（標準通用標示語言下的一個應用）檔案內大塊（block-level）的內容提供結構和背景的元素。

<div> 可定義檔案中的分割區或節（division/section）。

<div> 標籤可以把檔案分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。

如果用 id 或 class 來標記 <div>，那麼該標籤的作用會變得更加有效。

註釋：<div> 是一個塊級元素，也就是說，瀏覽器通常會在 div 元素前後放置一個換行符。

提示：請使用 <div> 元素來組合塊級元素，這樣就可以使用樣式對它們進行格式化。

section元素

　　Section元素(<section>)表示檔案中的一個區域(或節)，是區塊級通用元素。比如，內容中的一個專題組，一般來說會有包含一個標題(heading)。一般通過是否包含一個標題(<h1>-<h6> element)作為子節點，來辨識每一個<section>

　　[注意]如果元素內容可以分為幾個部分的話，應該使用<article>而不是<section>；再有，不要把<section>元素作為一個普通的容器來使用，這是本應該是<div>的用法。一般來說，一個<section>應該出現在檔案大綱中

article元素

　　<article>元素表示檔案、頁面、應用或網站中的獨立結構，其意在成為可獨立分配的或可複用的結構。可能是論壇貼文、雜誌或新聞文章、部落格、使用者提交的評論、互動式元件，或者其他獨立的內容專案。當<article>元素巢狀使用時，則該元素代表與外層元素有關的文章。例如，代表部落格評論的<article>元素可巢狀在代表部落格文章的<article>元素中

　　<article>元素的作者資訊可通過<address>元素提供，但是不適用於巢狀的<article>元素；<article>元素的釋出日期和時間可通過<time>元素的pubdate屬性表示

　　[注意]對於<article>和<section>來說，是必須要加上標題的

aside元素

　　<aside>元素表示一個和其餘頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分並且可以被單獨的拆分出來而不會使整體受影響。一般用於表示不直接相關內容的側邊欄，<aside>裡面的內容與它所關聯的內容相互獨立，誰缺了誰都不影響各自文字含義的理解。如一篇文章的廣告、相關背景和引述內容等

nav元素

　　HTML導航欄(<nav>)描繪一個含有多個超連結的區域，這個區域包含轉到其他頁面，或者頁面內部其他部分的連結列表

　　並不是所有的連結都必須使用<nav>元素，它只用來將一些熱門的連結放入導航欄，例如<footer>元素就常用來在頁面底部包含一個不常用到，沒必要加入<nav>的連結列表

　　一個網頁也可能含有多個<nav>元素，例如一個是網站內的導航列表，另一個是本頁面內的導航列表

header元素

　　<header>元素表示頁面頭部或區塊頭部，用於將介紹內容和區塊的輔助導航分組到一起，所以它有可能包含區塊的標題元素以及其他的介紹內容(目錄、logo等)

　　 [注意]由於<header>和<footer>元素不是分節內容，所以不會引入新的分節到大綱中

footer元素

　　<footer>元素表示最近一個章節內容或者根節點(sectioning root)元素的頁尾。一個頁尾通常包含該章節作者、版權資料或者與檔案相關的連結等資訊

　　[注意]<footer>元素內的作者資訊應包含在<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="#">技術支援</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>應用</div>
    <div>賬戶</div>
    <div>關於</div>
  </nav>
  <section>
    <div>其他雜項</div>
  </section>
</footer>
</body>
</html>

說明：main

<main>不常用，最主要的原因是IE瀏覽器都不支援

main元素(<main>)呈現了檔案<body>或應用的主體部分。主體部分由與檔案直接相關，或者擴充套件於檔案的中心主題、應用的主要功能部分的內容組成。這部分內容在檔案中應當是獨一無二的，不包含任何在一系列檔案中重複的內容

<main>標籤不能是以下元素的繼承，包括<article>、<aside>、<footer>、<header>、或<nav>。在一個檔案中不能出現一個以上的 <main>標籤

所以，一個正常的最外層佈局應該是下面這樣

<header></header>
<main>
  <section></section>
  <section></section>
  <section></section>
</main>
<footer></footer>

但現在，一般地，佈局如下

<header></header>
<section></section>
<section></section>
<section></section>
<footer></footer>

（學習視訊分享：）

以上就是html常用的結構元素是什麼的詳細內容，更多請關注TW511.COM其它相關文章！