可通过四种方式将JS嵌入HTML：一、使用<script>标签在HTML的head或body中直接编写代码，如<script>alert("Hello World");</script>；二、将JS代码保存为外部.js文件，通过<script src="script.js"></script>引入；三、为外部脚本添加defer或async属性优化加载，如<script src="app.js" defer></script>，确保页面渲染不被阻塞；四、在HTML元素的事件属性中直接写JS代码，如<button onclick="alert('点击触发')">点我</button>，响应用户交互。
如果您编写了一段 JavaScript 代码，并希望在网页中执行它，就需要将 JS 代码正确嵌入到 HTML 文件中。以下是几种常见的实现方式：
一、使用 script 标签内嵌 JS 代码
通过在 HTML 文件中使用 <script> 标签，可以直接写入 JavaScript 代码，浏览器会在加载页面时按顺序执行。
1、在 HTML 文件的 <head> 或 <body> 区域插入 <script> 标签。
2、在开始标签和结束标签之间写入您的 JavaScript 代码。
立即学习“前端免费学习笔记（深入）”；
3、例如：<script> alert("Hello World"); </script> 将在页面加载时弹出提示框。
二、引入外部 JS 文件
当 JavaScript 代码量较大或需要多个页面共享同一脚本时，推荐将其保存为独立的 .js 文件并通过 src 属性引入。
1、将 JavaScript 代码保存为以 .js 为扩展名的文件，例如 script.js。
2、在 HTML 文件中使用 <script src="文件路径"></script> 引入该文件。
3、例如：<script src="script.js"></script> 可加载同目录下的外部脚本。
三、设置 defer 或 async 属性优化脚本加载
为了防止 JavaScript 加载阻塞页面渲染，可以为外部脚本添加 defer 或 async 属性以控制执行时机。
1、在引入外部脚本时，在 script 标签中添加 defer 属性，使脚本在文档解析完成后执行。
2、或者添加 async 属性，使脚本在下载完成后立即执行，不保证顺序。
3、例如：<script src="app.js" defer></script> 适用于依赖 DOM 的脚本。
四、在事件属性中直接写 JS 代码
可以在 HTML 元素的事件属性中直接写入简短的 JavaScript 代码，用于响应用户操作。
1、选择一个支持事件的 HTML 标签，如 button、div 等。
2、为其添加事件属性，例如 onclick、onmouseover。
3、在属性值中写入要执行的 JS 语句，例如：<button onclick="alert('点击触发')">点我</button>。
