第 3 章 HTML5 编程基础教案

谢从华，高蕴梅 著.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 技术在提升用户体验的同时，所涉及的安全、隐私、法律等社会问题，培养严谨负责的职业态度，在技术开发过程中注重用户权益保护、遵循法律法规，实现技术与社会的和谐发展。

二、学情分析

学生已具备一定的 HTML 基础，熟悉基本的网页结构与常见标签的使用，但对于 HTML5 这个进阶内容，可能会面临一些挑战。一方面，他们对 HTML5 新增的丰富特性充满好奇与期待，渴望利用这些新技术制作出更酷炫、功能更强大的网页，学习积极性较高；另一方面，由于 HTML5 涵盖的知识面广，新标签、新 API 众多，且部分功能涉及较为复杂的 JavaScript 交互逻辑，学生在初次接触时可能会感到困惑，出现概念混淆、代码编写错误等问题。例如，在理解 Web 存储的不同机制、canvas 绘图的复杂方法以及地理定位的原理与应用时，需要教师耐心引导，通过实例演示、对比分析等方式帮助学生逐步掌握。此外，学生在将 HTML5 技术综合运用到实际项目中时，可能会在设计思路、代码组织、技术选型等方面遇到困难，需要加强项目实践指导与经验分享。

三、教学重难点

1. 教学重点：

    - HTML5 Web 存储：深入讲解 localStorage 和 sessionStorage 的原理、用法及区别，重点突出数据存储、读取、删除的操作方法，结合实际案例让学生理解如何运用这两种存储方式解决不同场景下的数据管理问题，如用户偏好设置的持久保存与购物车数据的临时存储。

    - HTML5 新标签：详细介绍各类新增标签的语法、功能与适用场景，通过大量实例展示如何运用这些标签构建语义化更强、交互性更好的网页结构，如使用 article 标签组织独立文章内容、利用 nav 标签创建导航菜单、借助 canvas 标签绘制动态图形，让学生熟练掌握并能在实际项目中灵活运用。

    - HTML5 多媒体：重点掌握 video、audio 等多媒体标签的属性设置与使用技巧，包括如何实现视频音频的播放控制、自适应播放、字幕添加等功能，以及与 source 标签配合实现多格式媒体资源的兼容播放，使学生能够在网页中流畅地展示各类多媒体内容，提升用户体验。

    - HTML5 地理定位：清晰阐述 Geolocation API 的使用方法，包括获取位置信息的步骤、处理错误的策略以及监控位置变化的操作，结合实际应用场景（如地图导航、位置分享）讲解如何与第三方地图 API（如高德地图）结合使用，实现基于地理位置的功能开发，让学生理解并掌握地理定位在现代 Web 应用中的关键作用。

2. 教学难点：

- Web 存储的安全与优化：深入剖析 Web 存储面临的安全风险，如 XSS 攻击导致本地存储信息泄露，引导学生理解如何采取有效措施（如数据加密、合理设置存储范围）进行防范，同时掌握优化存储性能的方法，如避免存储过多冗余数据、合理选择存储时机，这需要学生具备一定的安全意识与系统优化思维。

 - canvas API 的复杂绘图操作：canvas API 提供了丰富但复杂的绘图功能，如绘制复杂图形（包含渐变、阴影、文本环绕等效果）、实现图像的动态处理（动画绘制、实时特效添加），学生在理解绘图原理、掌握绘制技巧以及协调多种绘图方法实现复杂视觉效果方面可能存在困难，需要教师通过逐步拆解绘图步骤、详细讲解绘图参数并结合大量实例进行演示。

- 地理定位的跨平台兼容性与权限问题：由于不同浏览器、设备对 HTML5 地理定位的支持存在差异，以及涉及用户隐私权限获取等问题，学生在实际应用中可能会遇到定位不准确、权限申请失败等情况，如何引导学生了解并解决这些跨平台兼容性与权限问题，确保地理定位功能的稳定可靠运行，是教学中的难点之一，需要结合实际案例进行深入分析与针对性指导。

四、教学方法

1. 案例教学法：通过展示大量丰富、生动的 HTML5 实际应用案例，如知名网站的 HTML5 页面布局、热门 Web 应用的功能实现（抖音网页版的视频播放、百度地图的定位导航），让学生在具体情境中感受 HTML5 技术的魅力与实用性，激发学习兴趣，同时引导学生分析案例背后的技术原理与实现方法，加深对知识的理解。

