在HTML中引入JavaScript，可以通过以下几种方式：
1、内嵌式（Inline）：将JavaScript代码直接写在HTML文件中，使用<script>标签包裹，这种方法适用于简单的脚本，但不利于代码的维护和复用。
<!DOCTYPE html>
<html>
<head>
<title>内嵌式示例</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个内嵌式的例子。</p>
<script>
alert('Hello, World!');
</script>
</body>
</html>
2、外部引用（External）：将JavaScript代码保存在一个单独的文件中，然后在HTML文件中使用<script>标签的src属性引用该文件，这种方法有利于代码的模块化和复用。
创建一个名为script.js的文件，并将以下代码保存在其中：
function showMessage() {
alert('Hello, World!');
}
在HTML文件中引入这个外部文件：
<!DOCTYPE html>
<html>
<head>
<title>外部引用示例</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个外部引用的例子。</p>
<button onclick="showMessage()">点击我</button>
<script src="script.js"></script>
</body>
</html>
3、事件监听器（Event Listener）：通过为HTML元素添加事件监听器，当触发特定事件时执行JavaScript代码，这种方法可以实现更复杂的交互效果。
<!DOCTYPE html>
<html>
<head>
<title>事件监听器示例</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个事件监听器的例子。</p>
<button id="myButton">点击我</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('你好，世界！');
});
</script>
</body>
</html>
4、DOM操作（DOM Manipulation）：通过JavaScript操作HTML文档结构，实现动态内容的更新，这种方法可以实现更丰富的网页交互。
<!DOCTYPE html>
<html>
<head>
<title>DOM操作示例</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个DOM操作的例子。</p>
<div id="content"></div>
<script>
var contentDiv = document.getElementById('content');
contentDiv.innerHTML = '这是通过DOM操作插入的内容。';
</script>
</body>
</html>
5、AJAX（异步JavaScript和XML）：通过在不刷新整个页面的情况下与服务器交换数据，实现动态内容的加载，这种方法可以实现更高效的网页交互。
<!DOCTYPE html>
<html>
<head>
<title>AJAX示例</title>
<script>
function loadData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('content').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'data.txt', true);
xhr.send();
}
</script>
</head>
<body onload="loadData()">
<h1>欢迎来到我的网站！</h1>
<p>这是一个AJAX的例子。</p>
<div id="content"></div>
</body>
</html>
以上就是在HTML中引入JavaScript的五种方法，根据实际需求选择合适的方法，可以提高网页的交互性和用户体验。