《HTML5高級(jí)應(yīng)用與開(kāi)發(fā)》教學(xué)大綱

1、HTML 5高級(jí)應(yīng)用與開(kāi)發(fā)教學(xué)大綱HTML 5 Advanced Application and Development（供人工智能、大數(shù)據(jù)、軟件工程、信息管理及以外的其他本科專業(yè)使用）前 言自2010年HTML 5.0正式推出，立即受到全球各大瀏覽器廠商的熱烈歡迎與支持，并以驚人的速度被推廣與使用。同年1月YouTube開(kāi)始提供HTML 5視頻播放器；4月蘋果公司創(chuàng)始人喬布斯公開(kāi)宣布全面封殺Flash，使得更多公司開(kāi)始關(guān)注HTML 5。到目前為止，世界前100網(wǎng)站中90%以上才有HTML 5技術(shù)進(jìn)行改版。HTML 5的出現(xiàn)，對(duì)于Web的發(fā)展意義重大，其新技術(shù)特征主要表現(xiàn)在語(yǔ)義特性、離線存儲(chǔ)特

2、性、設(shè)備訪問(wèn)特性、通訊特性、多媒體特性、三維及圖形特性、性能與集成特性、CSS 3特性等方面。HTML 5作為Web前端開(kāi)發(fā)的基石，是一種前端和后端開(kāi)發(fā)者必備的技能，目前絕大部分前端框架都是基于HTML 5技術(shù)。本課程的教學(xué)目的是，使用探索和創(chuàng)新的視角，由淺入深學(xué)習(xí)并掌握HTML5新特性及使用技巧。本書(shū)在HTML、CSS和JavaScript語(yǔ)言基礎(chǔ)上，重點(diǎn)闡述HTML 5語(yǔ)義特性、HTML5 Form表單、Canvas和SVG繪圖、多媒體API、本地存儲(chǔ)、文件API、Server-Sent Events和WebSocket通信、Notification通知、離線應(yīng)用、XMLHttpReque

3、st Level 2、Web Worker多線程、Geolocation位置定位等技術(shù)。本課程培養(yǎng)學(xué)生掌握基本的創(chuàng)新方法、具有追求創(chuàng)新的態(tài)度和意識(shí)，能夠獨(dú)立思考、分析問(wèn)題，以及利用計(jì)算機(jī)編程解決實(shí)際問(wèn)題的能力，為從事本專業(yè)的工程工作打下良好的計(jì)算機(jī)基礎(chǔ)。本大綱適用于人工智能、大數(shù)據(jù)、軟件工程、信息管理與信息系統(tǒng)、生物醫(yī)學(xué)工程、計(jì)算機(jī)科學(xué)與技術(shù)、軟件外包等專業(yè)的教學(xué)工作。本課程是一門理論與實(shí)踐并重的課程，為了達(dá)到預(yù)期的教學(xué)效果與目的，大綱所列教學(xué)內(nèi)容可通過(guò)多媒體電子課件進(jìn)行典型的示例講解、必要的現(xiàn)場(chǎng)實(shí)際操作演示、適量的課堂練習(xí)、與理論課程相配套的上機(jī)實(shí)驗(yàn)以及及時(shí)輔導(dǎo)答疑等方式進(jìn)行教學(xué)。本大綱在各

4、章的教學(xué)內(nèi)容中已經(jīng)明確重點(diǎn)內(nèi)容和一般了解、理解的內(nèi)容。本課程總學(xué)時(shí)為64學(xué)時(shí)（32理論+32實(shí)踐），本課程為?？颊n程，課終考核采用閉卷筆答考試。課程總評(píng)成績(jī)的組成為：課終考試成績(jī)占學(xué)科總評(píng)成績(jī)的60%，實(shí)驗(yàn)報(bào)告占20%，上機(jī)實(shí)踐占20。課程內(nèi)容與參考學(xué)時(shí)分配章節(jié)教學(xué)目標(biāo)學(xué)時(shí)第1章 HTML 5入門1.1 HTML 5概述 1.1.1 HTML 5發(fā)展歷程1.1.2 HTML 5八大特性1.2 HTML 5現(xiàn)狀1.2.1瀏覽器對(duì)HTML的支持情況1.2.2檢查瀏覽器支持情況 1.3 HTML 5的變化1.3.1 HTML5標(biāo)記方式的改進(jìn)1.3.2 HTML 5廢棄的元素1.3.3 HTML 5新

