《HTML5高级应用与开发》教学大纲

1、HTML 5高级应用与开发教学大纲HTML 5 Advanced Application and Development（供人工智能、大数据、软件工程、信息管理及以外的其他本科专业使用）前 言自2010年HTML 5.0正式推出，立即受到全球各大浏览器厂商的热烈欢迎与支持，并以惊人的速度被推广与使用。同年1月YouTube开始提供HTML 5视频播放器；4月苹果公司创始人乔布斯公开宣布全面封杀Flash，使得更多公司开始关注HTML 5。到目前为止，世界前100网站中90%以上才有HTML 5技术进行改版。HTML 5的出现，对于Web的发展意义重大，其新技术特征主要表现在语义特性、离线存储特

2、性、设备访问特性、通讯特性、多媒体特性、三维及图形特性、性能与集成特性、CSS 3特性等方面。HTML 5作为Web前端开发的基石，是一种前端和后端开发者必备的技能，目前绝大部分前端框架都是基于HTML 5技术。本课程的教学目的是，使用探索和创新的视角，由浅入深学习并掌握HTML5新特性及使用技巧。本书在HTML、CSS和JavaScript语言基础上，重点阐述HTML 5语义特性、HTML5 Form表单、Canvas和SVG绘图、多媒体API、本地存储、文件API、Server-Sent Events和WebSocket通信、Notification通知、离线应用、XMLHttpReque

3、st Level 2、Web Worker多线程、Geolocation位置定位等技术。本课程培养学生掌握基本的创新方法、具有追求创新的态度和意识，能够独立思考、分析问题，以及利用计算机编程解决实际问题的能力，为从事本专业的工程工作打下良好的计算机基础。本大纲适用于人工智能、大数据、软件工程、信息管理与信息系统、生物医学工程、计算机科学与技术、软件外包等专业的教学工作。本课程是一门理论与实践并重的课程，为了达到预期的教学效果与目的，大纲所列教学内容可通过多媒体电子课件进行典型的示例讲解、必要的现场实际操作演示、适量的课堂练习、与理论课程相配套的上机实验以及及时辅导答疑等方式进行教学。本大纲在各

4、章的教学内容中已经明确重点内容和一般了解、理解的内容。本课程总学时为64学时（32理论+32实践），本课程为校考课程，课终考核采用闭卷笔答考试。课程总评成绩的组成为：课终考试成绩占学科总评成绩的60%，实验报告占20%，上机实践占20。课程内容与参考学时分配章节教学目标学时第1章 HTML 5入门1.1 HTML 5概述 1.1.1 HTML 5发展历程1.1.2 HTML 5八大特性1.2 HTML 5现状1.2.1浏览器对HTML的支持情况1.2.2检查浏览器支持情况 1.3 HTML 5的变化1.3.1 HTML5标记方式的改进1.3.2 HTML 5废弃的元素1.3.3 HTML 5新

5、增的元素 1.4 HTML 5全局属性本章必讲其中带的小结为选讲内容本章重点：HTML5八大特性，浏览器对HTML5标签支持情况，HTML5新增的元素，HTML5全局属性。本章难点：浏览器对HTML5标签支持情况，HTML5全局属性。4第2章 HTML 5文档结构2.1 HTML 5文档结构元素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 改良后的标签2.4 HTML 5拖放API本章必讲其中带的小结为选讲内容本章重点：ar

6、ticle元素、section元素、nav元素、header元素、aside元素、footer元素、改良元素。本章难点：HTML5文档元素页面排版、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表单验证本章必讲其中带的小结为选讲内容本章重点：HTML 5表单控件，表单属性，表单控件属性，表单验证。本章难点：表单控件属性，表单验证8第4章 Canvas绘图4.1 Canvas元素4.1.1 HTMLCanvasE

7、lement4.1.2 CanvasRenderingContext2D4.1.3Canvas坐标系4.2 绘制矩形4.3 绘制文本4.4 绘制路径4.5 绘制图像4.5.1 图像加载4.3.2 像素处理 4.3.3 图像平铺4.6 图形合成4.7 图形变换4.8 图形渐变本章必讲其中带的小结为选讲内容本章重点：HTMLCanvasElement，CanvasRenderingContext2D，绘制矩形、文本、路径、图像，图形的合成。本章难点：Canvas坐标系，绘制图像，图形变换。8第5章 SVG绘图5.1 SVG概述5.1.1 SVG发展历程5.1.2 SVG特点5.1.3 SVG的使用

8、5.2 SVG基本数据类型5.3 SVG框架元素5.4 SVG形状元素5.5 SVG路径5.6 SVG样式5.6.1 SVG元素使用样式5.6.2 SVG文件引用样式5.7文本内容5.8 渐变填充5.9 滤镜元素5.10 动画与事件响应本章必讲其中带的小结为选讲内容本章重点：SVG特点与使用，SVG基本数据类型，SVG形状元素，SVG路径，文本内容，渐变填充。本章难点：SVG形状元素，SVG路径，滤镜元素，lambda函数，动画与事件响应。8第6章 多媒体API6.1 多媒体概述6.1.1 多媒体格式6.1.2 HTML 5对多媒体的支持6.2 HTML 5多媒体元素6.3 多媒体API6.4

9、 摄像头的捕获6.5 视频截图本章必讲其中带的小结为选讲内容本章重点：多媒体格式、多媒体元素、多媒体API，摄像头的捕获。本章难点：摄像头的捕获，视频截图。8第7章 本地存储7.1 Cookie技术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数据操作7.3.3 Indexed检索本章必讲其中带的小结为选讲内容本章重点：Session Storage，Local Storage，Indexe

10、dDB API，Indexed数据操作。本章难点：Storage Event，Indexed数据操作，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 申请磁盘配额8.4.2 请求访问系统8.4.3 文件操作8.4.4 目录操作本章选讲其中带的小结为选讲内容本章重点：Blob接口，File接口，FileList接口，FileReader接

11、口，请求访问系统，文件操作。本章难点：FileReader接口，文件操作，目录操作。（6）第9章 Server-Sent Events9.1 Server-Sent Events概述9.1.1 MessageEvent接口9.1.2 EventSource接口9.2 基于Servlet的动态图形报表9.2.1 服务端的实现9.2.2 客户端的实现9.3 基于NodeJS的动态图形报表9.3.1 服务端的实现9.3.2 客户端的实现本章必讲其中带的小结为选讲内容本章重点：MessageEvent接口，EventSource接口，SSE原理。本章难点：基于NodeJS的动态图形报表。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 网络聊天室10.3.1聊天室客户端公共模块10.3.2基于Java的网络聊天室10.3.3基于NodeJS的网络聊天室本章必讲其中带的小结为选讲内容本章重点：WebSocket接口，WebSocket通信原理，Notification概述。本章难点：聊天室客户端公共模块，基于NodeJS的网络聊天室。8第11章 离线应用和XHR 2 1

13、1.1 离线应用11.1.1 manifest文件11.1.2 applicationCache对象11.1.3 Browser State11.1.4 Web应用的交互过程11.2 XMLHttpRequest11.2.1 XMLHttpRequest Level 111.2.2 XMLHttpRequest Level 211.2.3基于Java的拍照上传11.2.4 基于NodeJS的拍照上传本章选讲其中带的小结为选讲内容本章重点：manifest文件，applicationCache对象，Web应用的交互过程，XMLHttpRequest Level。本章难点：Web应用的交互过程，基于NodeJS的拍照上传。（8）第12章 Web W