【教學課件】第10章-HTML5的結構

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

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

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

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