Web 前端開發(fā)技術(shù) 教案 項(xiàng)目三 HTML5 基礎(chǔ)_第1頁
Web 前端開發(fā)技術(shù) 教案 項(xiàng)目三 HTML5 基礎(chǔ)_第2頁
Web 前端開發(fā)技術(shù) 教案 項(xiàng)目三 HTML5 基礎(chǔ)_第3頁
Web 前端開發(fā)技術(shù) 教案 項(xiàng)目三 HTML5 基礎(chǔ)_第4頁
Web 前端開發(fā)技術(shù) 教案 項(xiàng)目三 HTML5 基礎(chǔ)_第5頁
已閱讀5頁，還剩2頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

Web前端開發(fā)技術(shù)教案設(shè)計(jì)項(xiàng)目課題HTML5基礎(chǔ)授課時(shí)間授課對(duì)象大學(xué)生學(xué)習(xí)目標(biāo)1.認(rèn)識(shí)HTML5的特性和優(yōu)勢(shì)。2.熟悉HTML5的文檔結(jié)構(gòu)。3.掌握HTML5新增的結(jié)構(gòu)元素及頁面元素的使用。學(xué)習(xí)重點(diǎn)熟悉HTML5的文檔結(jié)構(gòu)。學(xué)習(xí)難點(diǎn)掌握HTML5新增的結(jié)構(gòu)元素及頁面元素的使用。教學(xué)方法講授法、課堂演示法教學(xué)用具多媒體課件教學(xué)流程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)過程任務(wù)一HTML5概述一、HTML5的八個(gè)特性HTML5具有八個(gè)特性,分別對(duì)應(yīng)八種logo,如圖3-1所示,左邊第一個(gè)為HTML5的新ogo,它的右邊為HTML5八個(gè)特性的logo。1.語義特性(Semantic)HTML5賦予了網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)記集將隨著對(duì)RDFa(RDFattribute)、微數(shù)據(jù)與微格式等方面的支持,構(gòu)建對(duì)程序和用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。2.離線與存儲(chǔ)特性(Offline&Storage)基于HTML5開發(fā)的網(wǎng)頁擁有更短的啟動(dòng)時(shí)間和更快的聯(lián)網(wǎng)速度,這些全都得益于HTML5應(yīng)用程序緩存(ApplicationCache)、本地存儲(chǔ)功能、IndexedDB和FileAPI說明文檔等的支持。3.設(shè)備訪問特性(DeviceAccess)自Geolocation功能的API文檔公開以來,HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇,帶來了更多體驗(yàn)功能的優(yōu)勢(shì)。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口,使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)相連。例如,視頻影音可直接連接麥克風(fēng)及攝像頭。4.多媒體特性(Multimedia)支持網(wǎng)頁端的Audio、Video等多媒體功能,與網(wǎng)站自帶的攝像頭、影音功能等相得益彰。5.三維、圖形與特效特性(3D、Graphics&Effects)基于SVG(ScalableVectorGraphics,可縮放的矢量圖形)、Canvas、WebGL及CSS3的3D功能,用戶會(huì)驚嘆瀏覽器所呈現(xiàn)的驚艷視覺效果。6.性能與集成特性(Performance&Integration)HTML5會(huì)通過WebWorkers和XMLHttpRequest2等技術(shù),幫助Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速地工作。7.連接特性(Connectivity)更高的連接工作效率,使基于頁面的實(shí)時(shí)聊天、更快速的網(wǎng)頁游戲體驗(yàn)、更優(yōu)化的在線交流得以實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù),Server-SentEvent和WebSockets就是其中的兩個(gè)特性,這兩個(gè)特性能夠?qū)崿F(xiàn)將服務(wù)器數(shù)據(jù)“推送”到客戶端的功能。8.CSS3特性在不犧牲性能和語義結(jié)構(gòu)的前提下,CSS3中提供了更多的風(fēng)格和更好的效果。此外,相較于之前的Web排版,Web的開放字體格式(WebOpenFontFormat,WOFF)提供了更高的靈活性和可控制性。二、HTML5的優(yōu)勢(shì)1.擺脫對(duì)平臺(tái)的依賴用戶打開瀏覽器,直接就可以訪問自己的應(yīng)用,不需要經(jīng)過各種審核。2.實(shí)時(shí)更新通常平臺(tái)的審核都需要7個(gè)工作日左右,如果發(fā)布之后再出現(xiàn)問題則很難補(bǔ)救,而Web系統(tǒng)不存在這種問題。3.離線使用用戶可以離線使用,更新下載量較少時(shí),可以全部更新,也可以選擇替換部分文件。4.代碼更安全Web應(yīng)用有一個(gè)很重要的問題就是代碼的安全性問題,但HTML5可以將Web代碼全部加密,本地應(yīng)用解密后再運(yùn)行,在很大程度上提高了代碼的安全性。5.跨平臺(tái)HTML5的跨平臺(tái)兼容特性,使大部分核心代碼不需要重寫,這是因?yàn)镴avaScript的代碼可以在許多地方使用,包括移動(dòng)應(yīng)用、移動(dòng)網(wǎng)站、PC網(wǎng)站、各種瀏覽器插件,甚至可以用WebKit封裝作為跨平臺(tái)的應(yīng)用程序。6.可以充分利用NativeHTML5可以通過瀏覽器充分利用Native的好處。例如,可以使用GPS、照相機(jī)、本地相冊(cè)、讀取本地通信錄,也可以使用推送功能,最重要的是,某些Web無法實(shí)現(xiàn)的功能可以利用Native來實(shí)現(xiàn)。任務(wù)二HTML5文檔結(jié)構(gòu)一、HTML5頁面結(jié)構(gòu)HTML5中采用頁眉、頁腳、導(dǎo)航、文章內(nèi)容等結(jié)構(gòu)元素來進(jìn)行頁面布局,十分方便。HTML5頁面結(jié)構(gòu)元素語法如下。<!DOCTYPEhtml><html><head><metacharset=“utf-8”><title>HTML5文檔結(jié)構(gòu)</title></head><body><header><nav>……</nav></header><article><section>……</section></article><aside>……</aside><footer>……</footer></body></html>二、HTML5新增結(jié)構(gòu)元素1.header元素header元素定義文檔的頁眉,通常是一些導(dǎo)航信息。它既可以寫在網(wǎng)頁頭部,也可以寫在網(wǎng)頁內(nèi)容里面。通常header元素至少包含(但不局限于)一個(gè)標(biāo)題標(biāo)記(h1~h6),也可以包括hgroup(標(biāo)題組合)標(biāo)記、表格標(biāo)識(shí)、搜索表單、導(dǎo)航等。2.nav元素nav元素代表頁面的一個(gè)部分,是一個(gè)可以作為頁面導(dǎo)航的鏈接組。但建議不要在footer元素中使用nav元素,否則易造成頁面顯示錯(cuò)誤。配置相應(yīng)的CSS代碼可以實(shí)現(xiàn)水平導(dǎo)航。3.article元素article元素是一個(gè)特殊的section元素,它比section元素具有更明確的語義,它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊,可獨(dú)立于頁面中的其他內(nèi)容使用,如帖子、文章、新聞故事、評(píng)論等。一般來說,article元素有標(biāo)題部分,通常包含在header元素內(nèi),有時(shí)也包含footer元素。article元素可以嵌套,內(nèi)層的article元素對(duì)外層的article元素有隸屬關(guān)系。例如,一篇新聞可以用article元素顯示,而后續(xù)的一些評(píng)論可以以article元素的形式嵌入其中。4.section元素section元素定義文檔中的節(jié),如章節(jié)、頁眉、頁腳或文檔中的其他部分,一般用于成節(jié)的內(nèi)容,會(huì)在文檔流中開始一個(gè)新的節(jié)。它用來表現(xiàn)普通的文檔內(nèi)容或應(yīng)用區(qū)塊,通常由內(nèi)容及標(biāo)題組成。section元素不是一個(gè)普通的容器元素,它表示一段專題性的內(nèi)容,可以帶有標(biāo)題。如果描述一件具體的事物,那么建議使用article元素來代替section元素;如果使用section元素,那么仍可以使用h1作為標(biāo)題,而不用擔(dān)心它所處的位置。如果一個(gè)容器需要定義屬性或定義行為,那么建議用div元素。5.aside元素aside(側(cè)欄,也稱為旁注)元素用來說明其所包含的內(nèi)容與頁面主要內(nèi)容相關(guān),但不是該頁面的一部分,類似于使用括號(hào)對(duì)正文進(jìn)行注釋。括號(hào)中的內(nèi)容提供關(guān)于該元素的一些附加信息,如廣告、成組的鏈接、側(cè)欄等。6.footer元素footer元素定義section元素或文檔的頁腳,包含了與頁面、文章或部分內(nèi)容有關(guān)的信息,如文章的作者和日期。作為頁面的頁腳時(shí)，其一般包含了版權(quán)、相關(guān)文件和鏈接。它與頁眉header元素用法相同,在一個(gè)頁面中可以多次使用,若在一個(gè)區(qū)段的最后使用footer元素,它就相當(dāng)于該區(qū)段的頁腳。任務(wù)三HTML5新增頁面元素一、figure與figcaption元素figure元素用于對(duì)元素進(jìn)行組合,常用于圖像與圖像描述組合。figcaption(圖題)元素用于定義figure元素的標(biāo)題(caption),可以給一組圖像元素定義標(biāo)題,但figcaption元素不是必需的。如果包含了figcaption元素,那么它必須作為figure元素的第一個(gè)或最后一個(gè)子元素。二、mark與time元素mark元素用來定義帶有記號(hào)的文本。在需要突出顯示文本時(shí)可以使用mark元素。此元素對(duì)關(guān)鍵字做高亮處理、突出顯示、標(biāo)注重點(diǎn),可以應(yīng)用于搜索方面。time元素用來定義公歷的時(shí)間(24小時(shí)制)或日期,時(shí)間和時(shí)區(qū)偏移是可選的。該元素能夠以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼,但不會(huì)在瀏覽器中呈現(xiàn)任何特殊效果。三、progress與meter元素progress元素用來定義運(yùn)行中的任務(wù)進(jìn)度(進(jìn)程)。該元素有兩個(gè)屬性:max規(guī)定需要完成的值;value規(guī)定進(jìn)程的當(dāng)前值。meter元素用來定義已知范圍內(nèi)的標(biāo)量測(cè)量,也被稱為gauge(尺度),如磁盤可用空間、CPU使用率等。四、input與datalist元素input元素用于搜集用戶信息。通過input元素的list屬性與datalist元素的id屬性進(jìn)行關(guān)聯(lián),即將這兩個(gè)屬性的值設(shè)置為相同的值,通過datalist元素列出所有合法的輸入值列表。datalist元素用來定義input元素可能的選項(xiàng)列表,一般與input元素配合使用,提供“自動(dòng)完成”的功能,方便用戶輸入。datalist元素及其選項(xiàng)不會(huì)被顯示出來,只有當(dāng)用戶將光標(biāo)定位在input元素區(qū)域時(shí),才能看到“▼”,單擊“▼”按鈕,在彈出的下拉列表中提供了用戶可選擇的選項(xiàng)。作業(yè)布置一、問答題(1)簡(jiǎn)述HTML5的八大特性。(2)簡(jiǎn)述HTML5文檔結(jié)構(gòu)的基本組成。(3)HTML5中新增的表單元素具有哪些新功能和屬性?(4)HTML5中用于顯示已知范圍內(nèi)的標(biāo)量測(cè)量的元素是什么?(5)HTML5中哪個(gè)元素

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論