第4章---使用HTML5結(jié)構(gòu)標(biāo)簽ppt課件(全)

1、4.1構(gòu)建HTML 5頁(yè)面主體內(nèi)容在HTML 5頁(yè)面中，為了使文檔的結(jié)構(gòu)更加清晰明確。新增了幾個(gè)與頁(yè)眉、頁(yè)腳、內(nèi)容區(qū)塊等文檔結(jié)構(gòu)相關(guān)聯(lián)的文檔結(jié)構(gòu)標(biāo)簽。在本節(jié)中將向讀者詳細(xì)介紹HTML 5中在頁(yè)面的主體結(jié)構(gòu)方面新增的結(jié)構(gòu)標(biāo)簽。標(biāo)簽標(biāo)識(shí)文章網(wǎng)頁(yè)中常常出現(xiàn)大段的文章內(nèi)容，通過(guò)文章結(jié)構(gòu)元素可以將網(wǎng)頁(yè)中大段的文章內(nèi)容標(biāo)識(shí)出來(lái)，使網(wǎng)頁(yè)的代碼結(jié)構(gòu)更加整齊。在HTML5中新增了標(biāo)簽，使用該標(biāo)簽可以在網(wǎng)頁(yè)中定義獨(dú)立的內(nèi)容，包括文章、博客和用戶評(píng)論等內(nèi)容。標(biāo)簽標(biāo)識(shí)章節(jié)在網(wǎng)頁(yè)文檔中常常需要定義章節(jié)等特定的區(qū)域。在HTML5中新增了標(biāo)簽，該標(biāo)簽用于對(duì)頁(yè)面中的內(nèi)容進(jìn)行分區(qū)。一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。

2、標(biāo)簽標(biāo)識(shí)導(dǎo)航導(dǎo)航是每個(gè)網(wǎng)頁(yè)中都包含的重要元素之一，通過(guò)網(wǎng)站導(dǎo)航可以在網(wǎng)站中各頁(yè)面之間進(jìn)行跳轉(zhuǎn)。在HTML 5中新增了標(biāo)簽，使用該標(biāo)簽可以在網(wǎng)頁(yè)中定義網(wǎng)頁(yè)的導(dǎo)航部分。標(biāo)簽標(biāo)識(shí)輔助內(nèi)容側(cè)邊結(jié)構(gòu)元素可用于創(chuàng)建網(wǎng)頁(yè)中文章內(nèi)容的側(cè)邊欄內(nèi)容。在HTML5中新增了標(biāo)簽，標(biāo)簽用于創(chuàng)建其所處內(nèi)容之外的內(nèi)容，標(biāo)簽中的內(nèi)容應(yīng)該與其附近的內(nèi)容相關(guān)。標(biāo)簽標(biāo)識(shí)文章發(fā)布日期微格式是一種利用HTML的class屬性來(lái)對(duì)網(wǎng)頁(yè)添加附加信息的方法，附加信息如新聞事件發(fā)生的日期和時(shí)間、個(gè)人電話號(hào)碼、企業(yè)郵箱等。微格式并不是在HTML5之后才有的，在HTML5之前是它就和HTML結(jié)合使用了，但是在使用過(guò)程中發(fā)現(xiàn)在日期和時(shí)間的機(jī)器編碼上

3、出現(xiàn)了一些問(wèn)題，編碼過(guò)程中會(huì)產(chǎn)生一些歧義。HTML5新增了標(biāo)簽，通過(guò)該標(biāo)簽可以無(wú)歧義地、明確地對(duì)機(jī)器的日期和時(shí)間進(jìn)行編碼，并且以讓人易讀的方式展現(xiàn)出來(lái)。標(biāo)簽用于表示24小時(shí)中的某個(gè)時(shí)間或某個(gè)日期，當(dāng)使用標(biāo)簽表示時(shí)間時(shí)，允許設(shè)置帶有時(shí)差的表現(xiàn)方式。它可以定義很多格式的日期和時(shí)間。除了以上幾個(gè)主要的結(jié)構(gòu)元素之外，在HTML 5中還新增了一些表示邏輯結(jié)構(gòu)或附加信息的非主體結(jié)構(gòu)元素。4.2添加語(yǔ)義模塊標(biāo)簽添加標(biāo)題塊標(biāo)簽是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來(lái)放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，但也可以包含其他內(nèi)容，如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片，因此整個(gè)頁(yè)面的標(biāo)題應(yīng)該放在頁(yè)面的開(kāi)頭

4、。標(biāo)簽為標(biāo)題分組標(biāo)簽可以為標(biāo)題或者子標(biāo)題進(jìn)行分組，通常它與至標(biāo)簽組合使用，一個(gè)內(nèi)容塊中的標(biāo)題及子標(biāo)題可以通過(guò)標(biāo)簽組成一組。但是，如果文章只有一個(gè)主標(biāo)題，則不需要使用標(biāo)簽。標(biāo)簽添加頁(yè)腳HTML 5中新增了標(biāo)簽，標(biāo)簽中的內(nèi)容可能作為網(wǎng)頁(yè)或文章的注腳，如在父級(jí)內(nèi)容塊中添加注釋，或者頁(yè)中添加版權(quán)信息等。頁(yè)腳信息有很多形式，如作者、相關(guān)閱讀鏈接及版權(quán)信息等。標(biāo)簽添加聯(lián)系信息HTML 5中新增了標(biāo)簽，標(biāo)簽用來(lái)在HTML文檔中定義聯(lián)系信息，包括文檔作者、電子郵箱、地址、電話號(hào)碼等信息。最終文件：光盤最終文件第4章4-3.html視頻：光盤視頻第4章4-3.swfHTML 5中新增的文檔結(jié)構(gòu)元素非常適合制作文章或博客類的網(wǎng)站頁(yè)面。通過(guò)使用的HTML 5的結(jié)構(gòu)元素，HTML 5的文檔結(jié)構(gòu)比大量使用標(biāo)簽的HTML文檔結(jié)構(gòu)清晰、明確了很多。本節(jié)將綜合使用前面所介紹的HTML 5結(jié)構(gòu)元素制作一個(gè)文章頁(yè)面。實(shí)戰(zhàn)練習(xí)制作文章頁(yè)面4.3制作文章頁(yè)面本章重點(diǎn)向讀者介紹了HTML 5新增的各種文檔結(jié)構(gòu)標(biāo)簽的作用與使用方法，通過(guò)在HTML文