内联脚本：在html的标签中直接编写js代码，如alert('页面加载完成');，适合小规模单页应用。2. 外部脚本：将js代码写入.js文件并通过引入，便于维护与复用。3. 事件绑定：在html元素上使用onclick等属性调用js函数，如，实现用户交互响应。4. dom动态加载：通过document.createelement('script')创建脚本标签并设置src，实现按需加载，提升性能。
如果您希望在网页中实现动态交互效果，通常需要将HTML与JavaScript结合使用。HTML负责页面结构，而JavaScript则用于处理逻辑和用户交互。以下是几种常见的HTML与JS组合运行的方法：
一、内联脚本方式
通过在HTML文档的<script></script>标签中直接编写JavaScript代码，可以实现脚本与结构的紧密结合。这种方式适用于代码量较小且仅在当前页面使用的场景。
1、在HTML文件的或标签内插入<script></script>标签。
2、在<script></script>标签内部编写JavaScript代码，例如：alert('页面加载完成');
立即学习“前端免费学习笔记（深入）”；
3、保存文件并用浏览器打开，JavaScript代码将在页面加载时自动执行。
二、外部脚本引入
将JavaScript代码写入独立的.js文件中，并通过HTML的src属性引入，有利于代码维护和多页面共享。该方法适合项目规模较大或需要复用脚本的情况。
1、创建一个以.js为扩展名的文件，如script.js，并在其中编写JavaScript代码。
2、在HTML文件中使用<script src="script.js"></script>标签引入该文件。
3、确保HTML文件与JS文件路径正确，浏览器会自动下载并执行外部脚本。
三、事件驱动绑定
通过HTML元素的事件属性调用JavaScript函数，可以在特定用户行为（如点击、输入）发生时触发脚本执行。这种模式增强了用户交互性。
1、在JavaScript中定义一个函数，例如：function handleClick() { console.log('按钮被点击'); }
2、在HTML元素上使用事件属性绑定该函数，如：<button onclick="handleClick()">点击我</button>
3、当用户点击按钮时，对应的JavaScript函数将被调用并执行。
四、DOM动态加载脚本
利用JavaScript操作DOM来动态创建并插入<script></script>标签，可实现按需加载脚本资源，提升页面初始加载性能。
1、在JavaScript中创建一个新的script元素：const script = document.createElement('script');
2、设置其src属性指向目标JS文件地址，例如：script.src = 'dynamic.js';
3、将该元素添加到页面的或中：document.head.appendChild(script);
