1、任務(wù)3 : 運用HTML5的新標(biāo)簽網(wǎng)頁設(shè)計與制作(HTML+CSS+Javascript)網(wǎng)頁設(shè)計與制作課程組目標(biāo)TARGET知識目標(biāo)了解HTML5新標(biāo)簽；掌握結(jié)構(gòu)性標(biāo)簽；掌握級塊標(biāo)簽；掌握頁面交互標(biāo)簽；掌握行內(nèi)語義性標(biāo)簽;掌握HTML5的全局屬性。 1 任務(wù)描述 2 結(jié)構(gòu)性標(biāo)簽 3 分組標(biāo)簽 4 頁面交互標(biāo)簽 5 行內(nèi)語義性標(biāo)簽 7 綜合實例 8 任務(wù)實施 9 任務(wù)拓展 6 HTML5的全局屬性1任務(wù)描述Part使用HTML5新標(biāo)簽優(yōu)化網(wǎng)頁 依據(jù)草圖實現(xiàn)基本的HTML只是實現(xiàn)前端頁面的一小步，HTML5 中所有的標(biāo)簽都是有結(jié)構(gòu)性的。 本任務(wù)就是使用HTML5新標(biāo)簽來優(yōu)化門戶網(wǎng)站主頁的頁面文檔

2、。任務(wù)描述：使用HTML5新標(biāo)簽優(yōu)化網(wǎng)頁2HTML5結(jié)構(gòu)性標(biāo)簽PartHTML5結(jié)構(gòu)性標(biāo)簽section標(biāo)簽nav標(biāo)簽article標(biāo)簽aside標(biāo)簽header標(biāo)簽footer標(biāo)簽1 認知結(jié)構(gòu)性標(biāo)簽傳統(tǒng)DIV+CSS布局HTML5結(jié)構(gòu)標(biāo)簽結(jié)構(gòu)性標(biāo)簽其實就是語義化的html網(wǎng)頁框架。結(jié)構(gòu)性標(biāo)簽，標(biāo)簽本質(zhì)上和div沒有任何區(qū)別。借助id與class，通過CSS樣式來實現(xiàn)頁面布局，沒有標(biāo)準(zhǔn)的規(guī)范，搜索引擎只能去猜測某部分的功能，文檔結(jié)構(gòu)和內(nèi)容不夠清晰。/舉例界面舉例演示【實例3-1】HTML5結(jié)構(gòu)性標(biāo)簽。headernavarticlesectionasidefooter定義和用法標(biāo)簽用于對網(wǎng)頁的

3、內(nèi)容進行分區(qū)、分塊，定義文檔中的節(jié)。舉例：section是什么？用于對網(wǎng)頁的內(nèi)容進行分區(qū)、分塊，定義文檔中的節(jié)比如章節(jié)、頁眉、頁腳或文檔中的其它部分。一般情況下，section標(biāo)簽通常由標(biāo)題和內(nèi)容組成。注 意標(biāo)簽表示一段專題性的內(nèi)容，一般會帶有標(biāo)題，沒有標(biāo)題的內(nèi)容區(qū)塊不要使用section標(biāo)簽定義。根據(jù)實際情況，如果article標(biāo)簽、aside標(biāo)簽或nav標(biāo)簽更符合使用條件，那么不要使用section標(biāo)簽。當(dāng)一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div標(biāo)簽而非section。舉例演示定義和用法是一個特殊的section標(biāo)簽，它比section具有更明確的語義，它代表一個獨立

4、的、完整的相關(guān)內(nèi)容塊，可獨立于頁面其它內(nèi)容使用。例如：新聞提供者的一篇新的文章、一篇博客、一個用戶評價等。這是一篇介紹HTML 5結(jié)構(gòu)標(biāo)簽的文章注 意舉例：這是一篇介紹HTML 5結(jié)構(gòu)標(biāo)簽的文章HTML 5的歷史2017.02.20 文章內(nèi)容詳情Article標(biāo)簽會有標(biāo)題部分，通常可以包含header，有時也會包含footer。article可以嵌套，內(nèi)層的article對外層的article標(biāo)簽有隸屬關(guān)系。例如，一篇博客的文章，可以用article顯示，然后一些評論也可以以article的形式嵌入其中。舉例演示定義和用法nav標(biāo)簽代表頁面的一個部分，是一個可以作為頁面導(dǎo)航的鏈接組，是navi