5、增的元素 1.4 HTML 5全局屬性本章必講其中帶的小結(jié)為選講內(nèi)容本章重點(diǎn)：HTML5八大特性，瀏覽器對(duì)HTML5標(biāo)簽支持情況，HTML5新增的元素，HTML5全局屬性。本章難點(diǎn)：瀏覽器對(duì)HTML5標(biāo)簽支持情況，HTML5全局屬性。4第2章 HTML 5文檔結(jié)構(gòu)2.1 HTML 5文檔結(jié)構(gòu)元素2.1.1 article元素2.1.2 section元素2.1.3 nav元素2.1.4 header和hgroup元素2.1.5 aside元素2.1.6 footer元素2.2 HTML 5其他新增元素2.3 改良后的標(biāo)簽2.4 HTML 5拖放API本章必講其中帶的小結(jié)為選講內(nèi)容本章重點(diǎn)：ar

6、ticle元素、section元素、nav元素、header元素、aside元素、footer元素、改良元素。本章難點(diǎn)：HTML5文檔元素頁(yè)面排版、HTML 5拖放API。6第3章 HTML 5表單3.1 HTML 5表單概述3.2 HTML 5表單的改良3.2.1 HTML 5表單控件3.2.2 HTML 5表單屬性3.2.3 HTML 5表單控件屬性3.2.4 HTML 5表單驗(yàn)證本章必講其中帶的小結(jié)為選講內(nèi)容本章重點(diǎn)：HTML 5表單控件，表單屬性，表單控件屬性，表單驗(yàn)證。本章難點(diǎn)：表單控件屬性，表單驗(yàn)證8第4章 Canvas繪圖4.1 Canvas元素4.1.1 HTMLCanvasE

7、lement4.1.2 CanvasRenderingContext2D4.1.3Canvas坐標(biāo)系4.2 繪制矩形4.3 繪制文本4.4 繪制路徑4.5 繪制圖像4.5.1 圖像加載4.3.2 像素處理 4.3.3 圖像平鋪4.6 圖形合成4.7 圖形變換4.8 圖形漸變本章必講其中帶的小結(jié)為選講內(nèi)容本章重點(diǎn)：HTMLCanvasElement，CanvasRenderingContext2D，繪制矩形、文本、路徑、圖像，圖形的合成。本章難點(diǎn)：Canvas坐標(biāo)系，繪制圖像，圖形變換。8第5章 SVG繪圖5.1 SVG概述5.1.1 SVG發(fā)展歷程5.1.2 SVG特點(diǎn)5.1.3 SVG的使用

8、5.2 SVG基本數(shù)據(jù)類型5.3 SVG框架元素5.4 SVG形狀元素5.5 SVG路徑5.6 SVG樣式5.6.1 SVG元素使用樣式5.6.2 SVG文件引用樣式5.7文本內(nèi)容5.8 漸變填充5.9 濾鏡元素5.10 動(dòng)畫(huà)與事件響應(yīng)本章必講其中帶的小結(jié)為選講內(nèi)容本章重點(diǎn)：SVG特點(diǎn)與使用，SVG基本數(shù)據(jù)類型，SVG形狀元素，SVG路徑，文本內(nèi)容，漸變填充。本章難點(diǎn)：SVG形狀元素，SVG路徑，濾鏡元素，lambda函數(shù)，動(dòng)畫(huà)與事件響應(yīng)。8第6章 多媒體API6.1 多媒體概述6.1.1 多媒體格式6.1.2 HTML 5對(duì)多媒體的支持6.2 HTML 5多媒體元素6.3 多媒體API6.4

