JS代码如何嵌入HTML5页面

本文深入解析了JavaScript代码嵌入HTML5页面的核心要点，重点提醒开发者在使用内联脚本时必须关注四大关键问题：DOM加载时机（合理选择脚本位置或使用defer属性）、模块化行为差异（type="module"带来的自动延迟执行与严格模式）、HTML字符转义安全风险，以及由此引发的常见错误与最佳实践，帮助前端开发者写出更可靠、高效且符合现代标准的嵌入式JS代码。

直接在

纯逻辑、不操作 DOM 的代码（比如工具函数定义）可以放 ，但别急着调用

type="module" 和普通脚本混用会出问题

HTML5 支持 ES 模块语法，但一旦用了 type="module"，行为就和传统脚本完全不同：自动延迟执行、默认严格模式、不共享全局作用域、必须处理 CORS 等。

• 普通脚本： → x 在全局可访问
• 模块脚本： → x 不会挂到 window 上
• 两个模块脚本之间也不能直接共享变量，得靠 export/import
• 别把 type="module" 和非模块脚本交叉依赖——浏览器不会帮你 resolve

内联脚本里不能用 < 和 & 字符

HTML 解析器看到 < 就以为是新标签开始，& 则可能触发实体解析，导致 JS 语法报错或截断。

• 错误写法： → 可能被解析成 开头的非法标签
• 正确写法：用 < 替代 <，& 替代 &，或者干脆把逻辑拆到外部文件
• 更推荐：复杂逻辑一律写进外部 JS 文件，用 引入

调试时注意控制台报错位置是“inline script”还是具体行号