5、gator的縮寫。舉例： 首頁 學(xué)校新聞 院系設(shè)置 師資隊伍 nav標(biāo)簽可以應(yīng)用于傳統(tǒng)導(dǎo)航條、側(cè)邊欄導(dǎo)航、頁內(nèi)導(dǎo)航、翻頁操作等場合。舉例演示定義和用法aside標(biāo)簽用來裝載非正文的內(nèi)容，被視為頁面里面一個單獨的部分。舉例：文章標(biāo)題文章內(nèi)容附屬信息部分aside標(biāo)簽可以被包含在article標(biāo)簽內(nèi)作為主要內(nèi)容的附屬信息。也可以在article標(biāo)簽之外使用，作為頁面或站點全局的附屬信息部分。例如廣告、友情鏈接、側(cè)邊欄、導(dǎo)航條等等。舉例演示定義和用法header標(biāo)簽定義文檔的頁眉，通常是一些引導(dǎo)和導(dǎo)航信息。舉例：網(wǎng)站標(biāo)題網(wǎng)站副標(biāo)題header標(biāo)簽不局限于寫在網(wǎng)頁頭部，也可以寫在網(wǎng)頁內(nèi)容里面。通常標(biāo)簽

6、至少包含（但不局限于）一個標(biāo)題標(biāo)記（-），還可以包括標(biāo)簽，還可以包括表格內(nèi)容、標(biāo)識Logo、搜索表單、導(dǎo)航等。定義和用法footer標(biāo)簽定義section或document的頁腳，包含了與頁面、文章或是部分內(nèi)容有關(guān)的信息，比如說文章的作者或者日期。舉例：Copyright優(yōu)博文化傳播有限公司作為頁面的頁腳時，一般包含了版權(quán)、相關(guān)文件和鏈接。footer標(biāo)簽和標(biāo)簽使用基本一樣，可以在一個頁面中多次使用，也可以在article標(biāo)簽或者section標(biāo)簽中添加footer標(biāo)簽，那么它就相當(dāng)于該區(qū)段的頁腳了。3分組標(biāo)簽Partfigure 標(biāo)簽和figcaption標(biāo)簽hgroup標(biāo)簽dialog標(biāo)簽

7、分組標(biāo)簽主要完成web頁面區(qū)域的劃分，確保內(nèi)容的有效分隔。主要包括:figure標(biāo)簽、figcaption標(biāo)簽、 hgroup標(biāo)簽、dialog標(biāo)簽等。分組標(biāo)簽 figure 標(biāo)簽和figcaption標(biāo)簽figure標(biāo)簽用于定義獨立的流內(nèi)容，例如圖像、圖表、照片、代碼等，一般指一個單獨的單元。figcaption標(biāo)簽用于為figure標(biāo)簽組添加標(biāo)題，一個figure標(biāo)簽內(nèi)最多允許使用一個figcaption標(biāo)簽，該標(biāo)簽應(yīng)該放在figure標(biāo)簽的第一個或者最后一個子標(biāo)簽的位置。 figure 標(biāo)簽的兼容性舉例演示【實例3-2】figure 標(biāo)簽和figcaption標(biāo)簽的使用。舉例演示 hgr

8、oup標(biāo)簽可以將標(biāo)題或者子標(biāo)題進行分組，通常它與h1h6標(biāo)簽組合使用，一個內(nèi)容塊中的標(biāo)題可以通過hgroup標(biāo)簽組成一組。hgroup標(biāo)簽舉例演示【實例3-3】hgroup標(biāo)簽。舉例演示 dialog標(biāo)簽主要用于人與人之間的對話。該標(biāo)簽還包括dt和dd兩個組合標(biāo)簽，他們常常同時使用。dt表示說話者，dd表示說話者說的內(nèi)容。dialog標(biāo)簽兼容性ChromeSafari目前只有 Chrome 和 Safari 6 支持 標(biāo)簽。注意 老師 dialog標(biāo)簽所有的瀏覽器都支持嗎？ 學(xué)生 目前只有 Chrome 和 Safari 6 支持 老師 答對了！舉例4頁面交互標(biāo)簽Partdetails標(biāo)簽和s

9、ummary標(biāo)簽menu標(biāo)簽與command標(biāo)簽交互性標(biāo)簽主要用于功能性的內(nèi)容表達，會有一定的內(nèi)容和數(shù)據(jù)的關(guān)聯(lián)，是各種事件的基礎(chǔ)，主要包括details標(biāo)簽、menu標(biāo)簽、commond標(biāo)簽等。頁面交互標(biāo)簽1 details標(biāo)簽和summary標(biāo)簽details標(biāo)簽用于描述文檔或文檔某個部分的細節(jié)。summary標(biāo)簽經(jīng)常與details標(biāo)簽配合使用，作為details標(biāo)簽的第一個子標(biāo)簽，用于為details定義標(biāo)題。標(biāo)題是可見的，當(dāng)用戶單擊標(biāo)題時，會顯示或隱藏details中的其他內(nèi)容。舉例演示【實例3-4】對details標(biāo)簽和summary標(biāo)簽的用法進行演示。 標(biāo)簽定義命令的列表或菜單，

