HTML5新增的主體結構元素

乞力馬紮羅的雪CYF發表於2015-09-29
HTML

1.article元素

article元素代表文件，頁面或應用程式中獨立的，完整的，可以獨自被外部引用的內容。它可以是一篇部落格或者報刊中的文章，一篇論壇帖子，一段使用者評論或獨立的外掛，或其他任何獨立的內容。

article元素是可以巢狀使用的；

article元素用來表示外掛；

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article元素</title>
</head>
<body>

    <article>
        <header>
            <h1>HTML5</h1>
            <p>歡迎學習HTML！</p>
        </header>

        <!--article是可以巢狀的-->
        <article>
            <header>開發者</header>
            <p>Web開發者</p>
            <footer>評論</footer>
        </article>

        <footer>
            <p>這是底部</p>
        </footer>
    </article>

    <!--article是可以內嵌的-->
    <article>
        <h1>這是一個內嵌頁面</h1>
        <object>
            <embed src="#" width="600" height="400"></embed>
        </object>
    </article>

</body>
</html>

效果如下：
。



2.section元素

section元素對於網站或應用程式中頁面上的內容進行分塊。一個section元素通常由內容及其標題組成。但section元素並非一個普通的容器元素；當一個容器需要被直接定義樣式或通過指令碼定義行為時，推薦使用div而不是section。

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>section元素</title>
</head>
<body>


<!--通常不推薦沒有標題內容使用section元素-->
    <!--不要與article元素混淆-->
    <section>
        <h1>蘋果</h1>
        <p>這是一種水果</p>
    </section>

    <article>
        <h1>蘋果</h1>
        <p>這是一種水果</p>

        <section>
            <h2>紅富士</h2>
            <p>這個蘋果很好吃！！</p>
        </section>

        <section>
            <h2>洛川蘋果</h2>
            <p>這個是陝西盛產的蘋果！！</p>
        </section>

    </article>


    <!--注意section和article的區別-->

    <section>
        <h1>有很多水果</h1>

        <article>
            <h2>蘋果</h2>
            <p>介紹</p>
        </article>

        <article>
            <h2>香蕉</h2>
            <p>介紹</p>
        </article>

        <article>
            <h2>西瓜</h2>
            <p>介紹</p>
        </article>
    </section>

使用section注意事項：
1.不要將section元素作為設定樣式的頁面容器；
2.如果article元素，aside元素，nav元素更符合使用條件，那就不要使用section元素；
3.沒有標題內容，不要使用section元素。

</body>
</html>


3.nav元素

nav元素是一個可以用作頁面導航的連線組，其中的導航元素連結到其他頁面或當前頁面的其他部分。並不是所有的連線組都要被放進nav元素，只需要將主要的、基本的連線組放進nav元素即可。

nav元素應用場景：

（1）傳統導航條；

（2）側邊欄導航；

（3）頁內導航；

（4）翻頁操作；

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nav元素</title>
</head>
<body>

<!--HTML5中不能使用menu元素代替nav元素-->
<nav>
    <ul>
        <li><a href="#">主頁</a></li>
        <li><a href="#">開發文件</a></li>
    </ul>
</nav>

<article>
    <header>
        <h1>HTML5與JS的歷史</h1>
        <nav>
            <ul><a href="#">HTML5的歷史</a></ul>
            <ul><a href="#">JS的歷史</a></ul>
        </nav>
    </header>

    <section>
        <h1>HTML5的歷史</h1>
        <p>........</p>
    </section>

    <section>
        <h1>JS的歷史</h1>
        <p>........</p>
    </section>

    <footer>
        <a href="#">刪除</a>
        <a href="#">修改</a>
    </footer>
</article>

<footer>
    <p>
        <small>版權宣告。。。</small>
    </p>
</footer>


</body>
</html>

4.aside元素

aside元素用來表示當前頁面或文章的附屬資訊部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其他類似的有區別與主要內容的部分。

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aside元素</title>
</head>
<body>

    <header>
        <h1>HTML5入門</h1>
    </header>

    <article>
        <h1>語法</h1>
        <p>下面開始講解。。。</p>
        <aside>
            <h1>名詞解釋</h1>
            <p>語法很重要</p>
        </aside>
    </article>


<aside>

    <nav>
        <h2>評論</h2>
        <ul>
            <li><a href="#">2015-9-29</a></li>
            <li><a href="#">第二。。</a></li>
        </ul>
    </nav>

</aside>

</body>
</html>

5.time元素與微格式

time元素示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time元素</title>
</head>
<body>

    <time datetime="2015-10-10">2015-10-10</time>
    <time datetime="2015-10-10T20:00">2015-10-10</time>
    <time datetime="2015-10-10T20:00Z">2015-10-10</time>
    <time datetime="2015-10-10T20:00+09:00">2015-10-10</time>

</body>
</html>



pubdate元素示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pubdate屬性</title>
</head>
<body>

    <article>
        <header>
            <h1>蘋果</h1>
            <p>釋出日期
                <time datetime="2015-10-10" pubdate="true">2015-10-10</time>
            </p>
        </header>
    </article>

</body>
</html>



github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！

相關文章