html5版面元素有：1、header元素，定義網頁的頭部內容；2、footer元素；3、nav元素；4、article元素；5、section元素；6、aside元素；7、 time元素；8、progress元素；9、meter元素等。
本教學操作環境：windows7系統、HTML5版、Dell G3電腦。
1、header元素：
一般是用於網頁的頭部，定義頭部的區域塊，也可以定義一塊內容，所定義的內容是一塊獨立的。
<header>
<h1>中国最大的搜索引擎</h1>
<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元素一般定義網頁的底部內容
<footer>
<ul>
<li>关于我们</li>
<li>联系客服</li>
<li>合作招商</li>
<li>隐私政策</li>
</ul>
</footer>#3、nav元素：
可以用來定義導覽欄，目錄，超連結等；並不是需要把所有的連結組都放進nav元素中，只需要將主要的，基本的連結組放進nav元素即可
4、article元素：
用來定義一個獨立的內容區塊；可以是一篇博客，一篇文章或獨立的插件；可以嵌套使用，也可以表示插件。類似div元素
<article>
<header>
<h1>Article元素</h1>
<p>欢迎学习Article元素</p>
</header>
<footer>
<p>这是底部</p>
</footer>
</article>
<article>
<h1>这是一个内嵌页面</h1>
<object data="#" type="" width="600px" height="600px"></object>
</article>5、section元素：
#用來定義頁面中的內容進行分塊；強調分塊。一般用於頁面中具有明顯獨立的內容
<article>
<section>
<h1>第一章：桃园三结义</h1>
<p>桃园三结义最初是小说《三国演义》里记载的故事，述说当年刘备、关羽和张飞三位仁人志士，为了共同干一番大事业的目标，意气相投，
言行相依，选在一个桃花盛开的季节、选在一个桃花绚烂的园林，举酒结义，对天盟誓，有苦同受，有难同当，有福同享，共同实现自己人生的美好理想。</p>
</section>
<section>
<h1>第二章：</h1>
<p>草船借箭是我国古典名著《三国演义》中赤壁之战的一个故事。借箭由周瑜故意提出(限十天造十万支箭)，机智的诸葛亮一眼识破是一条害人之计，
却淡定表示“只需要三天”。后来，有大雾天帮忙，诸葛亮再利用曹操多疑的性格，调了几条草船诱敌，终于借足十万支箭，立下奇功。</p>
</section>
</article>6、aside元素：
通常用來設定側邊欄。
同時也可以嵌套在article元素內部使用，作為主要內容的附屬信息，例如參考資料，名詞解釋等
也可以定義article元素以外的內容，前提是這些內容與article元素內容相關聯
<article class="film_review">
<header>
<h2>侏罗纪公园</h2>
</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標準時間
pubbdate屬性是一個可選標籤，可以讓搜尋引擎很方便就識別出文章日期，新聞的發表日期
<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結合使用，來顯示任務的進度
#meter元素：是HTML5新增的元素，用來建立一個度量條，用來表示度量衡的評定；通常與JavaScript結合使用
<form action="">
<!--max:规定当前进度条的最大值 ； value属性：设定进度条当前显示的默认值 form：规定进度条所属的一个或多个表单-->
<p>当前下载进度：</p>
<progress value="30" max="100">
</progress>
<meter value="40" max="100" min="10">
</meter>
</form>相關推薦：《html影片教學》
以上是html5佈局元素有哪幾個的詳細內容。更多資訊請關注PHP中文網其他相關文章！