10、標(biāo)簽用于上下文菜單、工具欄以及用于列出表單控件和命令。menu標(biāo)簽 例如新建打開 其他項command 元素表示用戶能夠調(diào)用的命令。command標(biāo)簽 例如 測試點擊!注意：目前所有主流瀏覽器都不支持 和 標(biāo)簽。 標(biāo)簽可以定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕。只有當(dāng) command 元素位于 menu 元素內(nèi)時，該元素才是可見的。否則不會顯示這個元素，但是可以用它規(guī)定鍵盤快捷鍵。5行內(nèi)語義性標(biāo)簽Partprogress標(biāo)簽 meter標(biāo)簽 time標(biāo)簽 video標(biāo)簽和audio標(biāo)簽progress標(biāo)簽表示任務(wù)的進度或進程。例如：需要注意的是value和max屬性的值必須大于0，且valu

11、e的值要小于或等于max屬性的值。progress元素的常用屬性值有兩個，value表示已經(jīng)完成的工作量，max表示總共有多少工作量。通常 標(biāo)簽與 Javascript 一同使用，來顯示任務(wù)的進度。progress標(biāo)簽可使用 標(biāo)簽來顯示 JavaScript 中耗費時間的函數(shù)的進度。舉例演示【實例3-5】progress標(biāo)簽的用法演示。meter標(biāo)簽定義度量衡，為已知范圍或分數(shù)值內(nèi)的標(biāo)量測量。也被稱為 gauge（尺度）。例如，顯示硬盤容量、對某個選項的比例統(tǒng)計等，都可以使用meter元素。meter標(biāo)簽的屬性屬性說明屬性說明high定義度量的值位于哪個點被界定為高的值min定義最小值，默認值

12、是0low定義度量的值位于哪個點被界定為低的值optimum定義什么樣的度量值是最佳的值。如果該值高于high屬性，則意味著越高越好。如果該值低于low屬性的值，則意味著值越低越好。max定義最大值，默認值是1value定義度量的值meter標(biāo)簽例如： 標(biāo)簽不應(yīng)用于指示進度，如果標(biāo)記進度條，請使用 標(biāo)簽。注意：Firefox, Chrome, Opera 以及 Safari 6 支持 標(biāo)簽，而IE瀏覽器不支持該標(biāo)簽。舉例演示【實例3-6】meter標(biāo)簽用法演示。value highlow value highvalue low time 標(biāo)簽表示時間值，主要加強了html的語義化結(jié)構(gòu)。而是讓網(wǎng)

13、頁的代碼有條理讓計算機，例如百度或者谷歌搜索機器人能夠理解網(wǎng)頁的意思。time標(biāo)簽例如：情人節(jié)2017年10月2日21:002017年10月2日21:00video標(biāo)簽定義視頻。video標(biāo)簽例如： 您的瀏覽器不支持 video 標(biāo)簽。 舉例演示【實例3-7】video標(biāo)簽用法演示。audio標(biāo)簽定義音頻。audio標(biāo)簽例如： 您的瀏覽器不支持 audio 標(biāo)簽。 舉例演示【實例3-8】audio標(biāo)簽用法演示。6HTML5的全局屬性Partcontenteditable屬性 hidden屬性 spellcheck屬性 draggable屬性contenteditable屬性規(guī)定標(biāo)簽的內(nèi)容是否可

14、編輯。例如： 首頁學(xué)校新聞院系設(shè)置contenteditable屬性是一個布爾值屬性，可以被設(shè)置為true和false，屬性值為true時，元素被指定為允許編輯；屬性值為false時，元素被指定為不允許編輯。同時，該屬性還有個隱藏的inherit（繼承）狀體。當(dāng)未指定true或false時，則有inherit狀態(tài)來決定，如果父元素為可編輯的，則該元素也為可編輯的。contenteditable屬性舉例演示【實例3-9】contenteditable屬性的用法演示。 標(biāo)簽不應(yīng)用于指示進度，如果標(biāo)記進度條，請使用 標(biāo)簽。注意：前提是該元素必須可以獲得鼠標(biāo)焦點并且其內(nèi)容不是只讀的。編輯完成后的內(nèi)容，

15、如果需要調(diào)用或者保存，只能通過把該元素的innerHTML發(fā)送至服務(wù)器端進行處理。hidden 屬性規(guī)定對元素進行隱藏。如果使用該屬性，則會隱藏元素。可以對 hidden 屬性進行設(shè)置，使用戶在滿足某些條件時才能看到某個元素（比如選中復(fù)選框，等等）。然后，可使用 JavaScript 來刪除 hidden 屬性，使該元素變得可見。hideen屬性例如： 首頁學(xué)校新聞院系設(shè)置舉例演示spellcheck屬性規(guī)定是否對元素內(nèi)容進行拼寫檢查。主要針對于input文本框、textarea多行文本輸入框、可編輯元素中的值進行拼寫和語法檢查。該屬性有兩個值:true（默認值）和false，值為true時檢

