内联js需注意四点：dom时机（脚本放前或加defer）、模块系统（type="module"行为不同）、html转义（
直接在 <script></script> 标签里写 JS，但位置很关键
浏览器解析 HTML 是从上到下顺序执行的。如果把 <script></script> 放在 里又没加 defer 或 async，JS 会立刻下载并执行，此时 DOM 还没加载完，document.getElementById 之类操作大概率返回 null。
- 最稳妥的做法：把
<script></script>放在前面（即底部） - 想放
？必须加defer属性：<script defer>console.log('ok');</script> - 纯逻辑、不操作 DOM 的代码（比如工具函数定义）可以放
，但别急着调用
type="module" 和普通脚本混用会出问题
HTML5 支持 ES 模块语法，但一旦用了 type="module"，行为就和传统脚本完全不同：自动延迟执行、默认严格模式、不共享全局作用域、必须处理 CORS 等。
- 普通脚本：
<script>let x = 1;</script>→x在全局可访问 - 模块脚本：
<script type="module">let x = 1;</script>→x不会挂到window上 - 两个模块脚本之间也不能直接共享变量，得靠
export/import - 别把
type="module"和非模块脚本交叉依赖——浏览器不会帮你 resolve
内联脚本里不能用 和 <code>& 字符
HTML 解析器看到 就以为是新标签开始，<code>& 则可能触发实体解析，导致 JS 语法报错或截断。
- 错误写法：
<script>if (a < b && c > 0) {...}</script>→ 可能被解析成<b> 开头的非法标签</b> - 正确写法：用
<替代，<code>&替代&，或者干脆把逻辑拆到外部文件 - 更推荐：复杂逻辑一律写进外部 JS 文件，用
<script src="xxx.js"></script>引入
调试时注意控制台报错位置是“inline script”还是具体行号
浏览器对内联脚本的错误定位比较模糊，尤其当多个 <script></script> 块紧挨着时，报错可能只显示 “inline script:32”，但实际第 32 行属于另一个块。
立即学习“前端免费学习笔记（深入）”；
- 每个
<script></script>块单独起一行空行，方便区分边界 - 避免在同一个 HTML 里塞七八个
<script></script>—— 合并或抽离更利于排查 - Chrome 控制台的 “Sources” 面板里，内联脚本会显示为
VMxxxx，点进去能看到真实上下文
