html5中有哪些布局元素

小編給大家分享一下html5中有哪些布局元素，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

html5布局元素有：1、header元素，定義網(wǎng)頁的頭部內(nèi)容；2、footer元素；3、nav元素；4、article元素；5、section元素；6、aside元素；7、time元素；8、progress元素；9、meter元素等。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

1、header元素：

一般用于網(wǎng)頁的頭部，定義頭部的區(qū)域塊，也可以定義一塊內(nèi)容，所定義的內(nèi)容是一塊獨立的。

<header>
    <h2>中國最大的搜索引擎</h2>
    <a href="http://www.baidu.com">百度</a>
    <nav>
        <ul>
            <li><a href="#">谷歌</a></li>
            <li><a href="#">火狐</a></li>
            <li><a href="#">360</a></li>
        </ul>
    </nav>
</header>

2、footer元素：

與header元素基本一致，但是footer元素一般定義網(wǎng)頁的底部內(nèi)容

<footer>
    <ul>
        <li>關(guān)于我們</li>
        <li>聯(lián)系客服</li>
        <li>合作招商</li>
        <li>隱私政策</li>
    </ul>
</footer>

3、nav元素：

可以用來定義導(dǎo)航欄，目錄，超鏈接等；并不是需要把所有的連接組都放進nav元素中，只需要將主要的，基本的連接組放進nav元素即可

4、article元素：

用于定義一個獨立的內(nèi)容區(qū)塊；可以是一篇博客，一篇文章或者是獨立的插件；可以嵌套使用，也可以表示插件。類似于div元素

<article>
    <header>
        <h2>Article元素</h2>
        <p>歡迎學(xué)習(xí)Article元素</p>
    </header>
    <footer>
        <p>這是底部</p>
    </footer>
</article>
<article>
    <h2>這是一個內(nèi)嵌頁面</h2>
    <object data="#" type="" width="600px" height="600px"></object>
</article>

5、section元素：

用來定義頁面中的內(nèi)容進行分塊；強調(diào)分塊。一般用于頁面中具有明顯獨立的內(nèi)容

<article>
    <section>
        <h2>第一章：桃園三結(jié)義</h2>
        <p>桃園三結(jié)義最初是小說《三國演義》里記載的故事，述說當(dāng)年劉備、關(guān)羽和張飛三位仁人志士，為了共同干一番大事業(yè)的目標(biāo)，意氣相投，
            言行相依，選在一個桃花盛開的季節(jié)、選在一個桃花絢爛的園林，舉酒結(jié)義，對天盟誓，有苦同受，有難同當(dāng)，有福同享，共同實現(xiàn)自己人生的美好理想。</p>
    </section>
    <section>
        <h2>第二章：</h2>
        <p>草船借箭是我國古典名著《三國演義》中赤壁之戰(zhàn)的一個故事。借箭由周瑜故意提出(限十天造十萬支箭)，機智的諸葛亮一眼識破是一條害人之計，
            卻淡定表示“只需要三天”。后來，有大霧天幫忙，諸葛亮再利用曹操多疑的性格，調(diào)了幾條草船誘敵，終于借足十萬支箭，立下奇功。</p>
    </section>
</article>

6、aside元素：

• 通常用來設(shè)置側(cè)邊欄。
  

• 同時也可以嵌套在article元素內(nèi)部使用，作為主要內(nèi)容的附屬信息，比如參考資料，名詞解釋等

• 也可以定義article元素之外的內(nèi)容，，前提是這些內(nèi)容與article元素內(nèi)容相關(guān)聯(lián)

<article class="film_review">
    <header>
        <h3>侏羅紀(jì)公園</h3>
    </header>
    <section class="main_review">
        <p>Dinos were great!</p>
    </section>
    <section class="user_reviews">
        <article class="user_review">
            <p>Way too scary for me.</p>
            <footer>
                <p>
                    Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
                </p>
            </footer>
        </article>
        <article class="user_review">
            <p>I agree, dinos are my favorite.</p>
            <footer>
                <p>
                    Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
                </p>
            </footer>
        </article>
    </section>
    <footer>
        <p>
            Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
        </p>
    </footer>
</article>

7、time元素：

• 表示24小時中的某個時刻或某個日期，，表示時刻允許帶時差

• datetime屬性中日期與時間要用”T“文字分隔 使用”z“表示UTC標(biāo)準(zhǔn)時間

• pubbdate屬性是一個可選標(biāo)簽，可以讓搜索引擎很方便就識別出文章日期，新聞的發(fā)表日期

<section>
    <time datetime="2019-4-27">2019-4-27</time>
    <time datetime="2019-4-27T20:00">2019-4-27</time>
    <time datetime="2019-4-27T20:00Z">2019-4-27</time>
    <time datetime="2019-4-27+09:00">2019-4-27</time>
</section>

8、progress和meter元素：

• progress元素：是HTML5新增的元素，用來建立一個進度條；通常用來與JavaScript結(jié)合使用，來顯示任務(wù)的進度

• meter元素：是HTML5新增的元素，用來建立一個度量條，用來表示度量衡的評定；通常與JavaScript結(jié)合使用

<form action="">
    <!--max:規(guī)定當(dāng)前進度條的最大值 ； value屬性：設(shè)定進度條當(dāng)前顯示的默認值  form：規(guī)定進度條所屬的一個或多個表單-->
    <p>當(dāng)前下載進度：</p>
    <progress value="30" max="100">

    </progress>

    <meter value="40" max="100" min="10">

    </meter>
</form>

以上是“html5中有哪些布局元素”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！