HTML5語義化標籤

標籤：block   格式化   logs   images   dal   tor   cli   對話方塊   表格   

一、什麼是語義化標籤?
1.那麼什麼叫做語義化呢？
說的通俗點就是：就是給div起個外號，比如，
網頁上的文章的標題就可以叫他標題，網頁上的各個文章，就可以叫他文章。

2.為啥使用語義化標籤?
（1）. 更容易被搜尋引擎收錄。
（2）. 更容易讓螢幕助讀程式讀出網頁內容。
（3）. 能夠更好的體現頁面的主題。
（4）.相容性更好，支援更多的網路裝置。
二、常見語義化標籤

1. 頭部——header和nav標籤

header頭部，body下的直接子項目header一般用於放頁面的介紹性的資訊如網站名稱、logo或者導覽列nav。

 <header>        <h1>html5語義化標籤</h1>        <nav>            <h1>導航</h1>            <ul>                <li>章節標籤</li>                <li>標題標籤</li>            </ul>        </nav>    </header>

nav元素代表頁面的導航連結地區。用於定義頁面的主要導航部分。

1. 主體部分——main和section

   主體部分如下：<article> <hgroup>     <h1>我是標題</h1>     <cite>《我是作品標題》</cite><br>     <span>我是時間 <time pubdate="" datetime="2017-03-02">2017年03月02日</time></span>     <p>我是內容</p> </hgroup> <section>     <blockquote>我是引文我是引文我是引文我是引文我是引文我是引文</blockquote>     <figure>         <img alt="" src="images/sess1.jpg">         <figcaption>我是圖片</figcaption>     </figure>     <table borde="1">         <caption>我是表格標題</caption>         <thead>         <tr>             <th>我是表格頭部1</th>             <th>我是表格頭部2</th>         </tr>         </thead>         <tbody>         <tr>             <td>我是內容1</td>             <td>我是內容1</td>         </tr>         <tr>             <td>我是內容1</td>             <td>我是內容1</td>         </tr>         </tbody>         <tfoot>         <tr>             <td>我是表格結尾1</td>             <td>我是表格結尾2</td>         </tr>         </tfoot>         </tr>     </table> </section> <footer>     我是文章頁尾 </footer></article><aside> <hgroup>     <h2>我是標題標籤</h2>     <p>我是內容</p> </hgroup> <code> 我是代碼</code> <pre>             靜夜思           李白     床前明月光，疑是地上霜。     舉頭望明月，低頭思故鄉。 </pre> <dialog>     <h3>百度ife到底怎麼樣？</h3>     <p>當然棒啦！還等什麼，學完就能秒變大神！</p>     <button id="close">Close</button> </dialog> <button id="show">Open Dialog!</button> <script type="text/javascript">     var dialog = document.querySelector(‘dialog‘);     document.querySelector(‘#show‘).onclick = function () {         dialog.show();     };     document.querySelector(‘#close‘).onclick = function () {         dialog.close();     }; </script></aside>

   主題部分的如下：
   

1):article標籤：該標籤最容易跟section和div容易混淆，其實article代表一個在文檔，頁面或者網站中自成一體的內容，其目的是為了讓開發人員獨立開發或重用。article的結構一般如下所示：

    <article>     <hgroup>        <header>         <h1></h1>         <h2></h2>        </header>     </hgroup>     <section></section>     <footer></footer></article>

article的應用譬如論壇的文章，部落格上的文章，一篇使用者的評論，一個互動的widget小工具。（特殊的section）除了它的內容，article會有一個標題（通常會在header裡），會有一個footer頁尾。

2):hgroup 標籤:該標籤對網頁或區段（section）的標題進行組合，通俗的說就是把一堆標題全扔進一個籃子裡會方便很多。

3):cite標籤:用於定義引用內容出自書籍或雜誌等的標題，不允許其他資訊，如作者，日期等。