2. 项目驱动法：布置一系列基于 HTML5 的项目任务，如开发个人博客网站（运用 HTML5 结构标签与样式设计页面、利用 Web 存储保存用户设置、通过 canvas 绘制个性化头像）、制作在线音乐播放器（结合 audio 标签与 JavaScript 实现播放控制、添加歌词同步显示功能）、构建基于位置的社交应用（运用地理定位获取用户位置、结合地图 API 展示周边好友与活动信息），让学生在项目实践中主动探索、综合运用所学知识，培养解决实际问题的能力与团队协作精神。

3. 小组讨论法：针对 HTML5 技术中的重点、难点问题，如 Web 存储的安全策略选择、canvas 绘图的优化技巧、地理定位的权限处理，组织学生进行小组讨论，鼓励学生分享自己的见解与经验，促进学生之间的思想碰撞，拓宽思维视野，教师在讨论过程中适时引导、答疑解惑，帮助学生深化对知识的掌握。

4. 演示教学法：利用代码编辑器与浏览器实时演示 HTML5 代码的编写过程与运行效果，如详细演示 canvas 绘图的每一个步骤、现场展示地理定位获取位置信息的操作流程，让学生直观地看到代码与效果之间的对应关系，降低学习难度，同时讲解过程中注重引导学生观察细节、思考原理，培养学生的自主学习能力。

五、教学过程

1. 导入

- 展示一些采用 HTML5 技术制作的精美网页、炫酷应用案例，如具有流畅动画效果的网页游戏、支持实时视频互动的在线教育平台、能精准定位并提供周边服务的生活类 APP 网页端，吸引学生注意力，引发学生对 HTML5 强大功能的惊叹与好奇。

- 提问引导：“大家已经学习了基础的 HTML 知识，能够制作出简单的网页，但与这些令人惊艳的 HTML5 应用相比，是不是感觉还有很大差距？想不想知道它们是如何利用 HTML5 实现这些神奇功能的？今天，就让我们一起走进 HTML5 的精彩世界，探索其中的奥秘。”

2. 知识讲解

- HTML5 Web 存储

- 以用户登录网站为例，对比传统 cookie 存储用户登录凭证的局限性（如存储容量小、每次请求都携带、效率低），引出 HTML5 的 localStorage 和 sessionStorage 作为解决方案，讲解它们的存储原理，强调数据存储在客户端本地，且不随每次服务器请求传递，大大提高了性能。

- 详细演示 localStorage 的使用方法：判断浏览器支持情况（通过代码示例展示如何检测浏览器是否支持 localStorage）、数据存储（直接赋值、使用 setItem 方法）、数据读取（直接获取、使用 getItem 方法）、数据删除（removeItem 方法、clear 方法）以及遍历存储数据（利用 key 方法结合 getItem 方法），并结合实例展示如何存储用户的长期偏好设置，如页面主题颜色、字体大小等，让学生看到数据持久化存储的效果。

- 同样地，讲解 sessionStorage 的特点与用法，重点突出其临时性存储的特性，适用于存储用户在单次会话中的临时数据，如购物车信息，以购物流程为例，演示如何在用户打开网页添加商品到购物车、结账过程中使用 sessionStorage 管理购物车数据，关闭浏览器后数据自动清除。

- 分析 Web 存储可能面临的安全风险，如 XSS 攻击导致本地存储信息泄露，通过代码示例展示攻击者如何利用脚本遍历本地存储窃取用户敏感信息，引导学生思考防范措施，如对存储数据进行加密、避免在本地存储敏感信息（如用户密码），培养学生的安全意识。

- HTML5 内容标签

- 以提升网页用户输入体验为切入点，介绍 datalist 标签，通过代码示例展示如何与 input 元素配合使用，提供输入提示功能，如在搜索框输入关键词时自动弹出相关建议列表，让学生理解其便捷性与实用性，鼓励学生动手修改示例代码，尝试不同的选项设置，感受该标签对用户输入效率的提升。

- 讲解 details 和 summary 标签的配合使用，以一篇科技文章为例，将文章的摘要部分用 summary 标签包裹作为可点击展开的标题，details 标签内放置详细内容，点击标题展开或收起详细内容，演示过程中引导学生思考这种标签组合在信息展示上的优势，如节省页面空间、突出重点信息，让学生体会语义化标签对内容结构化呈现的重要性。

- 介绍 output 标签，结合数学计算表单的实例，讲解其如何根据相关输入元素的变化实时显示计算结果，如在加法计算器中，用户输入两个数字，output 标签自动更新显示两数之和，通过代码演示展示 oninput 事件的触发机制与 output 标签的动态更新原理，让学生掌握利用该标签实现简单交互功能的方法。

- 依次介绍 time 标签用于标记时间信息（包括日期、具体时间、发表日期等）的规范用法，wbr 标签在文本排版中规定换行位置的作用，通过实例展示让学生了解这些标签在提升网页信息准确性与可读性方面的价值，引导学生在自己的网页项目中合理运用。

