Web頁面元素和屬性第8章匯報(bào)人：***目錄CONTENT結(jié)構(gòu)元素頁面元素交互元素文本層次語義元素全局屬性本章導(dǎo)讀為了增加

Web應(yīng)用的實(shí)用性，HTML5擴(kuò)展了很多新技術(shù)，同時(shí)對(duì)傳統(tǒng)的

HTML文檔進(jìn)行了修改，使文檔結(jié)構(gòu)更加清晰明確，容易閱讀。增加了很多新的結(jié)構(gòu)元素，減少了復(fù)雜性，這樣既方便瀏覽者的訪問，也提高了

Web設(shè)計(jì)人員的開發(fā)速度。HTML5新增了27個(gè)元素，廢棄了16個(gè)元素，根據(jù)現(xiàn)有標(biāo)準(zhǔn)規(guī)范，把

HTML5的元素按優(yōu)先級(jí)等級(jí)定義為結(jié)構(gòu)性元素、頁面元素、行內(nèi)語義元素和交互性元素4大類，本章將詳細(xì)介紹

HTML5中的主體結(jié)構(gòu)元素和屬性。第一節(jié)PART.01結(jié)構(gòu)元素結(jié)構(gòu)性元素主要負(fù)責(zé)

Web的上下文結(jié)構(gòu)的定義，確保

HTML文檔的完整性，這類元素包括

header、article、aside、footer、figure和

figcaption，下面將詳細(xì)介紹這些結(jié)構(gòu)元素。8.1.1header元素header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來放置整個(gè)頁面或頁面的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，但也可以包含其他內(nèi)容，如數(shù)據(jù)表格、搜索表單或相關(guān)的

logo圖片，因此整個(gè)頁面的標(biāo)題應(yīng)該放在頁面的開頭。8.1.1header元素【例8.1】制作個(gè)人博客首頁，將整個(gè)頭部內(nèi)容都放在

header元素中，其代碼如下：8.1.1header元素運(yùn)行結(jié)果如圖8-1所示。圖8-1header元素8.1.1header元素【例8.2】一個(gè)文檔中可以多次使用

header元素，其代碼如下：8.1.1header元素運(yùn)行結(jié)果如圖8-2所示。圖8-2文檔中多次使用

header元素8.1.2article元素article元素用來表示文檔、頁面中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。它可以是一篇博客或報(bào)刊中的文章、一篇論壇帖子、一段用戶評(píng)論或獨(dú)立的插件等。除了內(nèi)容部分，article元素通常有自己的標(biāo)題，一般放在

header元素的里面，有時(shí)還有自己的腳注。當(dāng)article元素嵌套使用時(shí)，內(nèi)部的

article元素內(nèi)容必須和外部article元素內(nèi)容相關(guān)。article元素支持

HTML5全局屬性。8.1.2article元素【例8.3】使用

article元素設(shè)計(jì)網(wǎng)頁新聞頁面，其代碼如下：8.1.2article元素運(yùn)行效果如圖8-3所示。圖8-3article元素8.1.2article元素【例8.4】article元素嵌套使用，其代碼如下：8.1.2article元素運(yùn)行效果如圖8-4所示。圖8-4article元素的嵌套8.1.2article元素例8.4中整體內(nèi)容比較獨(dú)立、完整，因此對(duì)其使用

article元素。具體來說，示例又分為幾個(gè)部分，文章標(biāo)題放在

header元素中，正文放在

header元素后的

p元素中，然后再嵌套

article元素添加評(píng)論部分。8.1.3aside元素aside元素用來表示當(dāng)前頁面或文章的附屬信息部分，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條以及其他類似的有別于主要內(nèi)容的部分。aside

元素主要有以下兩種使用方法：8.1.3aside元素（1）作為主要內(nèi)容的附屬信息部分，包含在

article元素中，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的參考資料、名詞解釋等。8.1.3aside元素【例8.5】aside元素置于

article元素內(nèi)，作為與

article元素的內(nèi)容相關(guān)聯(lián)的信息，其代碼如下：8.1.3aside元素運(yùn)行效果如圖8-5所示。圖8-5aside元素使用18.1.3aside元素（2）作為頁面或站點(diǎn)全局的附屬部分，在

article元素外使用，最典型的形式是側(cè)邊欄，其中的內(nèi)容可以是友情鏈接，博客的其他文章列表、廣告單元等。8.1.3aside元素【例8.6】使用

