对于HTML5 新特性的教学方法.docVIP

对于HTML5 新特性的教学方法 　　0. 引言 　　2014 年10 月29 日，历经8 年的努力，HTML5 标准规范终于被宣布制定完成。据IDC 的调查报告统计，各大浏览器早已开启了支持HTML5 的步伐，尤其是移动开发商，都纷纷决定在各自的产品中整合HTML5 技术，据统计2013 年全球支持HTML5 的手机浏览器已达10 亿之多，而HTML Web 开发者数量则达到200 万。由此可见，在未来的5 至10 年内，HTML5 将主宰移动互联网领域。相比于传统的HTML 标准，HTML5 增加了不少的新特性。首先，从性能角度来说，HTML5 大大缩减了HTML 代码的数量，并使开发HTML 代码变得更简单。其次，从用户可读性上说，传统的HTML 代码中总是有一堆苦涩难懂的东西，尤其是对初学者来说，根本看不懂这些东西，而使用HTML5 则可极大改善代码可读性体验，HTML 的声明方式也比传统的HTML 更友好一些。HTML5 作为HTML 的最新版本(HTML 的第五次修改)，具有诸多的优点，包括 　　1) HTML5 是经过Google、Apple、Nokia、中国移动等几百家公司共同酝酿并由W3C 推荐出来的一项互联网技术，其最大的好处在于它是一个公开的技术; 　　2) HTML5 技术的跨平台性非常强大，基于HTML5开发的应用可以实现完美的跨平台使用，因而它势必吸引大多数人的关注和青睐; 　　3) 支持“自适应网页设计”功能，即基于HTML5 标准设计的网页可以自动识别屏幕宽度、并做出相应调整，这就解决了传统 HTML 的一种缺陷问题---网站为不同的设备提供不同的网页，会大大降低了架构设计的复杂度; 　　4) 支付即时更新功能，不像游戏客户端每次都要更新那么麻烦，更新HTML5 游戏就好像更新页面一样，马上地、即时地更新; 　　5)增加了新的标签，支持多媒体元素，极大方便了开发人员，并可以很好地替代FLASH 和Silverlight。总之，基于HTML5 技术的网页和应用具有很好的移植性和可用性，用户的体验也非常友好，非常适合用于移动应用程序和游戏开发中。 　　1. HTML5 教学的思路和方法要点 　　HTML5 教学的关键点在于让学生掌握HTML5 的新特性。本文通过比较教学的方法讲述HTML5 与传统的HTML 的差异性，让学生熟悉HTML5 的新特性并掌握新特性的使用方法，同时结合W3School TIY 平台的演示效果加深学生对所学知识的理解，最后配合实操任务，让学生真正掌握HTML5 的应用与开发技能。具体方法要点如下：首先，总结归纳HTML5 较之于传统HTML 的不同点，即提炼HTML5 的新特性。对于各个新特性，我们精心选择或定制典型的实例，在课堂上向学生形象地展现教学的内容，并与传统的HTML 实例形成鲜明对比，让学生在比较的过程中，深刻理解HTML5 的新特性，同时还应该注意让学生学会在不同的应用场景中选择适当的新标签或新用法。其次，为了进一步加深学生对所教知识的理解，最终让学生学会在实际的网页制作过程中如何使用HTML5 的新特性，教师可以结合W3School TIY 平台(/tiy/t.asp)，演示HTML5 的经典实例。W3School TIY 平台是一个非常优秀的HTML 代码在线测试工具，学生可以在W3SchoolTIY 平台上轻松地编写任意HTML 代码，并可以快速便捷地看到代码的渲染效果。最后，通过课程设计的形式，让学生课后实际动手开发一个基于HTML5 的小型项目，以达到巩固知识和掌握技能的目的。值得一提的是，课程设计是帮助学生巩固知识、加深理解和掌握技能的最佳形式。 　　2. HTML5 新特性的教学内容 　　2.1 归纳HTML5 的新特性 　　在本文的研究过程中，总结了HTML5 的主要15 项新特性，并将这些特性罗列在表中，方便学生比较、总结和归纳。我们在讲述每一项新特性的时候，应结合HTML4 或XHTML 版本中相应的实现方法，并列举典型的应用实例，从而形成强烈的比较效果。 　　2.2 演示HTML5 新特性的使用 　　如果我们从头到尾只是大讲特讲HTML5 的新特性，而没__有把它的实现效果形象地展现给学生，那么教学的效果将要大打折扣。因此，我们需要一个给学生展示实际页面效果的有效方法。本文在研究HTML5 教学方法的过程中，发现W3SchoolTIY 在线测试平台是一个非常合适和优秀的教学演示工具。下图所示是W3School TIY 平台的效果截图。基于W3School TIY平台，我们可以轻松地实现任何HTML5 代码的课堂现场展示的效果。W3School TIY 平台的使用方法非常简单，只要在代