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

最後更新：2018-08-14 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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元素即可

應用情境：

傳統導航條
側邊欄導航
頁內導航
翻頁操作

html5中不要使用menu 元素代替 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檔案的初步認識

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More