aside元素為網(wǎng)頁添加一個(gè)友情鏈接版塊，其代碼如下：8.1.3aside元素運(yùn)行效果如圖8-6所示。圖8-6aside元素使用28.1.4footer元素footer元素可以作為內(nèi)容塊的腳注，如在父級(jí)內(nèi)容塊中添加注釋或在網(wǎng)頁中添加版權(quán)信息等。腳注形式有很多種形式，如作者、相關(guān)閱讀鏈接、版權(quán)信息等。在

HTML5之前，要描述腳注信息，一般使用

<divid="footer">標(biāo)簽定義包含框。HTML5添加

footer元素后，這種方式將不再使用，而是使用更加語義化的

footer元素來替代。8.1.4footer元素【例8.7】使用

footer元素為網(wǎng)頁添加版權(quán)信息欄，其代碼如下：8.1.4footer元素運(yùn)行效果如圖8-7所示。圖8-7footer元素8.1.4footer元素與

header元素一樣，頁面中也可以重復(fù)使用

footer元素，同時(shí)，可以為

article元素或

section元素添加

footer元素。8.1.4footer元素【例8.8】分別在

article和

body元素中添加

footer元素，其代碼如下：8.1.4footer元素運(yùn)行效果如圖8-8所示。圖8-8footer元素使用28.1.5figure和

figcaption元素figure元素是對(duì)多個(gè)元素進(jìn)行組合并展示，通常與

figcaption元素聯(lián)合使用。figure元素經(jīng)常用于圖片，但它也可以是一段代碼、音樂或者視頻。8.1.5figure和

figcaption元素【例8.9】使用

figure元素插入圖片，figcaption元素為圖片添加圖注，其代碼如下：8.1.5figure和

figcaption元素運(yùn)行效果如圖8-9所示。圖8-9figure和

figcaption使用18.1.5figure和

figcaption元素【例8.10】使用

figure元素插入多張圖片，figcaption元素為圖片添加圖注，其代碼如下：8.1.5figure和

figcaption元素運(yùn)行效果如圖8-10所示。圖8-10figure和

figcaption使用2第二節(jié)PART.02頁面元素頁面元素主要完成

Web頁面區(qū)域的劃分，確保內(nèi)容的有效分隔。這類元素主要包括：section元素、nav元素、address元素等。8.2.1section元素section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分區(qū)。一個(gè)

section元素通常由內(nèi)容和標(biāo)題組成。div元素也可以用來對(duì)頁面進(jìn)行分區(qū)，但

section元素并非一個(gè)普通的容器元素，當(dāng)一個(gè)容器需要被直接定義樣式或通過腳本定義行為時(shí)，推薦使用

div元素，而非section元素。div元素關(guān)注結(jié)構(gòu)的獨(dú)立性，而

section元素關(guān)注內(nèi)容的獨(dú)立性，section元素包含的內(nèi)容可以單獨(dú)存儲(chǔ)到數(shù)據(jù)庫中或輸出到Word文檔中。8.2.1section元素【例8.11】使用

section元素把電影排行榜的內(nèi)容進(jìn)行單獨(dú)分隔，在

HTML5之前，通常都是使用

div元素來分隔該塊內(nèi)容的，其代碼如下：8.2.1section元素運(yùn)行效果如圖8-11所示。圖8-11section元素8.2.1section元素article元素和

section元素都是

HTML5新增的元素，它們的功能與

div元素類似，都用來區(qū)分不同區(qū)域。它們的使用方法也相似，因此很多初學(xué)者會(huì)將其混用。HTML5之所以新增這兩種元素，就是為了更好地描述文檔的內(nèi)容，所以它們之間肯定是有區(qū)別的。article元素代表文檔、頁面或者應(yīng)用程序中獨(dú)立完整的可以被外部引用的內(nèi)容。article元素是一段獨(dú)立的內(nèi)容，所以

article元素通常包含頭部（header元素）和底部（footer元素）。8.2.1section元素section元素用于對(duì)網(wǎng)站或者應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊。一個(gè)

section元素通常由內(nèi)容以及標(biāo)題組成。section元素需要包含一個(gè)<hn>標(biāo)題元素，一般不用包含頭部（header元素）和底部（footer元素）。section元素的作用是對(duì)頁面上的內(nèi)容分塊處理，相鄰的section元素的內(nèi)容應(yīng)該是相關(guān)的，而不是像

article元素那樣獨(dú)立。事實(shí)上

article元素可以看成特殊的

