实训内容应按任务组织，每项含目标、实现方式（关键代码）、实际效果、卡点及解决；须写本地服务器运行原因及兼容性实测细节。
HTML5 实训报告的“实训内容”部分，不是写你学了什么，而是写你做了什么、怎么做的、遇到了什么问题——重点在可验证的操作过程。
怎么组织实训内容的结构才不空泛
学生常把“实训内容”写成知识点罗列，比如“学习了 <canvas></canvas> 标签”“了解了语义化标签”。这不算实训内容，只是听课笔记。真正的实训内容必须体现动手痕迹：
- 每个小节对应一个明确任务（如“用
localStorage保存用户输入的表单数据”） - 每项任务包含：目标 → 实现方式（关键代码片段或步骤）→ 实际效果（截图/控制台输出可选）→ 卡点及解决（哪怕只是改了个
id拼写） - 避免出现“掌握了”“熟悉了”这类无法验证的表述，换成“实现了……”“调试后使……正常工作”
哪些代码和配置必须写进实训内容
不是所有代码都要贴，但以下几类必须出现，且用
标签包裹：</p>
<ul>
<li>核心 HTML5 特性调用点：如 <code>document.getElementById("myCanvas").getContext("2d")
navigator.geolocation.getCurrentPosition()、indexedDB.open("myDB")
input 的 type="date" 在 Safari 中兼容性差，要注明测试环境videoPlayer、uploadForm —— 这些是实际工程痕迹，不能笼统说“某个元素”为什么本地打开 index.html 会报 SecurityError
这是 HTML5 实训中最常被忽略的实操细节。很多同学直接双击打开 HTML 文件，结果 fetch() 失败、localStorage 读写异常、geolocation 拒绝授权，报错信息里带 SecurityError 或 NotSupportedError。
立即学习“前端免费学习笔记（深入）”；
- 根本原因：现代浏览器对
file://协议限制严格，多数 HTML5 API（尤其是涉及异步、存储、设备访问的）只允许在http://或https://下运行 - 解决方法：必须起一个本地服务器，哪怕最简陋的：
npx http-server（需 Node.js）、python3 -m http.server（Python 3 自带） - 别用 VS Code 插件“Live Server”就以为万事大吉——检查地址栏是否真的是
http://127.0.0.1:xxxx，而不是vscode-file://类伪协议
实训内容里怎么提兼容性问题才算真实
写“IE 不支持”没意义，IE 已淘汰；真正该写的，是当前主流浏览器中仍存在的差异：
-
<dialog></dialog>在 Firefox 需要showModal()，Chrome 支持但 Safari 完全不支持（截至 iOS 17.5） -
AudioContext在 Safari 中必须由用户手势触发（如点击按钮），否则报InvalidStateError -
FormData传文件时，Safari 对append("file", input.files[0])的处理比 Chrome 更敏感，空文件易导致TypeError - 写兼容性，必须标注测试机型/系统版本，例如：“在 iPhone 14 Pro / iOS 17.4 上，
getBattery()返回undefined”
真正难写的不是技术实现，而是把“我改了三次 event.preventDefault() 才让表单不跳转”这种琐碎但真实的过程，准确还原出来。
