《H5跨平台应用开发》教学大纲
课程编码制订人制订日期修订人修订日期审核人审核日期
曾建华2023.9
学分：4
学时：64
适用专业：软件技术专业
一、课程的性质与任务
课程的性质：针对计算机软件类相关专业学生的专业核心课。
课程的任务：通过本课程的学习，学生应能掌握H5相关技术，能进行移动端及PC端网页布
局设计、APP前端界面设计。
二、教学基本要求
通过本课程的学习，学生应达到下列基本要求：
掌握HTML5核心要点。
熟练运用CSS进行布局。
熟练运用JavaScript进行前端页面设计方面的编程。
通过学习Swiper插件领会其他插件的用法。
通过学习jQuery框架领会其他框架的用法。
通过学习JSON理解后台数据。
综合运用进行网页布局设计。
通过学习HBuilderX熟悉开发移动App的流程（可选）。
三、教学条件
机房上课，每个学生有一台电脑。
投影仪等多媒体教学设备。
安装软件：Win10或以上、VisualStudioCode、Edge或Chrome、HBuilderX、夜神模拟器。
四、教学内容
序号单元主要内容
开发环境及
JavaScript篇
了解HTML5前端开发相关技术。
掌握VisualStudioCode的安装、配置、使用。
学会安装和使用VisualStudioCode插件。
掌握使用VisualStudioCode创建一个包含HTML、CSS、JavaScript
构成的html文件。
初步学习使用浏览器调试观察HTML页面。
掌握前端开发所需JavaScript必备知识。
2HTML篇
熟练掌握HTML常用元素的使用。
通过JavaScript熟练设置、获取HTML元素的值。
熟练掌握Web存储机制。
3CSS篇
熟练使用CSS的几种方式。
熟练使用CSS选择器。
熟练使用CSS常用属性。
熟悉BOX模型。
熟练掌握position、float、flex布局。
熟练掌握overflow属性。
熟练掌握JavaScript操作CSS样式。
了解CSS的2D、3D变换及动画。
4移动前端实战篇
通过设计移动端、PC端常见页面，提高综合运用HTML5进行前端
开发的能力。
5Swiper插件篇
熟练使用Swipper插件。
熟练使用SwiperAnimate实现动画场景。
通过对Swipper插件的学习提高自学能力，能根据项目或公司的需要
学习并使用其他插件。
6JSON数据篇
熟练掌握JSON数据的格式以及各种变化组合。
熟练掌握如何操作JSON数据。
熟练掌握JSON类型和字符串类型之间的数据转换。
掌握JSON在线解析工具。
熟练使用JSON表示对象。
熟练读取JSON数据。
7JQuery框架篇
熟练掌握jQuery框架的使用方法和常用功能。
通过jQuery框架的学习，提高自学能力，能根据项目或企业的需要
学习并使用其他框架。
熟练掌握jQueryAjax。
8移动App开发篇
掌握HbuilderX安装及使用。
掌握夜神模拟器安装及使用。
掌握在HbuilderX下开发移动App的流程。
五、教法说明
以演练为主，力求步骤明确的方式指导学生完成演练，对单个知识点并不做详细介绍，对某项
具体技术或概念的阐述可参考相关的帮助手册。
本课程采用示范-模仿-综合的方法来进行教学。该方法是一种在专家引导下逐渐培养学生独立
解决实际问题能力的学习方法。
整个学习是由许多小的教学循环组成。每个教学循环中首先由教师根据教学目标提出一系列问
题，然后由专家（也就是教师）用规范的方法来解决这些问题，紧接着教师对学生提出另一些类似
的问题，学生可参照专家的方法来解决这些问题而不会遇到太多的困难。
最后学生必须将这些所学的知识综合地用到解决一个小型综合系统上，通过小型综合系统的训
练，一方面可以巩固学生所学的基础知识，另一方面又可以培养学生的综合分析能力和独立解决问
题的能力。
六、考核方式及评分办法
本课程考核采用形成性考核方式，即课程的考试成绩由平时成绩、单元项目成绩、期末测试成
绩组成。
其中平时成绩强调平时的出勤、课堂纪律、课堂表现和作业，占总成绩的20%；
单元项目成绩考察单元知识的掌握情况，在课程教学中随堂进行，占总成绩的40%；
期末课堂测试着重考察学生对于综合知识的运用，综合编程能力的情况，占总成绩的40%。
七、教材
《HTML5移动前端开发基础与实战（微课版）》