16、測輸入框中的值，反之不檢測。spellcheck屬性例如： Welcome to Jiangsu舉例演示【實例3-10】spellcheck屬性的用法演示。draggable屬性用來定義元素是否可以拖動。該屬性有兩個值：true和false，默認為false，當(dāng)值為true時表示元素選中之后可以進行拖動操作，否則不能拖動。draggable屬性例如： 舉例演示【實例3-11】 draggable屬性的用法演示。 標(biāo)簽不應(yīng)用于指示進度，如果標(biāo)記進度條，請使用 標(biāo)簽。注意：對于圖片即使不設(shè)置draggable屬性，也是可以被拖動的，因為鏈接和圖像默認是可拖動的。如果想實現(xiàn)元素的拖動功能，需要配合J

17、avaScript腳本才能實現(xiàn)。7綜合實例Part個人博客頁面結(jié)構(gòu)設(shè)計個人博客頁面結(jié)構(gòu)設(shè)計【演示】綜合分析該頁面的網(wǎng)頁結(jié)構(gòu)，并使用HTML5實現(xiàn)該頁面結(jié)構(gòu)部分。實現(xiàn)步驟 1 網(wǎng)頁結(jié)構(gòu)性元素分析 2 網(wǎng)頁標(biāo)題塊的結(jié)構(gòu)實現(xiàn) 3 網(wǎng)頁標(biāo)題塊的結(jié)構(gòu)實現(xiàn) 4 網(wǎng)頁banner塊的結(jié)構(gòu)實現(xiàn) 5 網(wǎng)頁主體內(nèi)容的結(jié)構(gòu)實現(xiàn) 6 網(wǎng)頁頁腳的結(jié)構(gòu)實現(xiàn)任務(wù)實施個人博客頁面結(jié)構(gòu)設(shè)計1 網(wǎng)頁結(jié)構(gòu)性元素分析HTML5結(jié)構(gòu)設(shè)計示意圖任務(wù)實施個人博客頁面結(jié)構(gòu)設(shè)計2 網(wǎng)頁標(biāo)題塊的結(jié)構(gòu)實現(xiàn)舉例演示任務(wù)實施個人博客頁面結(jié)構(gòu)設(shè)計3 導(dǎo)航信息模塊的結(jié)構(gòu)實現(xiàn)舉例演示任務(wù)實施個人博客頁面結(jié)構(gòu)設(shè)計4 網(wǎng)頁banner塊的結(jié)構(gòu)實現(xiàn)舉例演示任務(wù)實

18、施個人博客頁面結(jié)構(gòu)設(shè)計5 網(wǎng)頁主體內(nèi)容的結(jié)構(gòu)實現(xiàn)舉例演示任務(wù)實施個人博客頁面結(jié)構(gòu)設(shè)計6 網(wǎng)頁頁腳的結(jié)構(gòu)實現(xiàn)舉例演示8任務(wù)實施Part使用HTML5新標(biāo)簽優(yōu)化網(wǎng)頁【演示】本任務(wù)就是使用HTML5新標(biāo)簽來優(yōu)化門戶網(wǎng)站主頁的頁面文檔。實現(xiàn)步驟 1 網(wǎng)頁結(jié)構(gòu)性元素分析 2 應(yīng)用結(jié)構(gòu)性元素完善頁面任務(wù)實施使用HTML5新標(biāo)簽優(yōu)化網(wǎng)頁1 網(wǎng)頁結(jié)構(gòu)性元素分析HTML5結(jié)構(gòu)設(shè)計示意圖任務(wù)實施使用HTML5新標(biāo)簽優(yōu)化網(wǎng)頁2 應(yīng)用結(jié)構(gòu)性元素完善頁面舉例演示9任務(wù)拓展Partdiv標(biāo)簽和span標(biāo)簽div、section和article的區(qū)別和使用div標(biāo)簽和span標(biāo)簽div 標(biāo)簽 標(biāo)簽可定義文檔中的分區(qū)或節(jié)（division/section）。是塊級元素，用來把文檔分割為獨立的、不同的部分。如果用 id 或 class 來標(biāo)記 ，那么該標(biāo)簽的作用會變得更加有效。span 標(biāo)簽標(biāo)簽在行內(nèi)定義一個區(qū)域，也就是一行內(nèi)可以被劃分成好幾個區(qū)域，從而實現(xiàn)某種特定效果。本身沒有任何屬性。屬于一個行內(nèi)元素，而是塊級元素，可通俗地理解為為大容器，大容器當(dāng)然可以放一個小容器了，就是小容器。div、section和article的區(qū)別和使用div在html早期版本就支持了，section和articl