首頁 > 文章 > web前端 > HTML5新增的結構元素有哪些？ HTML5新增的結構元素的用法（建議）

HTML5新增的結構元素有哪些？ HTML5新增的結構元素的用法（建議）

寻∝梦原創: 2018-08-14 16:22:595904瀏覽

HTML5新增的結構有哪些，具體可以怎麼使用，這篇文章會詳細的告訴你。

HTML5 新增的主體結構元素：

#article 元素
##section 元素
nav
aside元素
#time元素
pudate屬性

元素詳解：

#article 元素

可以內嵌，可以表示外掛程式

<article>
            <h1>这是一个内嵌页面</h1>
            <object>
                <embed src="#" width = "600"  height = "400"</embed>
            </object>
        </article>

section 元素

通常不建議沒有標題內容使用section元素

不要與article元素混淆

#總結：不要將section元素當作設定樣式的頁面容器

如果article、aside、nav元素比較符合使用條件，那就不要說seciton元素

沒有標題內容的，不要使用section元素

nav

用作頁面導覽的連接群組，其中的導覽元素連接到其他頁面或目前頁面的其他部分。將主要的、基本的連結組放進nav元素即可

應用場景：

傳統導覽條

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href = "#">主页</a></li>
                <li><a href = "#">开发文档</a></li>
            </ul>
        </nav>
        <article>
            <header>
                <h1>html5和css3的历史</h1>
                <nav>
                    <ul>
                        <li><a href = "#">HTML5历史</a></li>
                        <li><a href = "#">CSS3历史</a></li>
                    </ul>
                </nav>
            </header>
            <section>
                <h1>HTML5历史</h1>
                <p>....</p>
            </section>
            <section>
                <h1>css3历史</h1>
                <p>....</p>
            </section>
            <footer>
                <a href = "#">删除</a>
                <a href = "#">修改</a>
            </footer>
        </article>
        <footer>
            <p><small>版权声明：</small></p>
        </footer>
    </body>
</html>

aside元素

#表示目前頁面或文字的附屬資訊部分

包含先關的引用、側邊欄、逛逛、導航列等

<html>
    <head>
        <meta charset="UTF-8">
        <title>aside元素</title>
    </head>
    <body>
        <header>
            <h1>js入门</h1>
        </header>
        <article>
            <h1>语法</h1>
            <p>文章的正文。。。。。。</p>
            <aside>
                <h1>名词解释</h1>
                <p>这是一个对语言来说很重要的内容体</p>
            </aside>
        </article>
        <aside>
            <nav>
                <h2>评论</h2>
                <ul>
                    <li><a href = "#">2015-3-10</a></li>
                    <li><a href = "#" >大牛：真希望可以好好的学习一下</a></li>
                </ul>
            </nav>
        </aside>
    </body>
</html>

time元素

#24小時

<html>
    <head>
        <meta charset="UTF-8">
        <title>Time元素</title>
    </head>
    <body>
        <time datatime = "2017-10-09">2017-10-09</time>
        <time datatime = "2017-10-09T20:00">2017-10-09</time>
        <time datatime = "2017-10-09T20:00Z">2017-10-09</time>
        <time datatime = "2017-10-09T20:00Z+09:00">2017-10-09</time>
    </body>
</html>

pudate屬性

<html>
    <head>
        <meta charset="UTF-8">
        <title>update属性</title>
    </head>
    <body>
        <article>
            <header>
                <h1>苹果</h1>
                <p>发布日期
                <time datetime="2017-10-09" pubudate>2015-10-09</time></p>
                <p>舞会时间
                <time datetime ="2015-10-09">2015-10-09</time></p>
            </header>
        </article>
    </body>
</html>

【相關推薦】

#html的基礎元素，讓你零基礎學習HTML

什麼是HTML檔？ HTML檔案的初步認知

以上是HTML5新增的結構元素有哪些？ HTML5新增的結構元素的用法（建議）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML5中web是什麼？ web儲存中的元素有哪些？下一篇：HTML5中web是什麼？ web儲存中的元素有哪些？

看更多