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