在HTML中调用JavaScript，可以通过以下几种方式：
1、内嵌式（Inline）：将JavaScript代码直接写在HTML标签内部，这种方法适用于简单的脚本，但不利于代码的维护和复用。
<!DOCTYPE html>
<html>
<head>
<title>内嵌式示例</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<button onclick="alert('你好，世界！')">点击我</button>
</body>
</html>
2、外部引用（External）：将JavaScript代码保存在一个单独的文件中，然后在HTML文件中使用<script>标签引用该文件，这种方法有利于代码的模块化和复用。
创建一个名为script.js的文件，并将以下代码保存在其中：
function showAlert() {
alert('你好，世界！');
}
在HTML文件中引用这个文件：
<!DOCTYPE html> <html> <head> <title>外部引用示例</title> </head> <body> <h1>欢迎来到我的网站！</h1> <button onclick="showAlert()">点击我</button> <script src="script.js"></script> </body> </html>
3、事件监听器（Event Listener）：通过为HTML元素添加事件监听器，可以在特定事件发生时执行JavaScript代码，这种方法适用于动态生成的元素。
<!DOCTYPE html>
<html>
<head>
<title>事件监听器示例</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<button id="myButton">点击我</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('你好，世界！');
});
</script>
</body>
</html>
4、DOM操作：通过JavaScript操作HTML文档的DOM结构，可以实现更复杂的功能，可以创建、修改或删除元素。
<!DOCTYPE html>
<html>
<head>
<title>DOM操作示例</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<button id="myButton">点击我</button>
<ul id="myList"></ul>
<script>
document.getElementById('myButton').addEventListener('click', function() {
var newItem = document.createElement('li');
newItem.textContent = '新项目';
document.getElementById('myList').appendChild(newItem);
});
</script>
</body>
</html>
5、AJAX：通过使用XMLHttpRequest对象或Fetch API，可以在不刷新页面的情况下与服务器进行通信，从而实现异步加载数据，这种方法适用于需要从服务器获取数据的场景。
<!DOCTYPE html>
<html>
<head>
<title>AJAX示例</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<button id="myButton">点击我</button>
<div id="myDiv"></div>
<script>
document.getElementById('myButton').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('myDiv').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();
});
</script>
</body>
</html>
以上就是在HTML中调用JavaScript的几种常见方法，根据实际需求，可以选择适合的方法来实现所需的功能。