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

下載本文檔

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

文檔簡介

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

溫馨提示

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

評論

0/150

提交評論