直接打开HTML文件即可运行，无需编译或额外运行环境；但含fetch/import的代码须通过本地服务器运行，且需注意file://协议限制和静态资源路径问题。
直接打开 HTML 文件就能运行，不用编译
html5 代码本质是文本，浏览器原生支持，index.html 双击或拖进 chrome/firefox 就能执行。不需要 node、python 或任何“运行环境”——只要文件后缀是 .html，且内容符合基本结构（有 <html>、<body>），浏览器就能解析渲染。
常见错误现象：This page isn’t working、空白页、控制台报 Failed to load resource: net::ERR_FILE_NOT_FOUND，大概率是路径写错或没用本地服务器跑含 fetch/import 的代码。
- 确保文件以
.html结尾，不是.txt或隐藏了扩展名 - 右键“用浏览器打开”，别用记事本双击——它可能调用 IE 兼容模式
- 含
fetch('./data.json')或import的代码，必须通过本地服务器（如python3 -m http.server）运行，不能直接双击
浏览器控制台是调试 HTML5 的第一现场
按 F12 打开开发者工具，切到 Console 标签页，所有 JS 错误、console.log() 输出、资源加载失败都会实时显示。HTML5 不是黑盒，出问题先看这里。
使用场景：DOM 没更新？按钮点不动？Canvas 画不出？90% 是 JS 报错中断执行，或元素还没加载完就操作了 document.getElementById()。
-
Uncaught ReferenceError: myFunc is not defined→ 函数声明位置错了，或脚本没加载成功 -
Cannot read property 'addEventListener' of null→getElementById返回null，DOM 节点不存在或 JS 执行太早 - 想确认 HTML 是否被正确解析？在
Console输入document.body.innerHTML看实时结构
<script> 放哪儿影响执行时机和 DOM 可用性
放在 <head> 里，默认同步阻塞解析，JS 运行时 <body> 内容还没生成，document.getElementById 必然返回 null；放 </body> 前则 DOM 已就绪，最稳妥。
立即学习“前端免费学习笔记（深入）”；
参数差异：<script src="a.js"></script> 和 <script src="a.js" defer></script> 都不阻塞 HTML 解析，但 defer 保证执行顺序，async 则谁下载完谁先执行。
- 纯逻辑、无 DOM 操作的脚本（如工具函数库）可放
<head>+defer - 依赖
#myButton的点击事件绑定，必须等该元素存在——放</body>前，或加DOMContentLoaded监听 - 用
type="module"的脚本默认defer行为，且不支持内联脚本访问全局变量
移动端真机调试比模拟器更准，但得配好基础配置
Chrome DevTools 的设备模拟（Device Mode）只能模拟视口和 UA，无法还原真实触摸事件、摄像头权限、PWA 安装流程或 iOS Safari 的 CSS 渲染差异。真机调试才是关键一步。
性能 / 兼容性影响：iOS Safari 对 position: sticky、IntersectionObserver、CSS @supports 的支持版本滞后，Android WebView 则可能禁用 localStorage 或降级 WebRTC。
- iPhone 连 Mac：Safari → 开发 → [你的电脑名] → 选中页面，控制台日志和断点全可用
- Android 连电脑：Chrome 地址栏输入
chrome://inspect，勾选Discover USB devices - 避免用
localhost测试 PWA，真机访问需 HTTPS 或127.0.0.1，否则navigator.serviceWorker.register()直接失败
file:// 协议下直接失效。 