- HTML5 结构标签

- 强调 HTML5 结构标签对构建语义化网页结构的重要性，以一个完整的新闻资讯网页为例，从整体布局入手，讲解<!DOCTYPE>声明作为 HTML5 文档开头的必要性，它指示浏览器使用 HTML5 标准解析页面，让学生明确其在网页开发中的基础性地位。

- 详细介绍 article 标签用于定义独立的自包含内容，如新闻文章、博客帖子等，展示如何在新闻页面中使用 article 标签包裹每一篇新闻，使其结构清晰，可独立分发，结合 CSS 样式设置，让学生看到文章标题、作者、发布时间等信息在该标签下的合理布局呈现。

- 讲解 header、nav、footer 等标签在网页头部、导航、底部区域的典型应用，以网站首页为例，演示如何使用 header 标签构建网页头部，包含网站 logo、导航菜单（用 nav 标签实现，展示多种导航链接布局方式），footer 标签用于展示版权信息、友情链接等底部内容，通过实例让学生掌握这些标签在构建网页基本架构中的作用，提升网页的可维护性与用户导航体验。

- 介绍 section 标签用于对页面内容进行分块，如将一篇长篇文章按章节划分成不同的 section，每个 section 有独立的标题，与 article 标签区分开来，避免混淆，同时讲解 aside 标签用于展示与主要内容相关但相对独立的侧边栏信息，如文章的相关推荐、广告位等，通过实际网页布局演示，让学生理解如何运用这些标签优化网页内容组织，提高信息传达效率。

- 简要提及 hgroup、figure、figcaption 等标签在标题组合、独立流内容（如图像、图表）展示及添加标题说明方面的用法，通过图片展示、文章配图等实例，让学生了解这些标签在丰富网页视觉内容与增强语义表达上的功能，引导学生在合适的场景运用，提升网页的专业性。

- HTML5 多媒体标签

- 以在线视频播放网站为背景，介绍 video 标签，详细讲解其常用属性，如 autoplay（自动播放）、controls（显示播放控件）、height（设置播放器高度）、width（设置播放器宽度）、poster（指定视频封面）、src（视频源地址）等，通过代码示例展示如何在网页中嵌入视频，并实现基本的播放控制功能，让学生体验到在网页上轻松播放视频的便捷性，同时提醒学生注意视频版权问题以及前端屏蔽下载功能的局限性。

- 类似地，讲解 audio 标签用于在网页中嵌入音频内容，介绍其属性与使用方法，包括单独使用 src 属性指定音频源、与 source 标签配合实现多格式音频兼容播放，通过音乐播放页面的实例，展示如何添加播放按钮、进度条等控件，让学生掌握音频播放的实现技巧，提升网页的多媒体交互性。

- 简要介绍 source 标签为 video 和 audio 媒介元素定义媒介资源的作用，讲解其属性（media、src、type）的含义与用法，通过实例展示如何根据不同设备、浏览器对媒体格式的支持情况，灵活配置 source 标签，提供多种可选的视频/音频文件，确保媒体内容的广泛兼容性，让学生理解其在多媒体播放优化中的关键地位。

- 提及 track 标签为音频和视频媒体元素规定外部文本轨道的功能，如添加字幕文件，让学生了解多媒体内容无障碍访问的重要性及实现方式，培养学生的包容性设计思维。

- HTML5 状态标签

- 以进度条展示任务完成情况为例，介绍 progress 标签，讲解其属性（max 表示任务总量、value 表示已完成量）的用法，通过代码示例展示如何结合 JavaScript 动态更新 value 属性，实现任务进度的实时显示，如文件上传进度、加载动画进度，让学生掌握利用该标签反馈用户操作状态的方法，提升网页交互的即时性与友好性。

- 简要介绍 meter 标签用于定义已知范围或分数值内的标量测量，如显示电量、磁盘空间使用比例等，通过实例展示其属性（form、high、low、max、min、optimum、value）的设置与效果呈现，让学生了解其与 progress 标签的区别，在合适的数据展示场景正确运用。

- 介绍 mark 标签用于突出显示部分文本，如在文章中标记重点内容，通过简单的文本段落示例，展示如何使用 mark 标签将关键语句以黄色背景突出显示，让学生掌握提升文本信息重点突出的技巧，增强网页内容的可读性。

3. 小组实践

- 将学生分成小组，每组 4 - 5 人，布置小组实践项目：要求利用所学的 HTML5 知识，设计并制作一个简单的在线学习平台页面。具体任务包括：

- 使用恰当的 HTML5 结构标签（如 <article>、<section>、<nav> 等）构建页面布局，划分出课程列表、课程详情、用户资料、学习进度展示等板块，确保页面结构清晰、语义明确，便于后期维护与扩展。

