用 4 个核心特性，玩转 HTML5
本站是《HTML5 新增特性综合实践作业》的在线学习示例：以 <header> <nav> <aside> <main> <section> <footer> 等语义化标签搭建整体框架，并集成 HTML5 新表单、audio/video 多媒体、WebStorage 本地存储、Canvas 画布绘图四大核心功能。每个板块都可以直接动手操作。
学员报名表单演示
演示 HTML5 新增的输入类型（email、tel、date、range、color、search）与原生表单校验属性（required、pattern、maxlength、autocomplete）。提交时浏览器先自动校验，全部通过后才会显示结果。
audio / video 标签演示
HTML5 让浏览器无需插件即可播放音视频。本页在打开时由 JavaScript 现场生成一段示例音频（WAV），并可一键录制一段 Canvas 动画为 WebM 视频——两者都通过 <audio> / <video> 标签的 controls 属性播放，再用 JS 调用 play / pause / playbackRate 等原生 API 控制。
🎵 <audio controls>
正在生成示例音频…
🎬 <video controls>
🎬 尚无视频源
点击下方「生成演示视频」现场录制一段 3 秒动画
点击下方「生成演示视频」现场录制一段 3 秒动画
点击「生成演示视频」，用 Canvas + MediaRecorder 录制一段 3 秒动画。
localStorage / sessionStorage 学习笔记
下方笔记列表使用 localStorage 持久保存——关闭页面、重开浏览器都还在；右侧的浏览次数使用 sessionStorage——只在当前标签页会话内计数，关闭标签页即清零。
| 标题 | 内容 | 时间 | 操作 |
|---|
localStorage 笔记条数0
🔁 sessionStorage 本页浏览次数0
🕑 最近访问时间—
用 Canvas 2D 绘制一朵花
通过 getContext("2d")、translate / rotate / ellipse 等画布 API 程序化绘制花朵，可实时调整花瓣数量、颜色与大小；也可以切换到「自由绘画」模式在画布上直接作画，或导出 PNG。