HTML5結構元素

時間 2019-11-09

標籤 html5 html 結構元素欄目 HTML5 简体版

原文原文鏈接

前面的話

　　幾年前，用於網頁佈局通常都用div元素，但語義化並很差。HTML5引入了大量新的塊級元素來幫助提高網頁的語義，使頁面具備邏輯性結構、容易維護，而且對數據挖掘服務更友好。本文將詳細介紹HTML5結構元素html

總括

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

section

　　Section元素(<section>)表示文檔中的一個區域(或節)，是區塊級通用元素。好比，內容中的一個專題組，通常來講會有包含一個標題(heading)。通常經過是否包含一個標題(<h1>-<h6> element)做爲子節點，來辨識每個<section>瀏覽器

　　[注意]若是元素內容能夠分爲幾個部分的話，應該使用<article>而不是<section>；再有，不要把<section>元素做爲一個普通的容器來使用，這是本應該是<div>的用法。通常來講，一個<section>應該出如今文檔大綱中ide

article

　　<article>元素表示文檔、頁面、應用或網站中的獨立結構，其意在成爲可獨立分配的或可複用的結構。多是論壇帖子、雜誌或新聞文章、博客、用戶提交的評論、交互式組件，或者其餘獨立的內容項目。當<article>元素嵌套使用時，則該元素表明與外層元素有關的文章。例如，表明博客評論的<article>元素可嵌套在表明博客文章的<article>元素中佈局

　　<article>元素的做者信息可經過<address>元素提供，可是不適用於嵌套的<article>元素；<article>元素的發佈日期和時間可經過<time>元素的pubdate屬性表示網站

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

aside

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

nav

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

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

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

header

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

　　 [注意]因爲<header>和<footer>元素不是分節內容，因此不會引入新的分節到大綱中

footer

　　<footer>元素表示最近一個章節內容或者根節點(sectioning root)元素的頁腳。一個頁腳一般包含該章節做者、版權數據或者與文檔相關的連接等信息

　　[注意]<footer>元素內的做者信息應包含在<address>元素中

main

　　<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>

案例說明

　　想找一個規範使用html5新標籤的網站不是很容易，國內大多數網站因爲各類各樣的緣由，依然仍是div佈局，最終，案例選擇使用蘋果官網

<!DOCTYPE html>
<html lang="en">
<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。