section元素。article元素更強(qiáng)調(diào)獨(dú)立性、完整性，section元素更強(qiáng)調(diào)相關(guān)性。8.2.1section元素既然

article和

section元素是用來劃分區(qū)域的，又是

HTML5的新增元素，那么是否可以用

article和

section元素取代

div元素布局網(wǎng)頁呢？答案是否定的，div元素的用處就是用來布局網(wǎng)頁，劃分大的區(qū)域，HTML4中只有

div元素和

span元素，所以我們習(xí)慣地把div元素當(dāng)成一個(gè)容器。而

HTML5改變了這種用法，它讓

div元素的工作更純正。div元素就是用來布局大塊，在不同的內(nèi)容塊中，我們按照需要添加

article、section等內(nèi)容塊，并且顯示其中的內(nèi)容，這樣才是合理地使用這些元素。8.2.1section元素因此，在使用

section元素時(shí)應(yīng)該注意以下幾個(gè)問題：（1）不要將

section元素當(dāng)作設(shè)置樣式的頁面容器，對(duì)于此類操作應(yīng)該使用

div元素實(shí)現(xiàn)。（2）如果

article元素、aside元素或

nav元素更符合使用條件，不要使用

section。（3）不要為沒有標(biāo)題的內(nèi)容區(qū)塊使用

section元素。8.2.1section元素【例8.12】article元素和

section元素的混合使用，其代碼如下：8.2.1section元素運(yùn)行結(jié)果如圖8-12所示。圖8-12article元素和

section元素的混合使用8.2.1section元素在本案例中，首先可以看到整個(gè)版塊是一段獨(dú)立、完整的內(nèi)容，因此使用

article元素，該內(nèi)容是一篇關(guān)于

W3C的簡(jiǎn)介，該文章分為3段，每一段都有一個(gè)獨(dú)立的標(biāo)題，因此使用兩個(gè)

section元素。8.2.2nav元素nav元素是一個(gè)可以用作頁面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁面或當(dāng)前頁面的其他部分。并不是所有的鏈接組都要被放進(jìn)

nav元素，只需要將主要的、基本的鏈接組放進(jìn)

nav元素即可。例如，在頁腳中通常會(huì)有一組鏈接，包括服務(wù)條款、首頁和版權(quán)聲明等，這時(shí)使用

nav元素最恰當(dāng)，一個(gè)頁面可以擁有多個(gè)

nav元素，作為頁面整體或不同部分的導(dǎo)航。8.2.2nav元素具體來說，nav元素可以用于以下場(chǎng)合：（1）傳統(tǒng)導(dǎo)航條：常規(guī)網(wǎng)站都設(shè)置有不同層級(jí)的導(dǎo)航條，其作用是將當(dāng)前畫面跳轉(zhuǎn)到網(wǎng)站的其他主要頁面上。（2）側(cè)邊欄導(dǎo)航：現(xiàn)在主流博客網(wǎng)站及商品網(wǎng)站上都有側(cè)邊欄導(dǎo)航，其作用是將頁面從當(dāng)前文章或當(dāng)前商品跳轉(zhuǎn)到其他文章或其他商品頁面上。（3）頁內(nèi)導(dǎo)航：頁內(nèi)導(dǎo)航的作用是在本頁面幾個(gè)主要的組成部分之間進(jìn)行跳轉(zhuǎn)。（4）翻頁操作：翻頁操作是指在多個(gè)頁面的前后頁或博客網(wǎng)站的前后篇文章滾動(dòng)。8.2.2nav元素【例8.13】使用

nav元素，制作頁面導(dǎo)航，其代碼如下：8.2.2nav元素運(yùn)行效果如圖8-13所示。圖8-13nav元素制作導(dǎo)航8.2.2nav元素在本案例中，nav元素包含4個(gè)用于導(dǎo)航的超鏈接，即“網(wǎng)站首頁”“公司簡(jiǎn)介”“集團(tuán)新聞”和“聯(lián)系我們”。該導(dǎo)航可以用于全局導(dǎo)航，也可以作為區(qū)域?qū)Ш健?.2.2nav元素【例8.14】頁面中使用多個(gè)

nav元素布局導(dǎo)航，其代碼如下：8.2.2nav元素運(yùn)行效果如圖8-14所示。圖8-14頁面中可多處使用

nav元素8.2.2nav元素在本例中，第一個(gè)

nav元素用于頁面導(dǎo)航，將頁面跳轉(zhuǎn)到其他頁面，第二個(gè)

nav元素放置在

