述自身所包含的內(nèi)容。許多開發(fā)人員都會(huì)在自己的設(shè)計(jì)中使用側(cè)邊欄、頭部、尾部和區(qū)段( section)，正因?yàn)槿绱耍琀TML5規(guī)范引入了新的專用于劃分頁面不同邏輯區(qū)域的標(biāo)簽。我們可以在工作中使用這些新元素。有了HTML5的幫助，我們就能根除濫用div的現(xiàn)象了。 除了新的結(jié)構(gòu)標(biāo)簽，我們還要談?wù)刴eter元素，探討如何使用新的自定義數(shù)據(jù)屬性在元素中嵌入數(shù)據(jù)，進(jìn)而取代慣用的類劫持(hijacking class)或現(xiàn)有屬性。簡言之，我們要弄清如何在適當(dāng)?shù)那闆r下選擇合適的標(biāo)簽。 本章中，我們會(huì)探討以下新元素及其特性。① 口<header>定義頁面或區(qū)段的頭部。[C5、F3.6、IE8、S4、010] 口<footer>定義頁面或區(qū)段的尾部。[C5、F3.6、IE8、S4、010] 口<nav>定義頁面或區(qū)段的導(dǎo)航區(qū)域。[C5、F3.6、IE8、S4、010] 口<section>定義頁面的邏輯區(qū)域或內(nèi)容組合。[C5、F3.6、IE8、S4、010] 口<arti cle>定義正文或一篇完整的內(nèi)容。[C5、F3.6、IE8、S4、010] 口<aside>定義補(bǔ)充或相關(guān)內(nèi)容。[C5，F(xiàn)3.6、IE8、S4、010] 口自定義數(shù)據(jù)屬性(custom data attribute) -允許通過使用“data-”前綴向任意元素中 添加自定義的數(shù)據(jù)屬性。[所有瀏覽器都支持通過JavaScript的getAttribute0方法獲取 這些屬性。] 口<mmeter>描述指定范圍內(nèi)的數(shù)值。[C5、F3.5、S4、010] 口<progress>用于顯示實(shí)時(shí)進(jìn)度的控件。[本書出版時(shí)，尚無瀏覽器支持。]2.1 實(shí)例1：用語義化標(biāo)記重定義博客 在博客應(yīng)用中，濟(jì)南網(wǎng)站建設(shè)有大量內(nèi)容需要使用結(jié)構(gòu)化標(biāo)記來進(jìn)行組織。博客包括了頭部、尾部、多種導(dǎo)航（博文歸檔鏈接、至其他博客或網(wǎng)站的鏈接列表和內(nèi)部鏈接）、博文和回帖。下面，我們就以頂級(jí)優(yōu)秀的AwesomeCo公司的博客首頁為例，使用HTML5標(biāo)記編寫相應(yīng)原型。 我們的設(shè)計(jì)方案如圖2-1所示。這是一個(gè)非常典型的博客結(jié)構(gòu)，其頭部區(qū)域包含了水平導(dǎo)航。在主要的正文區(qū)域中，每篇文章都包括頭部和尾部。此外，文章還可能包括摘要或旁白。側(cè)邊欄包含了其他的導(dǎo)航元素。最后是頁面的尾部，它包含了聯(lián)系方式和版權(quán)信息。結(jié)構(gòu)本身并沒有任何新意，唯一不同的是，我們將使用語義化標(biāo)簽來代替以往大量使用的div櫟簽。①在后續(xù)的描述中，瀏覽器支持情況使用方括號(hào)加代碼縮寫和最低支持版本號(hào)的形式表示。縮寫代碼所表示的意義 分別是：C表示Google Chrome，F(xiàn)表示Firefox，IE表示Internet Explorer，0表示Opera，S表示Safari，IOS表 示使用移動(dòng)版Safari的iOS設(shè)備，A表示Android Browser。2.1.1 以正確的文檔類型聲明為基礎(chǔ)2.1 實(shí)例1：用語義化標(biāo)記重定義博客●13 若想使用HTML5的新元素，就需要讓瀏覽器和驗(yàn)證器能夠識(shí)別這些新標(biāo)簽。創(chuàng)建名為index.html的新頁面，寫入基本的HTML5模板： Download htm15newfags/index.hfmlLinel < ! DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; 5 <title>AwesomeCo Blog</title> 6 </head> 8 <body> 9</body> ]o</html> 注意示例中第1行的文檔類型聲明，它是HTML5的文檔類型聲明。如果經(jīng)常編寫網(wǎng)頁，下面這段冗長難記的XHTML文檔類型聲明一定不會(huì)讓你感到陌生：<!DOCTYPE html PUBLIC "~W3CflDTD XHTML l.0 Transitiona7//EN "http: flwww.w3.org/TRlxhtm71/DTDlxhtm71-transitiona7 .dtd">再來看看HTML5的文檔類型聲明： <! DOCTYPE html>桕比之下，HTML5的文檔類型聲明顯然更加簡單好記。 文檔類型聲明有兩個(gè)作用。第一，驗(yàn)證器依據(jù)它來判斷應(yīng)該采用何種驗(yàn)證規(guī)則去驗(yàn)證代碼。第二，文檔類型聲明能夠強(qiáng)制IE6、IE7和IE8以“標(biāo)準(zhǔn)模式”(standards mode)渲染頁面，在頁面需要兼容所有瀏覽器時(shí)，這點(diǎn)極其重要。HTML5文檔類型聲明具備了上述兩種作用，它甚至可以被IE6識(shí)別。2.1.2頭部 不要將頭部( header)與hl. h2. h3這樣的標(biāo)題(heading)混為一談，頭部可能包含從公司的Logo到搜索框在內(nèi)的各式各樣的內(nèi)容。目前，示例博客的頭部只包含了博客的標(biāo)題： Download htm15newtags/index.htmlLine l <header id=¨page_header¨> 2 <hl>AwesomeCo Blog!<／hl> 3 </header> 同一個(gè)頁面中可以包含多個(gè)header元素。每個(gè)獨(dú)立的區(qū)段或文章塊都可以擁有自己的頭部，
夢之網(wǎng)科技 http://www.aecov.cn