在HTML中引用JavaScript，可以通过以下几种方式：
1、内嵌式（Inline）：将JavaScript代码直接写在HTML文件中，使用<script>标签包裹，这种方法适用于简单的脚本，但不利于代码的维护和复用。
<!DOCTYPE html>
<html>
<head>
<title>内嵌式引用JavaScript</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<button onclick="alert('你好，世界！')">点击我</button>
<script>
function showAlert() {
alert('你好，世界！');
}
</script>
</body>
</html>
2、外部引用（External）：将JavaScript代码保存在一个单独的文件中，然后在HTML文件中使用<script>标签的src属性引用该文件，这种方法有利于代码的模块化和复用。
创建一个名为script.js的文件，并将以下代码保存在其中：
function showAlert() {
alert('你好，世界！');
}
在HTML文件中引用这个外部文件：
<!DOCTYPE html> <html> <head> <title>外部引用JavaScript</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>事件监听器引用JavaScript</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<button id="myButton">点击我</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('你好，世界！');
});
</script>
</body>
</html>
4、DOM操作（DOM Manipulation）：通过JavaScript操作HTML文档的DOM结构，可以实现动态内容的更新和交互，这种方法可以实现更丰富的网页功能。
<!DOCTYPE html>
<html>
<head>
<title>DOM操作引用JavaScript</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<button id="myButton">点击我</button>
<div id="output"></div>
<script>
document.getElementById('myButton').addEventListener('click', function() {
var output = document.getElementById('output');
output.innerHTML = '你好，世界！';
});
</script>
</body>
</html>
5、AJAX（异步JavaScript和XML）：通过使用AJAX技术，可以在不刷新整个页面的情况下与服务器进行数据交互，这种方法可以实现实时更新和数据获取。
<!DOCTYPE html>
<html>
<head>
<title>AJAX引用JavaScript</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<button id="myButton">点击我</button>
<div id="output"></div>
<script>
document.getElementById('myButton').addEventListener('click', function() {
$.ajax({
url: 'https://api.example.com/data', // 替换为实际的数据API地址
type: 'GET',
dataType: 'json',
success: function(data) {
var output = document.getElementById('output');
output.innerHTML = data.message; // 根据实际返回的数据结构进行修改
},
error: function() {
alert('获取数据失败，请稍后重试。');
}
});
});
</script>
</body>
</html>
以上就是在HTML中引用JavaScript的几种常见方法，根据实际需求和项目规模，可以选择合适的方法来实现所需的功能。