溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML5新增了哪些結(jié)構(gòu)元素

發(fā)布時間：2020-10-13 15:55:07 來源：億速云 閱讀：163 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)HTML5新增了哪些結(jié)構(gòu)元素，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

HTML5 新增的主體結(jié)構(gòu)元素：

  • article 元素

  • section 元素

  • nav

  • aside元素

  • time元素

  • pudate屬性

元素詳解：

article 元素

可以內(nèi)嵌 ，可以表示插件

<article>
            <h2>這是一個內(nèi)嵌頁面</h2>
            <object>
                <embed src="#" width = "600"  height = "400"</embed>
            </object>
        </article>

section 元素

通常不推薦沒有標(biāo)題內(nèi)容使用section元素

不要與article元素混淆

總結(jié)：不要將section元素作為設(shè)置樣式的頁面容器

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

沒有標(biāo)題內(nèi)容的，不要使用section元素

nav

用作頁面導(dǎo)航的連接組，其中的導(dǎo)航元素連接到其他頁面或當(dāng)前頁面的其他部分。將主要的、基本的連接組放進(jìn)nav元素即可

應(yīng)用場景：

  • 傳統(tǒng)導(dǎo)航條

  • 側(cè)邊欄導(dǎo)航

  • 頁內(nèi)導(dǎo)航

  • 翻頁操作

html5中不要使用menu 元素代替 nav元素

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href = "#">主頁</a></li>
                <li><a href = "#">開發(fā)文檔</a></li>
            </ul>
        </nav>
        <article>
            <header>
                <h2>html5和css3的歷史</h2>
                <nav>
                    <ul>
                        <li><a href = "#">HTML5歷史</a></li>
                        <li><a href = "#">CSS3歷史</a></li>
                    </ul>
                </nav>
            </header>
            <section>
                <h2>HTML5歷史</h2>
                <p>....</p>
            </section>
            <section>
                <h2>css3歷史</h2>
                <p>....</p>
            </section>
            <footer>
                <a href = "#">刪除</a>
                <a href = "#">修改</a>
            </footer>
        </article>
        <footer>
            <p><small>版權(quán)聲明：</small></p>
        </footer>
    </body>
</html>

aside元素

表示當(dāng)前頁面或者文字的附屬信息部分

包含先關(guān)的引用、側(cè)邊欄、逛逛、導(dǎo)航條等

<html>
    <head>
        <meta charset="UTF-8">
        <title>aside元素</title>
    </head>
    <body>
        <header>
            <h2>js入門</h2>
        </header>
        <article>
            <h2>語法</h2>
            <p>文章的正文。。。。。。</p>
            <aside>
                <h2>名詞解釋</h2>
                <p>這是一個對語言來說很重要的內(nèi)容體</p>
            </aside>
        </article>
        <aside>
            <nav>
                <h3>評論</h3>
                <ul>
                    <li><a href = "#">2015-3-10</a></li>
                    <li><a href = "#" >大牛：真希望可以好好的學(xué)習(xí)一下</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>
                <h2>蘋果</h2>
                <p>發(fā)布日期
                <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>

關(guān)于HTML5新增了哪些結(jié)構(gòu)元素就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手