第 3 章 HTML5 编程基础教案

caterpillarxie

于 2025-01-08 23:02:14 发布

阅读量732

点赞数 3

文章标签： html5 前端 html

本文链接：https://blog.youkuaiyun.com/caterpillarxie/article/details/145019803

版权

谢从华，高蕴梅著.Web前端设计基础入门——HTML5、CSS3、JavaScript（微课视频版）,2023, 清华大学出版社. ISBN：9787302641261.

一、教学目标（Objectives）

1. 知识目标：

- 深入理解 HTML5 相较于传统 HTML 的新特性与优势，清晰阐述其在构建现代 Web 应用中的关键作用。

- 精准掌握 HTML5 新增的 Web 存储机制，包括 localStorage 和 sessionStorage 的特点、适用场景、存储方式、数据操作方法（增删改查）以及与传统 cookie 存储的差异。

- 熟悉 HTML5 引入的各类新标签，如内容标签（datalist、details、summary、output、time、wbr）、结构标签（<!DOCTYPE>、article、header、nav、section、aside、hgroup、figure、figcaption、footer、dialog、bdi、bdo）、多媒体标签（video、audio、source、track、embed）、状态标签（meter、progress、mark）、菜单标签（menu、menuitem、command）、ruby 注释标签（ruby、rt、rp）的语法、功能及属性设置，能够准确识别各标签在网页布局与功能实现中的作用。

- 透彻理解 HTML5 canvas API 的基本原理与核心功能，熟练掌握画布绘制状态的设置方法（路径绘制、图形填充、渐变运用、保存与恢复状态）、图像绘制技巧（定位、剪切、缩放）、图形绘制操作（圆弧绘制、文本渲染）以及特效制作（阴影、透明度、几何变换）。

- 全面了解 HTML5 地理定位的原理、方法与应用，熟知 Geolocation API 的使用流程，包括获取用户位置信息（经纬度、海拔等）的多种方式（GPS、Wi-Fi 定位、手机信号定位），掌握处理地理定位错误的策略，明确地理定位涉及的数据保护、法律、能源、权限等社会问题及相应解决方案，了解中国北斗导航系统在 HTML5 地理定位中的应用优势。

2. 能力目标：

- 能够独立运用 HTML5 的 Web 存储技术，根据不同的业务需求（如用户登录状态保存、临时数据缓存等）合理选择并灵活运用 localStorage 和 sessionStorage 进行高效的数据存储与管理，解决实际应用中的数据持久化与临时性存储问题。

- 熟练使用 HTML5 新增标签进行网页设计，能结合 CSS 样式，搭建结构清晰、内容丰富、交互友好的网页页面，提升网页的语义化程度与用户体验，满足多样化的业务展示需求，如创建具有智能输入提示的表单、制作图文并茂的文章展示页面、构建具有导航菜单的网站架构等。

- 具备利用 canvas API 开发可视化元素的能力，能根据设计需求绘制各类图形（图表、图标、动画角色等）、处理图像（裁剪、合成、特效添加）、展示文本信息（标题、说明、动态字幕等），制作出具有吸引力的动态或静态视觉效果，为网页增添交互性与趣味性，如开发简单的数据可视化图表、制作网页小游戏的图形界面、设计个性化的图片展示特效。

- 能够在实际项目中正确运用 HTML5 地理定位功能，通过编写 JavaScript 代码，精准获取用户地理位置信息，并结合地图 API（如高德地图）进行位置展示、路线规划、周边信息搜索等应用开发，实现基于位置的服务功能，如开发具有定位打卡功能的办公应用、打造基于位置推荐的旅游导览小程序、构建具有实时位置追踪的物流配送监控系统。

3. 情感目标：

- 激发对 HTML5 前沿技术的探索热情，培养勇于尝试新技术、挑战复杂项目的创新精神，主动关注 HTML5 及相关 Web 技术的发展动态，不断更新知识体系，提升技术素养。

- 树立正确的技术应用价值观，充分认识到 HTML5 技术在提升用户体验的同时，所涉及的安全、隐私、法律等社会问题，培养严谨负责的职业态度，在技术开发过程中注重用户权益保护、遵循法律法规，实现技术与社会的和谐发展。