JavaScript嵌入HTML有五种标准方式：一、内联脚本，直接在<script>标签中写代码；二、内部脚本，通过src属性引入外部.js文件；三、延迟执行，用defer属性确保DOM解析后执行；四、异步加载，用async属性实现非阻塞下载与执行；五、动态创建，运行时用DOM操作插入script元素。
如果您希望在网页中执行 JavaScript 代码，必须将 JS 正确嵌入 HTML 文档结构中。以下是实现 JS 嵌入 HTML 的几种标准方式：
一、内联脚本（使用 script 标签直接写入 HTML）
该方式将 JavaScript 代码直接写在 HTML 文件的 <script> 标签内部，适用于少量、页面专属的逻辑。
1、在 HTML 文件的 <head> 或 <body> 区域中插入 <script> 标签。
2、在 <script> 标签内部编写 JavaScript 代码，例如：<script>alert("Hello");</script>。
立即学习“前端免费学习笔记（深入）”；
3、确保 <script> 标签闭合，且未被其他标签错误包裹或截断。
二、内部脚本（script 标签引入外部 JS 文件）
该方式通过 src 属性引用外部 .js 文件，利于代码复用与维护，浏览器会自动按路径加载并执行。
1、创建一个纯文本文件，扩展名为 .js，例如 main.js，并保存有效 JavaScript 代码。
2、在 HTML 文件中插入 <script src="main.js"></script> 标签。
3、src 属性值必须为相对路径或绝对 URL，且不能同时在标签内编写脚本内容。
三、延迟执行脚本（使用 defer 属性）
该方式确保外部脚本在 HTML 解析完成后、DOMContentLoaded 事件触发前执行，适合依赖 DOM 结构的脚本。
1、在 <script> 标签中添加 defer 属性，例如：<script src="app.js" defer></script>。
2、defer 仅对带有 src 属性的外部脚本生效，且多个 defer 脚本按出现顺序执行。
3、将含 defer 的 <script> 标签置于 <head> 中，无需等待其加载完成即可继续解析后续 HTML。
四、异步加载脚本（使用 async 属性）
该方式让外部脚本异步下载并立即执行，不阻塞 HTML 解析，适用于独立、无依赖关系的功能模块。
1、在 <script> 标签中添加 async 属性，例如：<script src="analytics.js" async></script>。
2、async 脚本执行时机不可预测，可能早于 DOM 构建完成，因此不宜操作尚未存在的元素。
3、多个 async 脚本的执行顺序不保证，彼此无依赖时方可使用。
五、动态创建 script 元素（运行时注入）
该方式通过 DOM 操作在页面加载后创建并插入 <script> 元素，适用于按需加载或条件执行场景。
1、使用 document.createElement("script") 创建 script 元素。
2、设置其 src 属性或 text 属性，例如：script.src = "module.js"; 或 script.text = "console.log(1);";。
3、调用 document.head.appendChild(script) 或 document.body.appendChild(script) 将其插入文档流。
4、动态插入的 script 默认异步执行，若需顺序控制，应监听 load 事件并链式加载。
