【教學(xué)課件】第10章-HTML5的結(jié)構(gòu)

1、.1在HTML5的新特性中，新增的結(jié)構(gòu)元素主要功能就是解決之前在HTML4中Div漫天飛舞的情況，增強(qiáng)網(wǎng)頁內(nèi)容的語義性，這對(duì)搜索引擎而言，將更好識(shí)別和組織索引內(nèi)容。合理地使用這種結(jié)構(gòu)元素，將極大地提高搜索結(jié)果的準(zhǔn)確度和體驗(yàn)。新增的結(jié)構(gòu)元素，從代碼上看，很容易看出主要是消除Div，即增強(qiáng)語義，強(qiáng)調(diào)HTML的語義化。.2新增的主體結(jié)構(gòu)元素 新增的非主體結(jié)構(gòu)元素 .3在HTML 5中，為了使文檔的結(jié)構(gòu)更加清晰明確，容易閱讀，增加了很多新的結(jié)構(gòu)元素，如頁眉、頁腳、內(nèi)容區(qū)塊等結(jié)構(gòu)元素。.4article元素可以包含獨(dú)立的內(nèi)容項(xiàng)，可以包含一個(gè)論壇帖子、一篇雜志文章、一篇博客文章、用戶評(píng)論等。這個(gè)元素可以將

2、信息各部分進(jìn)行任意分組，而不論信息原來的性質(zhì)。10.1.1 article10.1.1 article元素元素.5section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊。一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。但section元素也并非一個(gè)普通的容器元素，當(dāng)一個(gè)容器需要被重新定義樣式或者定義腳本行為的時(shí)候，還是推薦使用Div控制。10.1.2 section10.1.2 section元素元素.6nav元素在HTML5中用于包裹一個(gè)導(dǎo)航鏈接組，用于說明這是一個(gè)導(dǎo)航組，在同一個(gè)頁面中可以同時(shí)存在多個(gè)nav。10.1.3 nav10.1.3 nav元素元素.7aside元素用來表示當(dāng)前

3、頁面或文章的附屬信息部分，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條，以及其他類似的有別于主要內(nèi)容的部分。10.1.4 10.1.4 asasi idede元素元素.8除了以上幾個(gè)主要的結(jié)構(gòu)元素之外，HTML5內(nèi)還增加了一些表示邏輯結(jié)構(gòu)或附加信息的非主體結(jié)構(gòu)元素。.910.2.1 10.2.1 h he eaderader元素元素header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來放置整個(gè)頁面或頁面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，header內(nèi)也可以包含其他內(nèi)容，例如表格、表單或相關(guān)的Logo圖片。.1010.2.2 header10.2.2 header元素元素heade

4、r元素位于正文開頭，可以在這些元素中添加標(biāo)簽，用于顯示標(biāo)題?；旧希瑯?biāo)簽已經(jīng)足夠用于創(chuàng)建文檔各部分的標(biāo)題行。但是，有時(shí)候還需要添加副標(biāo)題或其他信息，以說明網(wǎng)頁或各節(jié)的內(nèi)容。.1110.2.3 footer10.2.3 footer元素元素footer通常包括其相關(guān)區(qū)塊的腳注信息，如作者、相關(guān)閱讀鏈接及版權(quán)信息等。footer元素和header元素使用基本上一樣，可以在一個(gè)頁面中使用多次，如果在一個(gè)區(qū)段后面加入footer元素，那么它就相當(dāng)于該區(qū)段的尾部了。.1210.2.4 address10.2.4 address元素元素address元素通常位于文檔的末尾，address元素用來在文檔中呈現(xiàn)聯(lián)系信息，包括文檔創(chuàng)建者的名字、站點(diǎn)鏈接、電子郵箱、真實(shí)地址、電話號(hào)碼等。address不只是用來呈現(xiàn)電子郵箱或真實(shí)地址這樣的“地址”概念，而應(yīng)該包括與文檔創(chuàng)建人相關(guān)的各類聯(lián)系方式。.1310.3經(jīng)典習(xí)題1. 1. 填空題填空題（1）_元素可以包含獨(dú)立的內(nèi)容項(xiàng)，可以包含一個(gè)論壇帖子、一篇雜志文章、一篇博客文章、用戶評(píng)論等。（2）_元素在HTML5中用于包裹一個(gè)導(dǎo)航鏈接組，用