1. 程式人生 > >HTML標籤-----article、aside、figure、nav和section

HTML標籤-----article、aside、figure、nav和section

   article

   <article> 標籤定義獨立的內容

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div>article標籤</div>
        <article>
            <
h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9(簡稱 IE9)於 2011 年 3 月 14 日釋出.....</p> </article> </body> </html>

   aside

   <aside> 標籤定義 <article> 標籤外的內容,aside 的內容應該與附近的內容相關

<!DOCTYPE html
> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside> </body> </html>

   figure

   <figure> 標籤規定獨立的流內容(影象、圖表、照片、程式碼等等),figure 元素的內容應該與主內容相關,但如果被刪除,則不應對文件流產生影響

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <p>上海盧浦大橋是當今世界第一鋼結構拱橋,是世界上跨度最大的拱形橋。</p>
        <figure>
            <p>黃浦江上的的盧浦大橋</p>
            <p>拍攝者:W3School 專案組,拍攝時間:2010 年 10 月</p>
            <img src="img/bridge.jpg" width="350" height="250" />
        </figure>

    </body>

</html>

   nav

   <nav> 標籤定義導航連結的部分

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <nav>
            <a href="#">Java</a>
            <a href="#">C#</a>
            <a href="#">JavaScript</a>
        </nav>
    </body>

</html>

   section

<section> 標籤定義文件中的節(section、區段)。比如章節、頁首、頁尾或文件中的其他部分

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <section>
            <h1>Java</h1>
            <p>
                Java是一門語言!
            </p>
        </section>
        <section>
            <h1>C#</h1>
            <p>
                C#是一門語言!
            </p>
        </section>
        <p>
            C#是一門語言!
        </p>
    </body>

</html>