前端開發入門到實戰：html5語義化標籤

html5語義化標籤

1.<article>

可以是頁面任何獨立的內容區域，比如文章/部落格/新聞/故事/論壇帖子/評論等等任何獨立的內容。

<article>
    <header>
        <h1>文章標題</h1>
        <p>釋出時間：<time pubdate='2019-05-06'>2019-05-06</time></p>
        <p>作者：xxx</p>
    </header>
    <p>文章內容.........</p>
    <p>文章內容.........</p>
</article>

2.<section>

定義文件中的節、區段，比如章節、頁首或文章中的其他部分。比如我們對一篇文章進行分章節。

<article>
    <header>
        <h1>文章標題</h1>
        <p>釋出時間：<time pubdate='2019-05-06'>2019-05-06</time></p>
        <p>作者：xxx</p>
    </header>
    <section>
        <h2>章節一的標題</h2>
        <p>文章內容.........</p>
    </section>
    <section>
        <h2>章節二的標題</h2>
        <p>文章內容.........</p>
    </section>
</article>

<section>應包含一組內容及其標題。如果內容沒有標題，不推薦使用<section>。

3.<nav>

定義頁面的導航區域。

<nav>
    <a href='/a'>頁面a</a>
    <a href='/b'>頁面b</a>
    <a href='/c'>頁面c</a>
</nav>

4.<aside>

定義頁面主區域內容之外的內容（比如側邊欄）

5.<header>

描述文件頭部區域，用於定義內容的介紹展示，可以使用多個<header>。

為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為前端工程師，乃至全棧工程師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習qun 784783012
當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有效資源還是很有必要的。

6.<footer>

描述文件底部區域，通常包含文件作者，著作權，使用條款，聯絡資訊等，可以使用多個<footer>，文件的大致結構可以分為

下面是更細緻的語義化標籤，也是更容易被忽略的標籤。

7.<figure>和<figcaption>

<figure>定義獨立的流內容（影像、圖表、照片、程式碼等等）。
<figcaption>定義<figure>的標題，通常置於figure元素的第一個或最後一個子元素

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2646273/，如需轉載，請註明出處，否則將追究法律責任。