（三）html5的结构
生活随笔
收集整理的這篇文章主要介紹了
（三）html5的结构
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、新增的主題結構元素
在html5中，為了使文檔的結構更加清晰明確，追加了幾個頁眉。頁腳、內容區塊等文檔結構相關的結構元素，
1、article元素
article元素代表文檔、頁面或者應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇博客揮著報刊中的文章，一片論壇中的帖子或者其他任何獨立的內容；除了內容部分，一個article元素通常有他自己的標題（一般放在一個header元素中），有時還有自己的腳注。
<article>
<header>
<h1>蘋果</h1>
<p>發表日期：<time?pubdate="pubdate">2015/6/30</time></p>
</header>
<p><b>蘋果</b>是一種植物類水果，多次花果。。。（正文）</p>
<footer>
<p><small>著作權歸劉夢冰所有</small></p>
</footer>
</article>
article元素是可以嵌套使用的，內層的內容在原則上需要與外層的內容相關聯（與下面section配合起來使用）；
另外，article元素也可以用來表示插件，它的作用是使插件看起來好像內嵌在頁面中一樣：
<article>
<h1>蘋果</h1>
<object>
<param name="allowFullScreen"?value="true"></param>
<embed src="#" width="600"?height="395"></embed>
</object>
</article>
2、section元素
section元素用于對網站或應用程序中頁面上的內容進行分塊。一個section元素通常由內容及其標題組成。但section元素并非一個普通的容器元素；當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div而非section元素。section元素中的內容可以單獨存儲到數據庫中或者輸出到word文檔中。
<section>
<h1>蘋果</h1>
<p><b>蘋果</b>是一種植物類水果。。。（正文）</p>
</section>
section元素的作用是對頁面上的內容進行分塊，或者說對文章進行分段，請不要與“有著自己完整的、獨立的內容的”article元素混淆。section元素強調分段或者分塊，而article強調獨立性。在html5中，你可以將所有頁面的從屬部分，譬如導航條、菜單、版權說明等包含在一個統一的頁面中，以便統一使用CSS樣式來進行裝飾。
section元素的使用禁忌：
（1）不要將section元素用作設置樣式的頁面容器，那是div的工作；
（2）如果article元素、aside元素或者nav元素更符合使用條件，不要使用section元素；
（3）不要為沒有標題的內容區塊使用section元素。
section與article結合使用：
<article>
<h1>蘋果</h1>
<p>發表日期：<time?pubdate="pubdate">2015/6/30</time></p>
<section>
<h2>紅富士蘋果</h2>
<p>紅富士蘋果是從普通的芽變中選取的。。。</p>
</section>
<section>
<h2>國光蘋果</h2>
<p>國光蘋果，又名小國光，原產于美國。。。</p>
</section>
</article>
=====================================================
<section>
<h1>水果</h1>
<article>
<h2>蘋果</h2>
<p>蘋果是一種水果。。。</p>
</article>
<article>
<h2>橘子</h2>
<p>橘子是一種水果。。。</p>
</article>
<article>
<h2>香蕉</h2>
<p>香蕉是一種水果。。。</p>
</article>
</section>
3、nav元素
nav元素是一個可以用作頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或者當前頁面的其他部位。并不是所有的鏈接組都要被放進nav元素，只需要將主要的、基本的鏈接組放進nav元素即可。一個頁面中可以擁有多個nav元素，作為頁面整體或不同部分的導航。
<body>
<h1>水果</h1>
<!-- 用于頁面導航，將頁面跳轉到其他頁面上去?-->
<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 id="HTML5">
<h1>HTML5的歷史</h1>
<p>講述HTML5的歷史</p>
</section>
<section id="CSS3">
<h1>CSS3的歷史</h1>
<p>講述CSS3的歷史</p>
</section>
<footer>
<p>
<a href="#">編輯</a>
<a href="#">刪除</a>
<a href="#">重命名</a>
</p>
</footer>
</article>
<footer>
<p><small>版權所有：劉夢冰</small></p>
</footer>
</body>
總結nav元素可以用于以下場合：
（1）傳統導航條。現在主流網站上都有不同層級的導航條，起作用是將當前頁面跳轉到網站的其他頁面上；
（2）側邊欄導航。作用是將頁面從當前文章或當前商品跳轉到其他文章或者其他商品頁面上去；
（3）頁內導航。作者是在本頁面幾個主要的組成部分之間進行跳轉；
（4）翻頁操作。翻頁操作是指在多個頁面的前后頁或博客網站的前后篇文章滾動。
注意：在html5中不要用menu元素代替nav元素；menu元素是用在一系列發出命令的菜單上，是一種交互性的元素，或者更確切地說是使用在web應用程序中的。
4、aside元素
表示當前頁面或者文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其他類似的有別于主要內容的部分。
aside元素主要有以下兩種使用方法：
(1)被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的參考資料、名詞解釋等；
（2）在article元素之外使用，作為頁面或者站點全局的附屬信息部分。最典型的形式就是側邊欄，其中的個內容可以是友情鏈接，博客中的其他文章列表、廣告單元等。
<aside>
<nav>
<h2>評論</h2>
<ul>
<li><a href="#">Tom</a> ?10-24 ?14:28</li>
<li>
<a href="#">Lily</a> ?10-24 ?14:28<br/>?
<a href="#">作者見解獨到，文章看了很受用！</a>
</li>
</ul>
</nav>
</aside>
5、time元素與微格式
<time date="2015-6-30">2015年6月30日</time>
<time date="2015-6-30T20:00">2015年6月30日晚上8點(date屬性中日期與時間之間要用T文字分隔，T表示時間)</time>
<time date="2015-6-30T20:00z">2015年6月30日晚上8點(加上Z文字表示給機器編碼時使用UTC標準時間)</time>
<time date="2015-6-30T20:00+09::00">2015年6月30日晚上8點的美國時間(加上了時差)</time>
6、pubdate屬性
可選的boolean值的屬性，用到time元素上，代表文章（article元素）或者整個網頁的發布日期。
二、新增的非主題結構元素
1、header元素
header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或者頁面內容區塊的標題，但也可以放置其他內容，例如數據表格、搜索表單或者相關的logo圖片。注意：一個網頁內并未限制header元素的個數，可以擁有多個，可以為每一個區塊加一個header元素。
<header><h1>頁面標題</h1></header>
2、hgroup元素
hgroup元素是將標題以及子標題進行分組的元素。通常會降h1-h6元素進行分組，譬如：一個內容區塊的標題及其子標題算一組；
<article>
<header>
<hgroup>
<h1>文章主標題</h1>
<h2>文章子標題</h2>
</hgroup>
</header>
<p>文章正文</p>
</article>
3、footer元素
footer元素可以作為其上層父級內容區塊或是一個跟區塊的腳注。
<footer>
<ul>
<li>版權信息</li>
<li>站點地圖</li>
<li>聯系方式</li>
</ul>
</footer>
4、address元素
address元素用來在文檔中呈現聯系信息，包括文檔作者或者文檔維護者的名字。網站鏈接、電子郵箱、真實地址、電話號碼等。
<address>
<a href="#">Tom</a>
<a href="#">Mary</a>
<a href="#">Lily</a>
在HTML5中，使用各種結構元素所描述出來的整個網頁的層次結構就是網頁的大綱。因此，在組織這份大綱時不能使用div元素，因為div元素只能作為容器，在需要對網頁中某個局部使用整體樣式時才使用。
大綱的編排規則：
1、顯示編排內容區塊（更加清晰明確）
顯示編排是指明確使用section等元素創建文檔結構，再每個內容區塊內使用標題（h1-h6、hgroup等）；
2、隱式編排內容區塊
所謂隱式編排，是指不明確使用section等元素，而是根據頁面中所書寫的各級標題（h1-h6、hgroup等）把各級內容區塊自動創建出來。因為html5分析器只要看到書寫了某個級別的標題，就會判斷存在相應的內容區塊。
3、標題分級
不同的標題有不同的級別，h1級別最高，h6級別最低。在進行隱式編排時按如下規則自動生成內容區塊。
（1）如果新出現的標題比上一個標題級別低，將生成下級內容區塊；
（2）如果新出現的標題比上一個標題級別高，或者兩者級別相等，將生成新的內容區塊。
? ?因為隱式編排容易使自動生成的整個文檔結構與所想要的文檔結構不一樣，而且也容易引起文檔結構的混亂，所以盡量使用顯示編排。
4、不同內容區塊可以使用相同級別的標題
不同內容區塊可以使用相同級別的標題。例如：父內容區塊與子內容區塊可以使用相同的級別的標題h1.這樣做的好處是：每個級別的標題都可以單獨設計，如果既需要“整個網頁的標題”又需要“文章的標題”，這樣做將會帶來很大的便利。
5、網頁編排示例
<!DOCTYPE html>
<head>
<title>網頁編排示例</title>
<meta charset="utf-8"></meta>
</head>
<body>
<!-- 網頁標題 -->
<header>
<h1>網頁標題</h1>
<!-- 網站導航鏈接 -->
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">幫助</a></li>
</ul>
</nav>
</header>
<!-- 文章正文 -->
<article>
<hgroup>
<h1>文章主標題</h1>
<h2>文章子標題</h2>
</hgroup>
<p>文章正文</p>
<!-- 文章評論 -->
<section class="comments">
<article>
<h1>評論標題</h1>
<p>評論正文</p>
</article>
</section>
</article>
<!-- 版權信息 -->
<footer>
<small>版權所有：劉夢冰</small>
</footer>
</body>
6、對新的結構元素使用樣式
因為很多瀏覽器尚未對html5中新增的結構元素提供支持，我們無法知道客戶端使用的瀏覽器是否支持這些元素，所以需要使用CSS追加如下聲明，目的是通知瀏覽器頁面中使用的HTML5中的新增元素都以塊方式顯示。
//追加block說明
article,aside,dialog,figure,footer,header,legend,nav,section{
display:block;
}
//正常使用樣式
nav{ float;left;width:20%; }
article{ float:right;width:79%; }
另外，IE8之前的瀏覽器是不支持使用CSS的方法來使用這些尚未支持的結構元素的，為了在IE瀏覽器中正常使用這些結構元素，需要使用javascript腳本，如下所示：
<!-- 在腳本中創建元素 -->
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
</script>
<style>
<!-- 正常使用樣式 -->
nav{ float;left;width:20%; }
article{ float:right;width:79%; }
</style>
? 雖然這段javascript腳本在其他瀏覽器中是不需要的，但是它不會對這些瀏覽器造成不良的影響。另外，在IE9之后，就不要這段腳本了。
在html5中，為了使文檔的結構更加清晰明確，追加了幾個頁眉。頁腳、內容區塊等文檔結構相關的結構元素，
1、article元素
article元素代表文檔、頁面或者應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇博客揮著報刊中的文章，一片論壇中的帖子或者其他任何獨立的內容；除了內容部分，一個article元素通常有他自己的標題（一般放在一個header元素中），有時還有自己的腳注。
<article>
<header>
<h1>蘋果</h1>
<p>發表日期：<time?pubdate="pubdate">2015/6/30</time></p>
</header>
<p><b>蘋果</b>是一種植物類水果，多次花果。。。（正文）</p>
<footer>
<p><small>著作權歸劉夢冰所有</small></p>
</footer>
</article>
article元素是可以嵌套使用的，內層的內容在原則上需要與外層的內容相關聯（與下面section配合起來使用）；
另外，article元素也可以用來表示插件，它的作用是使插件看起來好像內嵌在頁面中一樣：
<article>
<h1>蘋果</h1>
<object>
<param name="allowFullScreen"?value="true"></param>
<embed src="#" width="600"?height="395"></embed>
</object>
</article>
2、section元素
section元素用于對網站或應用程序中頁面上的內容進行分塊。一個section元素通常由內容及其標題組成。但section元素并非一個普通的容器元素；當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div而非section元素。section元素中的內容可以單獨存儲到數據庫中或者輸出到word文檔中。
<section>
<h1>蘋果</h1>
<p><b>蘋果</b>是一種植物類水果。。。（正文）</p>
</section>
section元素的作用是對頁面上的內容進行分塊，或者說對文章進行分段，請不要與“有著自己完整的、獨立的內容的”article元素混淆。section元素強調分段或者分塊，而article強調獨立性。在html5中，你可以將所有頁面的從屬部分，譬如導航條、菜單、版權說明等包含在一個統一的頁面中，以便統一使用CSS樣式來進行裝飾。
section元素的使用禁忌：
（1）不要將section元素用作設置樣式的頁面容器，那是div的工作；
（2）如果article元素、aside元素或者nav元素更符合使用條件，不要使用section元素；
（3）不要為沒有標題的內容區塊使用section元素。
section與article結合使用：
<article>
<h1>蘋果</h1>
<p>發表日期：<time?pubdate="pubdate">2015/6/30</time></p>
<section>
<h2>紅富士蘋果</h2>
<p>紅富士蘋果是從普通的芽變中選取的。。。</p>
</section>
<section>
<h2>國光蘋果</h2>
<p>國光蘋果，又名小國光，原產于美國。。。</p>
</section>
</article>
=====================================================
<section>
<h1>水果</h1>
<article>
<h2>蘋果</h2>
<p>蘋果是一種水果。。。</p>
</article>
<article>
<h2>橘子</h2>
<p>橘子是一種水果。。。</p>
</article>
<article>
<h2>香蕉</h2>
<p>香蕉是一種水果。。。</p>
</article>
</section>
3、nav元素
nav元素是一個可以用作頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或者當前頁面的其他部位。并不是所有的鏈接組都要被放進nav元素，只需要將主要的、基本的鏈接組放進nav元素即可。一個頁面中可以擁有多個nav元素，作為頁面整體或不同部分的導航。
<body>
<h1>水果</h1>
<!-- 用于頁面導航，將頁面跳轉到其他頁面上去?-->
<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 id="HTML5">
<h1>HTML5的歷史</h1>
<p>講述HTML5的歷史</p>
</section>
<section id="CSS3">
<h1>CSS3的歷史</h1>
<p>講述CSS3的歷史</p>
</section>
<footer>
<p>
<a href="#">編輯</a>
<a href="#">刪除</a>
<a href="#">重命名</a>
</p>
</footer>
</article>
<footer>
<p><small>版權所有：劉夢冰</small></p>
</footer>
</body>
總結nav元素可以用于以下場合：
（1）傳統導航條。現在主流網站上都有不同層級的導航條，起作用是將當前頁面跳轉到網站的其他頁面上；
（2）側邊欄導航。作用是將頁面從當前文章或當前商品跳轉到其他文章或者其他商品頁面上去；
（3）頁內導航。作者是在本頁面幾個主要的組成部分之間進行跳轉；
（4）翻頁操作。翻頁操作是指在多個頁面的前后頁或博客網站的前后篇文章滾動。
注意：在html5中不要用menu元素代替nav元素；menu元素是用在一系列發出命令的菜單上，是一種交互性的元素，或者更確切地說是使用在web應用程序中的。
4、aside元素
表示當前頁面或者文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其他類似的有別于主要內容的部分。
aside元素主要有以下兩種使用方法：
(1)被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的參考資料、名詞解釋等；
（2）在article元素之外使用，作為頁面或者站點全局的附屬信息部分。最典型的形式就是側邊欄，其中的個內容可以是友情鏈接，博客中的其他文章列表、廣告單元等。
<aside>
<nav>
<h2>評論</h2>
<ul>
<li><a href="#">Tom</a> ?10-24 ?14:28</li>
<li>
<a href="#">Lily</a> ?10-24 ?14:28<br/>?
<a href="#">作者見解獨到，文章看了很受用！</a>
</li>
</ul>
</nav>
</aside>
5、time元素與微格式
<time date="2015-6-30">2015年6月30日</time>
<time date="2015-6-30T20:00">2015年6月30日晚上8點(date屬性中日期與時間之間要用T文字分隔，T表示時間)</time>
<time date="2015-6-30T20:00z">2015年6月30日晚上8點(加上Z文字表示給機器編碼時使用UTC標準時間)</time>
<time date="2015-6-30T20:00+09::00">2015年6月30日晚上8點的美國時間(加上了時差)</time>
6、pubdate屬性
可選的boolean值的屬性，用到time元素上，代表文章（article元素）或者整個網頁的發布日期。
二、新增的非主題結構元素
1、header元素
header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或者頁面內容區塊的標題，但也可以放置其他內容，例如數據表格、搜索表單或者相關的logo圖片。注意：一個網頁內并未限制header元素的個數，可以擁有多個，可以為每一個區塊加一個header元素。
<header><h1>頁面標題</h1></header>
2、hgroup元素
hgroup元素是將標題以及子標題進行分組的元素。通常會降h1-h6元素進行分組，譬如：一個內容區塊的標題及其子標題算一組；
<article>
<header>
<hgroup>
<h1>文章主標題</h1>
<h2>文章子標題</h2>
</hgroup>
</header>
<p>文章正文</p>
</article>
3、footer元素
footer元素可以作為其上層父級內容區塊或是一個跟區塊的腳注。
<footer>
<ul>
<li>版權信息</li>
<li>站點地圖</li>
<li>聯系方式</li>
</ul>
</footer>
4、address元素
address元素用來在文檔中呈現聯系信息，包括文檔作者或者文檔維護者的名字。網站鏈接、電子郵箱、真實地址、電話號碼等。
<address>
<a href="#">Tom</a>
<a href="#">Mary</a>
<a href="#">Lily</a>
</address>
在HTML5中，使用各種結構元素所描述出來的整個網頁的層次結構就是網頁的大綱。因此，在組織這份大綱時不能使用div元素，因為div元素只能作為容器，在需要對網頁中某個局部使用整體樣式時才使用。
大綱的編排規則：
1、顯示編排內容區塊（更加清晰明確）
顯示編排是指明確使用section等元素創建文檔結構，再每個內容區塊內使用標題（h1-h6、hgroup等）；
2、隱式編排內容區塊
所謂隱式編排，是指不明確使用section等元素，而是根據頁面中所書寫的各級標題（h1-h6、hgroup等）把各級內容區塊自動創建出來。因為html5分析器只要看到書寫了某個級別的標題，就會判斷存在相應的內容區塊。
3、標題分級
不同的標題有不同的級別，h1級別最高，h6級別最低。在進行隱式編排時按如下規則自動生成內容區塊。
（1）如果新出現的標題比上一個標題級別低，將生成下級內容區塊；
（2）如果新出現的標題比上一個標題級別高，或者兩者級別相等，將生成新的內容區塊。
? ?因為隱式編排容易使自動生成的整個文檔結構與所想要的文檔結構不一樣，而且也容易引起文檔結構的混亂，所以盡量使用顯示編排。
4、不同內容區塊可以使用相同級別的標題
不同內容區塊可以使用相同級別的標題。例如：父內容區塊與子內容區塊可以使用相同的級別的標題h1.這樣做的好處是：每個級別的標題都可以單獨設計，如果既需要“整個網頁的標題”又需要“文章的標題”，這樣做將會帶來很大的便利。
5、網頁編排示例
<!DOCTYPE html>
<head>
<title>網頁編排示例</title>
<meta charset="utf-8"></meta>
</head>
<body>
<!-- 網頁標題 -->
<header>
<h1>網頁標題</h1>
<!-- 網站導航鏈接 -->
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">幫助</a></li>
</ul>
</nav>
</header>
<!-- 文章正文 -->
<article>
<hgroup>
<h1>文章主標題</h1>
<h2>文章子標題</h2>
</hgroup>
<p>文章正文</p>
<!-- 文章評論 -->
<section class="comments">
<article>
<h1>評論標題</h1>
<p>評論正文</p>
</article>
</section>
</article>
<!-- 版權信息 -->
<footer>
<small>版權所有：劉夢冰</small>
</footer>
</body>
6、對新的結構元素使用樣式
因為很多瀏覽器尚未對html5中新增的結構元素提供支持，我們無法知道客戶端使用的瀏覽器是否支持這些元素，所以需要使用CSS追加如下聲明，目的是通知瀏覽器頁面中使用的HTML5中的新增元素都以塊方式顯示。
//追加block說明
article,aside,dialog,figure,footer,header,legend,nav,section{
display:block;
}
//正常使用樣式
nav{ float;left;width:20%; }
article{ float:right;width:79%; }
另外，IE8之前的瀏覽器是不支持使用CSS的方法來使用這些尚未支持的結構元素的，為了在IE瀏覽器中正常使用這些結構元素，需要使用javascript腳本，如下所示：
<!-- 在腳本中創建元素 -->
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
</script>
<style>
<!-- 正常使用樣式 -->
nav{ float;left;width:20%; }
article{ float:right;width:79%; }
</style>
? 雖然這段javascript腳本在其他瀏覽器中是不需要的，但是它不會對這些瀏覽器造成不良的影響。另外，在IE9之后，就不要這段腳本了。
總結
以上是生活随笔為你收集整理的（三）html5的结构的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （一）html5中的新增元素和废除元素
- 下一篇： （四）Canvas API方法和属性汇总