article元素中，表示在文章中進(jìn)行導(dǎo)航。除此外，nav元素還可以用于其他所有你認(rèn)為重要的、基本的導(dǎo)航鏈接組中。8.2.3address元素【例8.15】使用

address元素編輯文檔作者信息，其代碼如下：8.2.3address元素運(yùn)行效果如圖8-15所示。圖8-15address元素使用8.2.3address元素【例8.16】將

address元素置于

footer元素中，其代碼如下：8.2.3address元素運(yùn)行結(jié)構(gòu)如圖8-16所示。圖8-16在

footer元素中使用

address元素第三節(jié)PART.03交互元素交互元素主要用于功能性的內(nèi)容表達(dá)，會(huì)有一定的內(nèi)容和數(shù)據(jù)的關(guān)聯(lián)，是各種事件的基礎(chǔ)，這類元素包括

progress、meter、details和summary、menu、command，下面進(jìn)行詳細(xì)介紹。8.3.1progress元素progress元素用來表示進(jìn)度條，可通過對(duì)其

max、value等屬性進(jìn)行設(shè)置，完成對(duì)進(jìn)度條的表示和監(jiān)視，其屬性詳見表8-1。表8-1progress元素屬性屬性值描述maxnumber規(guī)定要完成的最大值，默認(rèn)情況下，進(jìn)度條范圍為0.0～1.0valuenumber規(guī)定當(dāng)前值，若

max=100，value=50，則進(jìn)度剛好一半。value屬性的存在決定

progress進(jìn)度條是否具有確定性，當(dāng)沒有

value時(shí)，瀏覽器進(jìn)度條會(huì)無限循環(huán)。8.3.1progress元素【例8.17】progress元素使用示例，其代碼如下：8.3.1progress元素運(yùn)行效果如圖8-17所示。圖8-17progress元素使用meter元素表示特定范圍內(nèi)的數(shù)值，可用于工資、數(shù)值、百分比等，其屬性詳見表8-2。8.3.2meter元素屬性值描述valuenumber定義度量值highnumber定義度量的值位于哪個(gè)點(diǎn)，被界定為高的值lownumber定義度量的值位于哪個(gè)點(diǎn)，被界定為低的值maxnumber定義最大值，默認(rèn)值是1minnumber定義最小值，默認(rèn)值為0optimumnumber定義什么樣的度量值為最佳的值表8-2meter元素屬性【例8.18】使用

meter元素顯示硬盤的使用情況，其代碼如下：8.3.2meter元素運(yùn)行效果如圖8-18所示。8.3.2meter元素圖8-18meter元素使用details元素用來表示一段具體的內(nèi)容，但是內(nèi)容默認(rèn)可能不顯示，details元素可以在

body元素的任何地方使用。下面是一個(gè)非常簡(jiǎn)單的例子。8.3.3details元素和

summary元素【例8.19】details元素示例，其代碼如下：8.3.3details元素和

summary元素運(yùn)行效果如圖8-19所示，為初始顯示效果，圖8-20為單擊右三角后的顯示效果：8.3.3details元素和

summary元素圖8-19初始顯示效果圖8-20單擊右三角后的顯示效果在上面的案例中，details元素中包含一個(gè)段落，它的作用和其他的

HTML分段元素類似。它定義了一個(gè)包含子元素的帶語義的分段元素，就好像使用

figure元素來包含圖片，表單元素來包含

input和textarea元素。它還可以嵌套其他的

details元素。提示：details元素通常都和

summary元素一起使用。但是

summary元素是可選的。8.3.3details元素和

summary元素【例8.20】details和

summary元素聯(lián)合使用，其代碼如下：8.3.3details元素和

summary元素運(yùn)行效果如圖8-21所示，為初始顯示效果，圖8-22為單擊右三角后的顯示效果：8.3.3details元素和

summary元素圖8-21初始顯示效果圖8-22單擊右三角后的顯示效果menu元素表示菜單列表，當(dāng)希望列出表單控件時(shí)使用該標(biāo)簽。menu元素的屬性詳見表8-3。8.3.4menu元素表8-3menu元素屬性屬性值描述autosubmittrue/false為

