等语义化标签，替代传统嵌套，提升代码可读性与搜索引擎友好度。
1、新建一个文本文件，将后缀名改为.html，用浏览器直接打开验证效果。
2、在
内编写：。
3、接着添加：。
4、在浏览器中右键“查看页面源代码”，确认标签名称与嵌套层级是否符合规范。
二、使用HTML5原生多媒体标签嵌入音视频
无需依赖Flash插件，
1、准备一个MP4格式的视频文件（如demo.mp4），与HTML文件放在同一文件夹下。
2、插入代码：。
3、保存后刷新页面，检查视频是否可播放、是否显示控制条、是否支持全屏。
4、替换为标签测试音频：。
三、实践HTML5增强型表单控件与属性
HTML5新增email、url、number、date、required、placeholder等属性和输入类型，前端即可完成基础数据校验。
1、创建表单区域：。
2、添加日期选择器：，观察浏览器自动渲染的日历控件。
3、设置数值范围限制：。
4、在Chrome中提交空邮箱字段，确认浏览器是否弹出“请填写此字段”提示。
四、启用HTML5 Canvas绘图基础
Canvas提供位图画布，通过JavaScript API绘制图形、动画和交互内容，是前端可视化的重要入口。
1、在HTML中添加：。
2、在
3、绘制矩形：ctx.fillStyle = '#4CAF50'; ctx.fillRect(10, 10, 150, 80);。
4、刷新页面，确认绿色矩形是否出现在画布左上角指定坐标位置。
五、使用localStorage实现页面级数据持久化
localStorage允许在浏览器中长期保存字符串数据，关闭页面后仍可读取，适合缓存用户偏好或表单草稿。
1、在控制台（F12 → Console）中执行：localStorage.setItem('username', 'testuser');。
2、刷新页面后再次执行：console.log(localStorage.getItem('username'));，确认输出testuser。
3、在HTML中添加按钮，绑定点击事件：localSto
rage.removeItem('username');。
4、点击按钮后执行getItem验证，确认返回值为null。