- 在课程列表部分，运用 <datalist> 标签为课程搜索框添加智能提示功能，方便用户快速查找感兴趣的课程；在课程详情页面，使用 <details> 和 <summary> 标签实现课程大纲的折叠展示，节省页面空间，提升用户交互体验。

- 利用 <video> 或 <audio> 标签嵌入课程相关的多媒体教学资源，设置好播放控件、封面等属性，确保视频音频播放流畅；并通过 <canvas> 标签绘制一个简单的学习进度图表，以可视化方式展示用户在各个课程模块的学习完成情况，如用不同颜色填充已学和未学部分，增强页面的直观性。

- 尝试使用 HTML5 Web 存储（如 localStorage）记录用户的学习偏好，如视频播放音量、字幕显示设置等，实现个性化学习体验，当用户再次访问页面时能自动加载上次的设置。

- 教师在各小组间巡视，观察学生实践过程，及时发现问题并给予针对性指导，如纠正标签使用错误、优化布局设计、协助解决代码逻辑问题，鼓励小组成员之间相互交流、协作，共同攻克技术难题，培养团队合作精神。

4. 成果展示与点评

- 每组选派一名代表上台展示小组实践成果，通过投影仪将制作的在线学习平台页面展示给全班同学，演示页面的各项功能，包括结构导航、多媒体播放、交互效果、个性化设置等，同时简要介绍小组的设计思路、技术选型以及遇到的困难与解决方案，锻炼学生的表达能力与项目总结能力。

- 其他小组同学进行提问与评价，从功能完整性、用户体验、技术运用合理性等方面提出意见与建议，促进学生之间的相互学习与共同进步；教师随后进行全面点评，首先肯定各小组的创新点与努力付出，对学生在 HTML5 知识运用上的亮点给予表扬，如合理的标签语义化运用、出色的 canvas 绘图效果、有效的 Web 存储应用等，增强学生的自信心与学习动力。然后针对各小组存在的普遍问题进行集中讲解，如部分小组页面布局混乱、标签嵌套不规范、JavaScript 交互代码冗余等，提出改进方向与优化建议，帮助学生进一步提升项目质量与技术水平，加深对 HTML5 编程的理解。

5. 总结拓展

- 教师对本节课内容进行总结回顾，梳理 HTML5 编程基础的重点知识，包括 Web 存储、各类新标签、多媒体与绘图、地理定位等核心要点，强调这些知识在构建现代、高效、交互性强的 Web 应用中的关键作用，强化学生记忆。

- 拓展延伸：向学生介绍 HTML5 技术在新兴领域的应用趋势，如 HTML5 结合 WebAssembly 实现接近原生性能的复杂应用开发、在物联网设备 Web 界面构建中的广泛运用、助力 Progressive Web Apps（PWA）提供类原生应用体验等，激发学生对 HTML5 后续学习的兴趣与探索欲望，引导学生在课后自主学习、深入研究，不断拓宽技术视野，跟上 Web 技术发展的前沿步伐。

六、课后作业（Assignment）

1. 基础巩固：

    - 复习本节课所学的 HTML5 重点知识，整理笔记，绘制思维导图，梳理各知识点之间的逻辑关系，加深对知识体系的理解与记忆。

    - 完成课后练习题，包括 HTML5 标签的语法填空、Web 存储操作的代码补全、多媒体标签属性的选择题等，通过练习巩固所学知识，强化对关键概念与技术细节的掌握。

2. 实践提升：

    - 选择一个自己感兴趣的网站主题（如美食分享、旅游攻略、运动健身等），运用 HTML5 技术重新设计并制作一个静态网页页面。要求至少使用 5 种本节课所学的 HTML5 新标签或特性，如利用 <article> 标签组织内容、<video> 标签嵌入相关视频介绍、<canvas> 标签绘制个性化图标、通过 localStorage 存储用户的浏览历史，注重页面布局合理性、内容丰富性与交互友好性，提升网页的整体质量与用户体验。

    - 在制作过程中，记录遇到的问题及解决方法，形成技术总结文档，培养学生自主解决问题的能力与技术文档撰写能力，下节课进行小组内分享交流，促进共同成长。

3. 拓展探索：

    - 查阅资料，了解 HTML5 在移动 Web 开发中的优势与挑战，如与移动端设备特性的适配（屏幕尺寸、触摸交互）、性能优化策略、跨平台开发框架（如 React Native 结合 HTML5）等，并撰写一篇 500 字左右的小论文，阐述自己的见解与思考，激发学生对 HTML5 前沿应用的探索热情，拓宽技术视野，培养学生的技术研究能力与行业洞察力。