true時(shí)表單控件改變時(shí)自動(dòng)提交labelmenulabel為菜單定義一個(gè)可見的標(biāo)注typecontext上下文菜單，當(dāng)用戶右擊元素時(shí)將顯示上下文菜單toolbar工具欄菜單，主動(dòng)式命令，允許用戶立即與命令進(jìn)行交互list默認(rèn)值，列表菜單【例8.21】menu元素使用示例，其代碼如下：8.3.4menu元素運(yùn)行效果如圖8-23所示。8.3.4menu元素圖8-23menu元素第四節(jié)PART.04文本層次語義元素網(wǎng)頁中常常需要展示的一段文章或文字稱為文本內(nèi)容。為了使文本內(nèi)容更加形象、生動(dòng)，需要增加一些特殊的元素，用于突出文本間的層次關(guān)系或標(biāo)為重點(diǎn)，這樣的元素稱為文本層次語義元素。在

HTML5中，常用于文本層次語義的元素有

time、mark

和

cite。cite元素可以創(chuàng)建一個(gè)引用標(biāo)記，用于文檔中參考文獻(xiàn)的引用說明，如書名或文章名稱。一旦在文檔中使用了該標(biāo)記，被標(biāo)記的文檔內(nèi)容將以斜體的樣式展示在頁面中，以區(qū)別段落中的其他字符。8.4.1cite元素【例8.22】在頁面中，首先通過

<p>顯示一段文本，然后通過<cite>標(biāo)識(shí)這段文本所引用的書名，其代碼如下：8.4.1cite元素運(yùn)行效果如圖8-24所示。8.4.1cite元素圖8-24cite元素mark元素的主要功能是在文本中高亮顯示某個(gè)或某幾個(gè)字符，旨在引起用戶注意。其使用方法與

em和

strong元素有相似之處，但相比而言，HTML5中新增的

mark元素在突出顯示時(shí)，更加隨意與靈活。8.4.2mark元素【例8.23】在頁面中使用mark元素，對(duì)“素質(zhì)”“過硬”和“務(wù)實(shí)”3個(gè)詞突出顯示，其代碼如下：8.4.2mark元素運(yùn)行效果如圖8-25所示。8.4.2mark元素圖8-25cite元素time元素是

HTML5新增加的一個(gè)標(biāo)記，用于無歧義地、明確地對(duì)機(jī)器日期和時(shí)間進(jìn)行編碼，并且以人們易讀的方式展現(xiàn)它。該元素可以代表24小時(shí)中的某一時(shí)刻或某個(gè)日期，表示時(shí)刻時(shí)允許有時(shí)間差?？梢远x很多時(shí)間和日期格式，例如：8.4.3time元素說明：搜索引擎讀到的部分在

datetime屬性里，而元素的開始標(biāo)記和結(jié)束標(biāo)記中間的部分是顯示在網(wǎng)頁上的。datetime屬性中的日期與時(shí)間要用“T”字母間隔，時(shí)間加上“Z”字母表示給機(jī)器編碼時(shí)使用

UTC（世界統(tǒng)一時(shí)間）時(shí)間。如果加上時(shí)間差，則表示向機(jī)器編碼另一個(gè)地區(qū)的時(shí)間，如果是編碼本地時(shí)間，則不需要添加時(shí)間差。8.4.3time元素time元素還有一個(gè)

pubdate屬性，這是一個(gè)可選的

boolean值屬性，它可以用到

article

元素中的

time元素上，意思是

time元素代表文章（article元素的內(nèi)容）或者整個(gè)網(wǎng)頁的發(fā)布日期。8.4.3time元素【例8.24】使用

pubdate屬性為文檔添加引擎檢索發(fā)布時(shí)間，其代碼如下：8.4.3time元素運(yùn)行效果如圖8-26所示。8.4.3time元素圖8-26time元素第五節(jié)PART.05全局屬性HTML屬性能夠賦予元素含義和語境。全局屬性可用于任何HTML5元素。下面介紹幾個(gè)常用的全局屬性

hidden、spellcheck、contenteditable、contextmenu。在

HTML5中，所有的元素都允許有一個(gè)

hidden屬性。該屬性類似于

input元素中的

hidden屬性，功能是通知瀏覽器不渲染該元素，使該元素處于不可見狀態(tài)，但是元素中的內(nèi)容還是瀏覽器創(chuàng)建的，也就是說頁面裝載后允許使用

JavaScript腳本將該屬性取消，取消后該元素變?yōu)榭梢姞顟B(tài)，同時(shí)元素中的內(nèi)容也即時(shí)顯示出現(xiàn)，hidden屬性是一個(gè)布爾值屬性，當(dāng)設(shè)為

true時(shí)，元素處于不可見狀態(tài)；當(dāng)設(shè)為

false時(shí)，元素處于可見狀態(tài)。其語法格式如下：<elementhidden="hidden"