多角度提高 HTML5 课程的教学质量

陈徐

摘 要：HTML5作为一种优化后的编程语言描述方式，在网站的编写和应用上有十分良好的移植性和可用性，这种技术可以大大改善网页的显示效果，由于重在强调用户体验，因此它非常适合各种客户端程序和游戏软件的开发工作。在具体的教学中，如何让学生爱上这门技术、掌握这门技术是教学重点，而如何提高这门技术的教学质量就变成了当下教师最关心的问题。

关键词：渲染气氛;工程世界;教学效果

八年的努力，HTML5标准终于一锤定音，在制定完成后的多年岁月里，各大浏览器最先扛起了支持的大旗，接踵而至的是各种移动开发商，都急迫地想要在自家产品中整合这门技术。据前几年的调查显示，应用了HTML5技术的手机浏览器已经突破了10亿，而对于这门技术整合开发的“一线人员”，即工程师来说，人数也已经突破了200万，有专家称这一趋势还在逐年上涨，从这里可以看到HTML5 的前景十分光明、道路十分广阔，这一原因不仅是HTML5的性能较之前更加良好、完备，还在于入门相对简单，具有“可读性”体验。因而在教育领域中，这种新技术也变成了教学重点之一。那么在教学中，我们该如何去提高HTML5的教学质量呢？以下结合笔者的个人实践，从“渲染气氛，了解工程世界”、“利用媒体，提高教学效果”、“适当练习，強化所学知识”三个方面进行阐述。

一、渲染气氛，了解工程世界

气氛课堂的影响尤为重要，一个良好的气氛可以让学生更好地激发学习兴趣，在教学中，教师应该积极地营造气氛，让学生更好地了解到关于此技术的“工程世界”，让其看到了技术的未来，这也是为学生的学习提供了方向。

比如我在课上带来了安卓手机、苹果手机、iPad、以及笔记本等设备，用这些设备同时打开百度或淘宝首页，由于这类网站比起其他网站来说，更重视用户的观看体验，以此来引出前端知识是十分有效的，而后学生便发现了这几款设备打开的页面都不一样，他们问道：“为什么拥有同样域名的网站，在不同客户端中展示的也不尽相同呢？”我告之学生：“ HTML5 要先识别各种客户端，而后再由独特的编译工具进行优化，这个过程不仅能够提升页面的加载性能，即优化模式化框架，还能够资源定位，实现搜索功能”，这么一来，让学生明白这些网站最为看重的就是网页的“脸面”，即“前端世界”。此外，我还给他们演示了一个由 HTML5 做的游戏场景，这个场景十分逼真，由于此技术是取代flash的新工具，所以很多工程师都以此为职业，而这些基础知识都来自于前端教材，学好这些知识才能进入工程师的世界。总之，教师要利用有效的手段营造气氛，让学生理解到工程世界虽然无比精彩夺目，但是也并非简简单单写出来的，每个工程师都要根据自身的经验，经过着无数的推敲琢磨环节，这种方式可以让学生看到光明的前景，为前端知识的学习创造动力。

二、利用媒体，提高教学效果

多媒体作为一种优秀的辅学工具，它能够用最少的资源、最丰富的声色效果来为学生带来更良好的观看体验，换言之，较之过去单拿着课本教学的模式来说，这种利用多媒体教学的模式能够简化教学的步骤，让学生直接看到课程重点，提高了教学效果。

比如在教学 HTML5 优势的时候，我用多媒体讲解了一次关于 HTML5 对于HTML的新特性，先打开两个展示效果相似的网页，一个是由新的 HTML5 语言编写的，另一个是由HTML编写的，然后用两个页面的代码差异来引出 HTML5 的优势，如： HTML5 会在第一行文档中声明了：“<！ DOCTYPE html>”;，<small>被用来定义小字等等。从差异对比中可以让学生掌握关于 HTML5 的新特性。总之，利用教学媒体，可以在课堂上向学生形象地展现教学的内容，并与传统的 HTML 实例形成鲜明对比，而让学生在比较的过程中，能够更好地理解 HTML5 的新特性。

三、适当练习，强化所学知识

就信息技术而言，只看得懂不算学会，不上手就永远无法熟练地掌握，俗话说：“站在岸上学不会游泳”，说的就是这么一个道理。只有经过适当地练习，学生才会懂得应该为达到什么效果而使用哪些代码;也只有适当地练习，学生才会缩短时间，提高编码效率。

比如：在练习图像标记的时候，我们利用了一款很好用的工具，那就是W3cschool，学生在网站中把示例<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" >换成了<img src="p/row.jpg "  alt="草原 " />，然后用记事本以网页形式打开就会看到一个草原的图片显示在眼前。在练习完之后学生要进行截图，方便总结不同代码能够带来什么不同的效果。而且，使用W3cshcool的好处就是，不但方便了教学的演示过程，也降低了教师投入的精力，还能够在很大程度上促进学生的巩固复习，强化所学知识。

综上所述，HTML5是网页前端开发工作中最基本也是最重要的技术，就像是一个组织的框架，这门技术的教学是一项公开技术，由国际上多家互联网巨头共同酝酿出来的，因此是绝对免费的，这一点也给学习带来了很多福音，即学生在练习的时候，不仅可以使用课本上的知识，还可以在兴趣之余，从课外搜索大量免费的代码扩充知识面。此外，这项技术不仅支持跨平台使用，还拥有自适应网页设计等功能，强大的功能也是学生学习的目的。总之，基于HTMl5技术的网页或者应用拥有很好的实用性和移植性，由于其前景十分良好，所以教师应该致力于探索多种教学手段，助力于学生的学习。

参考文献：

[1]于薇.HTML5前端开发课程教学改革实践探讨[J].数字通信世界，2019（07）：244+96.

[2]王古森.探索HTML5在高职院校信息化教学中的应用[J].电脑知识与技术，2018，14（33）：142-143.