4):time 標籤:該標籤一般有三個組成部分機器可識別的時間戳記：格式必須是年月日的數字以減號相隔，如果增加時間，那就在日期後面加字母T然後跟24小時格式的時間值以及時區位移量，形如datetime="2012-2-15T22:49:40+08:00"人可識別的常值內容：格式隨意，只要能看懂。一個可選的pubdata標記：pubdata是個布爾值，如果需要，寫上屬性名稱就好pubdata。但是為了美觀，我們也可以寫成pubdata=""，我們還要注意的是，如果該time位於一個article中，那麼它表示這篇文章的發布時間；如果不在article之中表示整個文檔的發布時間。

5):section標籤:代表文檔中的“節”或“段”，“段”可以是指一篇文章裡按照主題的分段；“節”可以是指一個頁面裡的分組。
section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。

6):blockquote 標籤:該標籤定義摘自另一個源的區塊引述。

<blockquote> 與 </blockquote> 之間的所有文本都會從常規文本中分離出來，經常會在左、右兩邊進行縮排，而且有時會使用斜體。也就是說，區塊引述擁有它們自己的空間。

7):figure標籤:規定獨立的流內容（映像、圖表、照片、代碼等等）。
figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。

8):figcaption 標籤:定義 figure 元素的標題（caption）。
"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子項目的位置。

9):table標籤的語義化：table標籤提供thead、tfoot 以及 tbody 元素，這些元素對錶格中的行進行分組。當建立某個表格時，您也許希望擁有一個標題列，一些帶有資料的行，以及位於底部的一個合計列。這種劃分使瀏覽器有能力支援獨立於表格標題和頁尾的表格本文滾動。注意，如果您在table裡使用 thead、tfoot 以及 tbody 元素，您就必須按照thead、 tbody，tfoot 的順序使用全部的元素，這樣瀏覽器就可以在收到所有資料前呈現頁尾了。

10):aside元素被包含在article元素中作為主要內容的附屬資訊部分，其中的內容可以是與當前文章有關的相關資料、標籤、名次解釋等。（特殊的section）

11):code:該標籤是一個短語標籤，用來定義電腦代碼文本。

12):pre 標籤：pre 可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和分行符號。而文本也會呈現為等寬字型。pre 標籤的一個常見應用就是用來表示原始碼。

code標籤和pre標籤之間的關係，兩者的共同點是應用上類似，都主要應用於瀏覽器顯示電腦中的原始碼。 但是兩者之間還是有很大不同的，code標籤的一個功能是暗示瀏覽器code標籤所包圍的文本是電腦原始碼，瀏覽器可以做出自己的 樣式處理，pre標籤則沒有這項功能，但是pre標籤可以保留文本中的空格和分行符號，保留文本中的空格和分行符號是電腦原始碼顯示 所必須的樣式。那麼這個時候我們可以想象一下，code標籤和pre標籤可不可以一塊使用呢？答案是可以的，code標籤和pre標籤是 可以嵌套使用的，但是必須注意兩者的嵌套順序。

13):dialog標籤：該標籤定義對話方塊或視窗，這可以很方便的使用彈出層視窗。
預設情況下，該標籤支援的瀏覽器(Chrome 37+和Opera 27+)會以隱藏的形式呈現<dialog>元素，只有調用JavaScript的show()或showModal()方法才可以顯現，調用close()方法再次將其隱藏。通常情況下，會在一個click事件上執行此方法。

3.尾部——footer

  <footer>        <p>copyright &copy @</p>        <address>我是地址</address>  </footer>

adderss標籤:該標籤定義文檔作者或擁有者的聯絡資訊，通常呈現為斜體。大多數瀏覽器會在該元素的前後添加換行。如果 <address> 元素位於 <article> 元素內部，則它表示該文章作者或擁有者的聯絡資訊。通常的做法是將 address 元素添加到網頁的頭部或底部。注意，不應該使用 <address> 標籤來描述郵政地址，除非這些資訊是聯絡資訊的組成部分。

三、總結
能語義化的標籤當然不止這些，還有很多，這裡僅僅是把可能常見的展示出來，其餘的標籤在此不一一列舉了。
最後展示一張全家福來結束本篇筆記：

HTML5語義化標籤