答案：html通过内联事件、dom绑定、传参调用和页面加载自动执行等方式调用javaScript函数。1. 内联事件如onclick直接触发函数，适合简单场景；2. 使用getElementById结合addEventListener实现结构与行为分离，利于维护；3. 可在调用时传递参数，内联或闭包方式均可；4. 通过DOMContentLoaded确保页面加载后执行初始化函数，避免元素未就绪问题。应根据项目规模选择合适方式，提升代码可读性与可维护性。
在网页开发中，HTML与javascript的交互是实现动态功能的核心。通过合理调用JavaScript函数，可以让页面响应用户操作、更新内容或处理数据。以下是几种常见的HTML中调用JavaScript函数的方法。
1. 使用内联事件处理器
直接在HTML标签中绑定事件，是最简单的方式。例如点击按钮时执行js函数：
<button onclick=”alert(‘Hello World!’)”>点击我</button>
也可以调用已定义的函数：
<script>
function sayHello() {
alert(‘你好！’);
}
</script>
<button onclick=”sayHello()”>打招呼</button>
这种方式适合简单场景，但不推荐大量使用，因为逻辑与结构混杂，不利于维护。
立即学习“Java免费学习笔记（深入）”；
2. 通过DOM选择器绑定事件
将JavaScript与HTML分离，更利于代码管理。先给元素添加id或其他属性：
<button id=”myBtn”>点我执行函数</button>
然后在脚本中获取元素并绑定事件：
<script>
document.getElementById(“myBtn”).addEventListener(“click”, function() {
alert(“按钮被点击了”);
});
</script>
这种方法清晰分离结构与行为，是现代Web开发推荐的做法。
3. 调用带参数的函数
有时需要传递数据给函数。可以在内联方式中传参：
<button onclick=”greetUser(‘张三’)”>问候张三</button>
<script>
function greetUser(name) {
alert(‘你好，’ + name);
}
</script>
若使用事件监听方式，可通过闭包传参：
document.getElementById(“myBtn”).addEventListener(“click”, function() {
greetUser(“李四”);
});
4. 页面加载后自动执行函数
使用window.onload或DOMContentLoaded确保DOM构建完成后再调用函数：
<script>
window.addEventListener(“DOMContentLoaded”, function() {
initPage();
});
function initPage() {
console.log(“页面已准备好”);
}
</script>
这样可以避免因元素未加载导致的操作失败。
基本上就这些常用方法。根据项目复杂度选择合适的方式，小型页面可用内联，大型应用建议用事件监听分离逻辑。关键是让代码可读、易维护。