9、 攝像頭的捕獲6.5 視頻截圖本章必講其中帶的小結(jié)為選講內(nèi)容本章重點(diǎn)：多媒體格式、多媒體元素、多媒體API，攝像頭的捕獲。本章難點(diǎn)：攝像頭的捕獲，視頻截圖。8第7章 本地存儲(chǔ)7.1 Cookie技術(shù)7.2 Web Storage7.2.1 Session Storage7.2.2 Local Storage7.2.3 Storage Event7.3 Indexed Database7.3.1 IndexedDB API7.3.2 Indexed數(shù)據(jù)操作7.3.3 Indexed檢索本章必講其中帶的小結(jié)為選講內(nèi)容本章重點(diǎn)：Session Storage，Local Storage，Indexe

10、dDB API，Indexed數(shù)據(jù)操作。本章難點(diǎn)：Storage Event，Indexed數(shù)據(jù)操作，Indexed檢索。8第8章 文件API8.1 文件API概述8.2 File API8.2.1 Blob接口8.2.2 File接口8.2.3 FileList接口8.2.4 FileReader接口8.2.5 URL接口8.3 File Writer API8.4 FileSystem API8.4.1 申請(qǐng)磁盤配額8.4.2 請(qǐng)求訪問(wèn)系統(tǒng)8.4.3 文件操作8.4.4 目錄操作本章選講其中帶的小結(jié)為選講內(nèi)容本章重點(diǎn)：Blob接口，F(xiàn)ile接口，F(xiàn)ileList接口，F(xiàn)ileReader接

11、口，請(qǐng)求訪問(wèn)系統(tǒng)，文件操作。本章難點(diǎn)：FileReader接口，文件操作，目錄操作。（6）第9章 Server-Sent Events9.1 Server-Sent Events概述9.1.1 MessageEvent接口9.1.2 EventSource接口9.2 基于Servlet的動(dòng)態(tài)圖形報(bào)表9.2.1 服務(wù)端的實(shí)現(xiàn)9.2.2 客戶端的實(shí)現(xiàn)9.3 基于NodeJS的動(dòng)態(tài)圖形報(bào)表9.3.1 服務(wù)端的實(shí)現(xiàn)9.3.2 客戶端的實(shí)現(xiàn)本章必講其中帶的小結(jié)為選講內(nèi)容本章重點(diǎn)：MessageEvent接口，EventSource接口，SSE原理。本章難點(diǎn)：基于NodeJS的動(dòng)態(tài)圖形報(bào)表。6第10章 W

12、ebSocket和Notification10.1 WebSocket概述10.1.1 WebSocket接口10.1.2 基于Java的WebSocket示例10.1.3 基于NodeJS的WebSocket示例10.2 Notification概述10.3 網(wǎng)絡(luò)聊天室10.3.1聊天室客戶端公共模塊10.3.2基于Java的網(wǎng)絡(luò)聊天室10.3.3基于NodeJS的網(wǎng)絡(luò)聊天室本章必講其中帶的小結(jié)為選講內(nèi)容本章重點(diǎn)：WebSocket接口，WebSocket通信原理，Notification概述。本章難點(diǎn)：聊天室客戶端公共模塊，基于NodeJS的網(wǎng)絡(luò)聊天室。8第11章 離線應(yīng)用和XHR 2 1

13、1.1 離線應(yīng)用11.1.1 manifest文件11.1.2 applicationCache對(duì)象11.1.3 Browser State11.1.4 Web應(yīng)用的交互過(guò)程11.2 XMLHttpRequest11.2.1 XMLHttpRequest Level 111.2.2 XMLHttpRequest Level 211.2.3基于Java的拍照上傳11.2.4 基于NodeJS的拍照上傳本章選講其中帶的小結(jié)為選講內(nèi)容本章重點(diǎn)：manifest文件，applicationCache對(duì)象，Web應(yīng)用的交互過(guò)程，XMLHttpRequest Level。本章難點(diǎn)：Web應(yīng)用的交互過(guò)程，基于NodeJS的拍照上傳。（8）第12章 Web W